/*
 * WP AI SEO — Admin Theme
 * Sierra Design System v2.0
 * Font: Plus Jakarta Sans | Accent: #146EF5 | Light + Dark Mode
 * Note: Plus Jakarta Sans is enqueued via wp_enqueue_style() in PHP;
 *       no @import needed here.
 *
 * CSS Variable Prefix Convention (CSS-5):
 *   --sp-*      Canonical design tokens (backgrounds, text, borders, primary).
 *               Defined here in admin.css. Used by all admin pages.
 *   --sp-ai-*   AI-specific tokens (ai-components.css). Extend --sp-*.
 *   --waiseo-*  License & wizard scoped tokens (license.css).
 *               Isolated to avoid leaking into main admin UI.
 *   --msp-*     Multisite / network admin tokens (network.css).
 *               Only loaded on network admin screens.
 *
 *   When adding NEW tokens, always use the --sp-* prefix.
 *   --waiseo-* and --msp-* exist for historical scoping and should not
 *   be extended. See each file's :root block for the full token list.
 * --------------------------------------------------------- */

/* ============================================================
   SIERRA DESIGN SYSTEM v2.0 — WP AI SEO
   Complete token system with light + dark mode support
   ============================================================ */

:root,
[data-theme="light"] {

    /* --- Brand --- */
    --sp-primary: #146EF5;
    --sp-primary-hover: #0f5fd4;
    --sp-primary-subtle: rgba(20, 110, 245, 0.08);
    --sp-primary-subtle-hover: rgba(20, 110, 245, 0.14);
    --sp-ai-purple: #7C3AED;
    --sp-ai-purple-hover: #6d28d9;
    --sp-ai-purple-subtle: rgba(124, 58, 237, 0.08);

    /* --- Backgrounds --- */
    --sp-bg: #f4f6fb;
    --sp-bg-app: #ffffff;
    --sp-bg-card: #ffffff;
    --sp-bg-card-hover: #fafbff;
    --sp-bg-input: #ffffff;
    --sp-bg-nav: #0f1623;
    --sp-bg-nav-item-hover: rgba(255, 255, 255, 0.07);
    --sp-bg-nav-item-active: rgba(20, 110, 245, 0.15);
    --sp-bg-hero: linear-gradient(135deg, #0f1623 0%, #1a2540 100%);
    --sp-bg-overlay: rgba(15, 22, 35, 0.6);

    /* --- Text --- */
    --sp-text: #0d1117;
    --sp-text-secondary: #4b5563;
    --sp-text-muted: #9ca3af;
    --sp-text-placeholder: #c4cdd8;
    --sp-text-on-dark: #f1f5f9;
    --sp-text-on-dark-muted: #94a3b8;
    --sp-text-link: #146EF5;

    /* --- Borders --- */
    --sp-border: rgba(0, 0, 0, 0.07);
    --sp-border-medium: rgba(0, 0, 0, 0.12);
    --sp-border-strong: rgba(0, 0, 0, 0.20);
    --sp-border-focus: #146EF5;

    /* --- Semantic colors --- */
    --sp-success: #10b981;
    --sp-success-subtle: rgba(16, 185, 129, 0.08);
    --sp-warning: #f59e0b;
    --sp-warning-subtle: rgba(245, 158, 11, 0.08);
    --sp-danger: #ef4444;
    --sp-danger-subtle: rgba(239, 68, 68, 0.08);
    --sp-info: #3b82f6;
    --sp-info-subtle: rgba(59, 130, 246, 0.08);

    /* --- Shadows --- */
    --sp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --sp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --sp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --sp-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);
    --sp-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);
    --sp-shadow-focus: 0 0 0 3px rgba(20, 110, 245, 0.20);

    /* --- Shape --- */
    --sp-radius-xs: 4px;
    --sp-radius-sm: 6px;
    --sp-radius: 10px;
    --sp-radius-md: 12px;
    --sp-radius-lg: 16px;
    --sp-radius-xl: 20px;
    --sp-radius-full: 9999px;

    /* --- Spacing --- */
    --sp-space-1: 4px;
    --sp-space-2: 8px;
    --sp-space-3: 12px;
    --sp-space-4: 16px;
    --sp-space-5: 20px;
    --sp-space-6: 24px;
    --sp-space-8: 32px;
    --sp-space-10: 40px;
    --sp-space-12: 48px;

    /* --- Typography --- */
    --sp-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --sp-text-xs: 11px;
    --sp-text-sm: 13px;
    --sp-text-base: 15px;
    --sp-text-md: 17px;
    --sp-text-lg: 20px;
    --sp-text-xl: 24px;
    --sp-text-2xl: 28px;
    --sp-text-3xl: 34px;
    --sp-font-normal: 400;
    --sp-font-medium: 500;
    --sp-font-semibold: 600;
    --sp-font-bold: 700;
    --sp-line-height: 1.6;
    --sp-line-height-tight: 1.3;

    /* --- Transitions --- */
    --sp-transition-fast: .15s cubic-bezier(.4, 0, .2, 1);
    --sp-transition-base: .25s cubic-bezier(.4, 0, .2, 1);
    --sp-transition-slow: .35s cubic-bezier(.4, 0, .2, 1);

    /* --- Z-index --- */
    --sp-z-base: 1;
    --sp-z-dropdown: 100;
    --sp-z-modal: 1000;
    --sp-z-toast: 9999;

    /* --- Legacy aliases (backward compat for existing CSS) --- */
    --sp-primary-light: rgba(20, 110, 245, .08);
    --sp-primary-glow: rgba(20, 110, 245, .25);
    --sp-dark: #0f1623;
    --sp-dark-card: #131a26;
    --sp-dark-border: rgba(255, 255, 255, .08);
    --sp-dark-hover: #1a2235;
    --sp-light: #f4f6fb;
    --sp-light-card: #fafbff;
    --sp-surface: #ffffff;
    --sp-green: #10b981;
    --sp-green-light: rgba(16, 185, 129, 0.08);
    --sp-amber: #f59e0b;
    --sp-amber-light: rgba(245, 158, 11, 0.08);
    --sp-red: #ef4444;
    --sp-red-light: rgba(239, 68, 68, 0.08);
    --sp-purple: #7C3AED;
    --sp-purple-light: rgba(124, 58, 237, 0.08);
    --sp-blue-light: rgba(20, 110, 245, .08);
    --sp-border-light: rgba(0, 0, 0, 0.04);
    --sp-radius-pill: 9999px;
    --sp-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --sp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --sp-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);
    --sp-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);
    --sp-transition: .25s cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
   DARK MODE — All overrides
   Applied via JS: document.getElementById('waiseo-app').setAttribute('data-theme','dark')
   ============================================================ */

[data-theme="dark"] {

    /* --- Backgrounds --- */
    --sp-bg: #080c14;
    --sp-bg-app: #0d1117;
    --sp-bg-card: #131a26;
    --sp-bg-card-hover: #1a2235;
    --sp-bg-input: #1a2235;
    --sp-bg-nav: #080c14;
    --sp-bg-nav-item-hover: rgba(255, 255, 255, 0.06);
    --sp-bg-nav-item-active: rgba(20, 110, 245, 0.18);
    --sp-bg-hero: linear-gradient(135deg, #050810 0%, #0d1625 100%);

    /* --- Text --- */
    --sp-text: #e8edf5;
    --sp-text-secondary: #8b97a8;
    --sp-text-muted: #8b97a8;
    --sp-text-placeholder: #74839c;
    --sp-text-on-dark: #e8edf5;
    --sp-text-on-dark-muted: #94a3b8;

    /* --- Borders --- */
    --sp-border: rgba(255, 255, 255, 0.06);
    --sp-border-medium: rgba(255, 255, 255, 0.10);
    --sp-border-strong: rgba(255, 255, 255, 0.16);
    --sp-border-light: rgba(255, 255, 255, 0.04);

    /* --- Shadows --- */
    --sp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --sp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --sp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --sp-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --sp-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.7);
    --sp-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --sp-shadow-focus: 0 0 0 3px rgba(20, 110, 245, 0.30);

    /* --- Legacy dark mode aliases --- */
    --sp-light: #0d1117;
    --sp-light-card: #131a26;
    --sp-surface: #131a26;
    --sp-dark: #080c14;
    --sp-dark-card: #131a26;
    --sp-dark-hover: #1a2235;
    --sp-primary-light: rgba(20, 110, 245, 0.15);
    --sp-green-light: rgba(16, 185, 129, 0.12);
    --sp-amber-light: rgba(245, 158, 11, 0.12);
    --sp-red-light: rgba(239, 68, 68, 0.12);
    --sp-purple-light: rgba(124, 58, 237, 0.12);
    --sp-blue-light: rgba(20, 110, 245, 0.12);
}

/* === Scoped Reset === */
body.my-seo-active #wpcontent {
    background: var(--sp-light);
}

/* Screen Options / Help overlap the custom sticky header — not used on plugin pages */
body.my-seo-active #screen-meta-links,
body.my-seo-active #screen-meta,
body.waiseo-admin-screen #screen-meta-links,
body.waiseo-admin-screen #screen-meta {
    display: none !important;
}

body.my-seo-active #wpbody-content > .wrap > .wp-header-end,
body.waiseo-admin-screen #wpbody-content > .wrap > .wp-header-end {
    display: none;
}

/* === Layout Shell === */
.sp-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px 56px;
    font-family: var(--sp-font);
    color: var(--sp-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -.01em;
}

.sp-wrap *,
.sp-wrap *::before,
.sp-wrap *::after {
    box-sizing: border-box;
}

/* === Top Bar / Tab Navigation — Sleek Two-Row Header === */
.sp-topbar {
    display: flex;
    flex-direction: column;
    margin: 0 -28px 36px;
    background: linear-gradient(180deg, #18191B 0%, var(--sp-dark) 100%);
    position: sticky;
    top: 32px;
    z-index: 90;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 4px 20px rgba(0, 0, 0, .35);
    border-bottom: none;
    backdrop-filter: saturate(1.2);
}

/* Row 1: Brand bar */
.sp-topbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 32px;
    flex-shrink: 0;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.sp-topbar-brand::after {
    display: none;
}

.sp-logo-icon {
    width: 34px;
    height: 34px;
    background: var(--sp-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(20, 110, 245, .25);
    transition: transform .2s ease, box-shadow .2s ease;
}

.sp-logo-icon:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 10px rgba(20, 110, 245, .3);
}

.sp-brand-name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--sp-text-on-dark);
}

/* Row 2: Tab navigation */
.sp-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0;
    flex: 1;
    background: transparent;
    position: relative;
}

.sp-tabs::-webkit-scrollbar {
    display: none;
}

.sp-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sp-text-on-dark-muted);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 100px;
    /* Modern fully rounded edge pill shape */
    transition: color var(--sp-transition-fast), background var(--sp-transition-fast), box-shadow var(--sp-transition-fast);
    position: relative;
    border: none;
    background: transparent;
    letter-spacing: .02em;
}

.sp-tab:hover {
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .05);
    text-decoration: none;
}

.sp-tab:focus-visible {
    outline: 2px solid var(--sp-primary);
    outline-offset: -2px;
    border-radius: 100px;
}

.sp-tab.sp-tab-active {
    color: #fff;
    background: rgba(20, 110, 245, .12);
    font-weight: 600;
    box-shadow: none;
    border: none;
}

.sp-tab.sp-tab-active:hover {
    background: rgba(20, 110, 245, .18);
}

.sp-tab-icon {
    font-size: 14px;
    line-height: 1;
    opacity: .55;
    transition: opacity .2s ease;
}

.sp-tab:hover .sp-tab-icon {
    opacity: .85;
}

.sp-tab.sp-tab-active .sp-tab-icon {
    opacity: 1;
    color: var(--sp-primary);
}

.sp-tab-label {
    line-height: 1;
}

/* Special styling for AI tabs — subtle glow */
#tab-ai-hub,
#tab-ai-settings {
    position: relative;
}

#tab-ai-hub .sp-tab-icon,
#tab-ai-settings .sp-tab-icon {
    color: inherit;
}

#tab-ai-hub.sp-tab-active .sp-tab-icon {
    color: #a78bfa;
}

#tab-ai-hub.sp-tab-active::after {
    background: linear-gradient(90deg, var(--sp-primary), #8B5CF6);
}

#tab-ai-settings.sp-tab-active .sp-tab-icon {
    color: #a78bfa;
}

#tab-ai-settings.sp-tab-active::after {
    background: linear-gradient(90deg, #8B5CF6, var(--sp-primary));
}

/* ═══════════════════════════════════════════════════
   Settings Sub-Tabs (General / Social / Sitemaps / Tools)
   ═══════════════════════════════════════════════════ */
.sp-sub-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 28px;
    padding: 5px;
    background: var(--sp-light);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: var(--sp-radius);
}

.sp-sub-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    font-family: var(--sp-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text-muted);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--sp-transition-fast) cubic-bezier(.4, 0, .2, 1);
    white-space: nowrap;
}

.sp-sub-tab .dashicons,
.sp-sub-tab svg {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
    flex-shrink: 0;
}

.sp-sub-tab:hover {
    color: var(--sp-dark);
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.sp-sub-tab-active {
    color: #fff;
    background: var(--sp-primary);
    box-shadow: 0 2px 8px rgba(20, 110, 245, .25);
}

.sp-sub-tab-active:hover {
    color: #fff;
    background: var(--sp-primary);
    box-shadow: 0 4px 14px rgba(20, 110, 245, .30);
    transform: translateY(-1px);
}

.sp-sub-panel {
    display: none;
    animation: spSubFadeIn .3s cubic-bezier(.4, 0, .2, 1);
}

.sp-sub-panel-active {
    display: block;
}

@keyframes spSubFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Page Container === */
.sp-page {
    animation: spFadeIn .4s ease;
}

@keyframes spFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Unified Page Heading (shared by ALL admin pages) ───────────────
   One component to rule them all: gradient icon tile + H1 + subtitle.
   Use render_page_head() in PHP — never hand-roll a page title again. */
.sp-page-head {
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.sp-page-head__icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--sp-primary, #146EF5) 0%, var(--sp-purple, #7C3AED) 100%);
    color: #fff;
    box-shadow: 0 6px 18px -6px rgba(20, 110, 245, .55);
}

.sp-page-head__icon svg {
    width: 26px;
    height: 26px;
    display: block;
}

.sp-page-head__text {
    min-width: 0;
}

.sp-page-head h1 {
    font-size: 28px;
    font-weight: 800;
    color: var(--sp-text);
    margin: 0 0 4px;
    letter-spacing: -.6px;
    line-height: 1.2;
    padding: 0;
}

.sp-page-head p {
    font-size: 15px;
    color: var(--sp-text-secondary);
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .sp-page-head { gap: 12px; }
    .sp-page-head__icon { width: 44px; height: 44px; border-radius: 12px; }
    .sp-page-head__icon svg { width: 22px; height: 22px; }
    .sp-page-head h1 { font-size: 23px; }
}

/* === Hero Section (Dashboard) — Sierra Dark Style === */
.sp-hero {
    background: linear-gradient(135deg, #18191B 0%, var(--sp-dark) 50%, #1a1c2e 100%);
    border-radius: var(--sp-radius-xl);
    padding: 44px 48px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: var(--sp-shadow-lg);
}

.sp-hero::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -15%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--sp-primary-glow) 0%, transparent 70%);
    pointer-events: none;
}

.sp-hero::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(139, 92, 246, .15) 0%, transparent 70%);
    pointer-events: none;
}

.sp-hero-text {
    position: relative;
    z-index: 1;
}

.sp-hero-text h1,
.sp-hero-text h2 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #fff;
    letter-spacing: -.3px;
    line-height: 1.25;
}

.sp-hero-text p {
    font-size: 15px;
    opacity: .65;
    margin: 0;
    color: #fff;
    line-height: 1.5;
}

.sp-hero-metrics {
    display: flex;
    gap: 36px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.sp-metric {
    text-align: center;
}

.sp-metric-value {
    display: block;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.5px;
    color: #ffffff;
}

.sp-metric-label {
    display: block;
    font-size: 12px;
    opacity: .5;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 500;
}

/* === Stat Cards Grid === */
.sp-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.sp-cards--3 {
    grid-template-columns: repeat(3, 1fr);
}

.sp-card {
    background: var(--sp-surface);
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-border);
    padding: 24px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: box-shadow var(--sp-transition), transform var(--sp-transition), border-color var(--sp-transition);
    box-shadow: var(--sp-shadow);
    position: relative;
    overflow: hidden;
}

.sp-card:hover {
    box-shadow: var(--sp-shadow-md);
    transform: translateY(-3px);
    border-color: rgba(20, 110, 245, .12);
}

.sp-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    transition: transform var(--sp-transition);
}

.sp-card:hover .sp-card-icon {
    transform: scale(1.08);
}

.sp-card--blue .sp-card-icon {
    background: var(--sp-blue-light);
    color: var(--sp-primary);
}

.sp-card--green .sp-card-icon {
    background: var(--sp-green-light);
    color: var(--sp-green);
}

.sp-card--amber .sp-card-icon {
    background: var(--sp-amber-light);
    color: var(--sp-amber);
}

.sp-card--purple .sp-card-icon {
    background: var(--sp-purple-light);
    color: var(--sp-purple);
}

.sp-card-body {
    min-width: 0;
}

.sp-card-number {
    display: block;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--sp-text);
    letter-spacing: -.3px;
}

.sp-card-title {
    font-size: 13px;
    color: var(--sp-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: 3px;
    font-weight: 500;
}
.sp-card-body > .sp-card-title:first-child {
    margin-top: 0;
}

.sp-card-action-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 6px;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-primary);
    background: var(--sp-primary-light, rgba(20,110,245,.08));
    border: 1px solid rgba(20, 110, 245, .15);
    text-decoration: none;
    letter-spacing: .1px;
    transition: background .15s, color .15s;
}
.sp-card-action-link:hover {
    background: var(--sp-primary);
    color: #fff;
    text-decoration: none;
}

/* === Grid Layout (2 columns) === */
.sp-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

/* Dashboard row: a wide data table paired with a narrow action rail —
   a 50/50 split stretches the buttons and cramps the table, so weight it. */
.sp-grid-2--dash {
    grid-template-columns: 1.7fr 1fr;
    align-items: start;
}

.sp-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* === Panel Component — Sierra Clean Card === */
.sp-panel {
    background: var(--sp-surface);
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-border);
    box-shadow: var(--sp-shadow);
    overflow: hidden;
    margin-bottom: 24px;
    transition: box-shadow var(--sp-transition-slow);
}

.sp-panel:hover {
    box-shadow: var(--sp-shadow-md);
}

.sp-panel-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--sp-border-light);
    background: var(--sp-light-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sp-panel-header h2 {
    font-size: 15px;
    font-weight: 600;
    color: var(--sp-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -.1px;
}

.sp-panel-header h2 .dashicons,
.sp-panel-header h2 svg {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--sp-primary);
    flex-shrink: 0;
}

.sp-panel-body {
    padding: 24px;
}

.sp-panel-body--flush {
    padding: 0;
}

.sp-panel--info {
    border-color: rgba(20, 110, 245, .15);
}

/* Panel form-table overrides */
.sp-panel .form-table {
    margin: 0;
}

.sp-panel .form-table th {
    font-size: 14px;
    font-weight: 500;
    color: var(--sp-text);
    padding: 16px 12px 16px 0;
    width: 180px;
}

.sp-panel .form-table td {
    padding: 16px 12px;
    font-size: 14px;
}

.sp-panel .form-table td label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.sp-panel .form-table td p.description {
    color: var(--sp-text-muted);
    font-size: 13px;
    margin-top: 6px;
}

.sp-panel .form-table input[type="text"],
.sp-panel .form-table input[type="url"],
.sp-panel .form-table input[type="number"],
.sp-panel .form-table input[type="tel"],
.sp-panel .form-table input[type="email"],
.sp-panel .form-table textarea,
.sp-panel .form-table select {
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    padding: 10px 14px;
    font-size: 14px;
    font-family: var(--sp-font);
    color: var(--sp-text, #1e293b);
    transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
    max-width: 100%;
    background: var(--sp-surface);
    height: auto;
    line-height: normal;
}

.sp-panel .form-table input[type="text"]:focus,
.sp-panel .form-table input[type="url"]:focus,
.sp-panel .form-table input[type="tel"]:focus,
.sp-panel .form-table input[type="email"]:focus,
.sp-panel .form-table textarea:focus,
.sp-panel .form-table select:focus {
    border-color: var(--sp-primary);
    box-shadow: 0 0 0 3px var(--sp-primary-light);
    outline: none;
}

.sp-panel .form-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--sp-primary);
    border-radius: 4px;
}

.sp-panel .form-table code {
    background: var(--sp-primary-light);
    color: var(--sp-primary);
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

/* === Save Bar — Sierra CTA Button Style === */
/* Unified with .sp-form-actions (AI Settings) so every "Save" bar looks
   identical across pages — light surface, not a dark gradient slab. */
.sp-save-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 28px;
    background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    margin-top: 28px;
    margin-bottom: 28px;
    transition: box-shadow .2s ease;
}

[data-theme="dark"] .sp-save-bar {
    background: linear-gradient(135deg, var(--sp-bg-card, #1e1e2e) 0%, rgba(255,255,255,.02) 100%);
    border-color: var(--sp-border, rgba(255,255,255,0.06));
}

.sp-save-bar .button-primary,
.sp-save-bar input[type="submit"].button-primary {
    background: var(--sp-primary) !important;
    border-color: var(--sp-primary) !important;
    border-radius: var(--sp-radius);
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--sp-font);
    height: auto;
    line-height: 1.5;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: all var(--sp-transition);
    text-shadow: none;
}

.sp-save-bar .button-primary:hover,
.sp-save-bar input[type="submit"].button-primary:hover {
    background: var(--sp-primary-hover) !important;
    border-color: var(--sp-primary-hover) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    transform: translateY(-1px);
}

/* === Quick Actions — Sierra Dark Card Buttons === */
.sp-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-radius: var(--sp-radius);
    font-size: 14px;
    font-weight: 500;
    color: var(--sp-text);
    background: var(--sp-light-card);
    text-decoration: none;
    transition: all var(--sp-transition);
    border: 1px solid var(--sp-border-light);
    position: relative;
    overflow: hidden;
}

.sp-action-btn::after {
    content: '\2192';
    position: absolute;
    right: 14px;
    opacity: 0;
    transform: translateX(-6px);
    transition: all var(--sp-transition);
    font-size: 14px;
    color: var(--sp-primary);
}

.sp-action-btn:hover {
    background: var(--sp-primary-light);
    color: var(--sp-primary);
    border-color: rgba(20, 110, 245, .15);
    text-decoration: none;
    padding-right: 36px;
}

.sp-action-btn:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* Settings is no longer a "primary" — it's a neutral action like the rest,
   so the Quick Actions list reads as one calm set. (--primary kept as a
   harmless alias; it simply inherits the base neutral style.) */

.sp-action-btn .dashicons,
.sp-action-btn svg {
    font-size: 16px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* === Tips Section === */
.sp-tips {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-tip {
    display: flex;
    gap: 12px;
    padding: 14px 18px;
    font-size: 14px;
    color: var(--sp-text-secondary);
    line-height: 1.55;
    background: var(--sp-light-card);
    border-radius: var(--sp-radius);
    border-left: 3px solid var(--sp-primary);
    transition: background var(--sp-transition), transform var(--sp-transition);
}

.sp-tip:hover {
    background: var(--sp-primary-light);
    transform: translateX(3px);
}

.sp-tip strong {
    color: var(--sp-text);
    font-weight: 600;
}

/* === Social Settings Grid === */
.sp-social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
}

.sp-social-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--sp-light-card);
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-border-light);
    transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
}

.sp-social-item:focus-within {
    border-color: var(--sp-primary);
    box-shadow: 0 0 0 3px var(--sp-primary-light);
}

.sp-social-badge {
    width: 38px;
    height: 38px;
    border-radius: var(--sp-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.sp-social-field {
    flex: 1;
    min-width: 0;
}

.sp-social-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--sp-text-muted);
    margin-bottom: 4px;
}

.sp-social-field input {
    width: 100%;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    padding: 8px 12px;
    font-size: 13px;
    font-family: var(--sp-font);
    background: var(--sp-surface);
    transition: border-color var(--sp-transition);
}

.sp-social-field input:focus {
    border-color: var(--sp-primary);
    outline: none;
    box-shadow: 0 0 0 2px var(--sp-primary-light);
}

.sp-social-open {
    flex-shrink: 0;
}

a.sm-open-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--sp-radius);
    background: var(--sp-dark);
    color: var(--sp-text-on-dark);
    text-decoration: none;
    font-size: 14px;
    transition: all var(--sp-transition);
}

a.sm-open-link:hover {
    background: var(--sp-primary);
    color: #fff;
    transform: translateY(-1px);
}

/* === Sitemap Page === */
.sp-sitemap-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.sp-sitemap-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: var(--sp-light-card);
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-border-light);
    text-decoration: none;
    color: var(--sp-text);
    transition: all var(--sp-transition);
    position: relative;
    overflow: hidden;
}

.sp-sitemap-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--sp-primary);
    transition: width var(--sp-transition-slow);
}

.sp-sitemap-link:hover {
    border-color: var(--sp-primary);
    box-shadow: var(--sp-shadow-md);
    color: var(--sp-text);
    text-decoration: none;
    transform: translateY(-3px);
}

.sp-sitemap-link:hover::before {
    width: 100%;
}

.sp-sitemap-emoji {
    font-size: 28px;
    flex-shrink: 0;
}

.sp-sitemap-link strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.sp-sitemap-link small {
    color: var(--sp-text-muted);
    font-size: 11px;
    word-break: break-all;
}

.sp-submit-engines {
    margin-bottom: 24px;
}

.sp-submit-engines h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--sp-text);
}

.sp-engine-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.sp-engine-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--sp-radius);
    background: var(--sp-dark);
    color: var(--sp-text-on-dark);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--sp-transition);
    border: none;
}

.sp-engine-btn:hover {
    background: var(--sp-primary);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.sp-sitemap-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.sp-mini-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 80px;
    padding: 16px 20px;
    background: var(--sp-dark);
    border-radius: var(--sp-radius);
    color: #fff;
}

.sp-mini-num {
    font-size: 24px;
    font-weight: 700;
    color: var(--sp-primary);
    letter-spacing: -.3px;
}

.sp-mini-label {
    font-size: 11px;
    color: var(--sp-text-on-dark-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 500;
}

/* === Generic Panel Layout === */
.sp-panel {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    margin-bottom: 24px;
    overflow: hidden;
}

.sp-panel-head {
    padding: 24px 28px;
    border-bottom: 1px solid var(--sp-border-light);
    background: var(--sp-light-card);
}

.sp-panel-head h2 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--sp-text);
}

.sp-panel-head p {
    margin: 0;
    font-size: 14px;
    color: var(--sp-text-muted);
}

.sp-panel-body {
    padding: 28px;
}

/* === Recent Posts Table in Panel === */
.sp-panel table.wp-list-table {
    border: none;
    margin: 0;
}

.sp-panel table.wp-list-table thead th {
    background: var(--sp-light-card);
    border-bottom: 1px solid var(--sp-border-light);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--sp-text-muted);
    padding: 12px 16px;
    font-family: var(--sp-font);
}

.sp-panel table.wp-list-table tbody td {
    padding: 12px 16px;
    font-size: 14px;
    border-bottom: 1px solid var(--sp-border-light);
    color: var(--sp-text);
    font-family: var(--sp-font);
}

.sp-panel table.wp-list-table tbody tr:last-child td {
    border-bottom: none;
}

.sp-panel table.wp-list-table tbody tr:hover td {
    background: var(--sp-primary-light);
    transition: background var(--sp-transition-fast);
}

/* === Loading Overlay & Progress Bar === */
.my-seo-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 21, .35);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s cubic-bezier(.4, 0, .2, 1);
    backdrop-filter: blur(6px) saturate(.8);
    -webkit-backdrop-filter: blur(6px) saturate(.8);
}

.my-seo-loading-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.my-seo-progressbar {
    position: fixed;
    top: 32px;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
    overflow: hidden;
    background: rgba(20, 110, 245, .1);
}

.my-seo-progressbar.active {
    opacity: 1;
}

.my-seo-progressbar::after {
    content: '';
    display: block;
    width: 30%;
    height: 100%;
    background: var(--sp-primary);
    border-radius: 0 2px 2px 0;
    animation: spProgressSlide 1.4s ease infinite;
}

@keyframes spProgressSlide {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(400%);
    }
}

/* === WP Notices inside wrap === */
.sp-wrap .notice {
    border-radius: var(--sp-radius);
    border-left-width: 4px;
    margin: 12px 0;
    padding: 12px 18px;
    font-size: 14px;
    font-family: var(--sp-font);
}

.sp-wrap .notice-success {
    border-color: var(--sp-green);
    background: var(--sp-green-light);
}

.sp-wrap .notice-error {
    border-color: var(--sp-red);
    background: var(--sp-red-light);
}

/* === Redirects Page === */

/* Redirects header stats */
.my-seo-settings-header {
    background: var(--sp-dark);
    border-radius: var(--sp-radius);
    padding: 28px;
    margin-bottom: 20px;
    color: #fff;
}

.my-seo-settings-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
}

.my-seo-settings-header .settings-description {
    color: var(--sp-text-on-dark-muted);
    font-size: 14px;
    margin: 0 0 16px;
}

.my-seo-settings-header .dashboard-stats {
    display: flex;
    gap: 16px;
}

.my-seo-settings-header .header-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, .06);
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-dark-border);
}

.my-seo-settings-header .header-stat-number {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--sp-primary);
}

.my-seo-settings-header .header-stat-label {
    font-size: 11px;
    color: var(--sp-text-on-dark-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Redirects sub-tabs — light pill bar, matching Settings' .sp-sub-tabs so the
   Redirects page stops showing a heavy dark slab detached from the form. */
.sp-wrap .nav-tab-wrapper,
.my-seo-root .nav-tab-wrapper {
    background: var(--sp-light);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: var(--sp-radius);
    padding: 5px;
    margin-bottom: 20px;
    display: flex;
    gap: 6px;
}

.sp-wrap .nav-tab,
.my-seo-root .nav-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text-muted);
    border: none;
    background: transparent;
    margin: 0;
    border-radius: 8px;
    transition: all var(--sp-transition);
    font-family: var(--sp-font);
}

.sp-wrap .nav-tab:hover,
.my-seo-root .nav-tab:hover {
    color: var(--sp-text);
    background: rgba(0, 0, 0, .03);
}

.sp-wrap .nav-tab-active,
.sp-wrap .nav-tab.nav-tab-active,
.my-seo-root .nav-tab-active,
.my-seo-root .nav-tab.nav-tab-active {
    color: var(--sp-primary);
    background: var(--sp-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    font-weight: 600;
}

[data-theme="dark"] .my-seo-root .nav-tab:hover { background: rgba(255,255,255,.05); color: #fff; }
[data-theme="dark"] .my-seo-root .nav-tab-active { background: var(--sp-surface); color: var(--sp-primary); }

/* Redirects form & list */
/* ═══════════════════════════════════════════════════════════════
   REDIRECTS PAGE — complete design-system-aligned styles
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared panel shell (Redirects / Analytics / Import-Export tabs) ──
   Now a fully-rounded card since the tab bar is a detached pill bar above. */
.my-seo-redirects-container,
.my-seo-redirects-analytics,
.my-seo-redirects-import-export {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-md);
    padding: 28px;
    box-shadow: var(--sp-shadow);
}

/* ── Section headings inside panels ── */
.my-seo-redirects-form h2,
.my-seo-redirects-list h2,
.my-seo-redirects-analytics h2,
.my-seo-redirects-import-export h2 {
    font-size: 15px;
    font-weight: 600;
    color: var(--sp-text);
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sp-font);
}

.my-seo-redirects-form h2 svg,
.my-seo-redirects-list h2 svg {
    color: var(--sp-primary);
    flex-shrink: 0;
}

/* ── Add Redirect form ── */
.my-seo-redirects-form {
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--sp-border);
}

.my-seo-redirects-form .form-table th {
    font-size: 13px;
    font-weight: 500;
    color: var(--sp-text);
    width: 130px;
    padding: 10px 12px 10px 0;
    font-family: var(--sp-font);
}

.my-seo-redirects-form .form-table td {
    padding: 10px 0;
}

.my-seo-redirects-form .form-table input[type="text"],
.my-seo-redirects-form .form-table textarea,
.my-seo-redirects-form .form-table select {
    border: 1.5px solid var(--sp-border-medium);
    border-radius: var(--sp-radius);
    padding: 9px 14px;
    font-size: 14px;
    font-family: var(--sp-font);
    color: var(--sp-text);
    background: var(--sp-surface);
    transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
    width: 100%;
    max-width: 440px;
    height: auto;
    line-height: 1.5;
    box-shadow: var(--sp-shadow-xs);
}

.my-seo-redirects-form .form-table input:focus,
.my-seo-redirects-form .form-table textarea:focus,
.my-seo-redirects-form .form-table select:focus {
    border-color: var(--sp-primary);
    box-shadow: var(--sp-shadow-focus);
    outline: none;
}

.my-seo-redirects-form .form-table .description {
    font-size: 12px;
    color: var(--sp-text-muted);
    margin-top: 5px;
}

.my-seo-redirects-form .submit {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 0;
    padding: 0;
}

.rdr-add-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    background: var(--sp-primary) !important;
    border-color: var(--sp-primary) !important;
    border-radius: var(--sp-radius-full) !important;
    padding: 9px 22px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: var(--sp-font) !important;
    height: auto !important;
    line-height: 1.5 !important;
    color: #fff !important;
    transition: all var(--sp-transition) !important;
    box-shadow: 0 2px 8px rgba(20, 110, 245, .25) !important;
    cursor: pointer;
}

.rdr-add-btn:hover,
.rdr-add-btn:focus {
    background: var(--sp-primary-hover) !important;
    border-color: var(--sp-primary-hover) !important;
    box-shadow: 0 4px 16px rgba(20, 110, 245, .35) !important;
    transform: translateY(-1px);
}

/* ── Manage Redirects list ── */
.my-seo-redirects-list h2 {
    margin-top: 4px;
}

/* ── Filter Toolbar ── */
.my-seo-redirects-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.my-seo-redirects-toolbar .toolbar-left,
.my-seo-redirects-toolbar .toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.my-seo-redirects-toolbar select,
.my-seo-redirects-toolbar input[type="search"] {
    border: 1.5px solid var(--sp-border-medium);
    border-radius: var(--sp-radius);
    padding: 7px 11px;
    font-size: 13px;
    font-family: var(--sp-font);
    color: var(--sp-text);
    background: var(--sp-surface);
    transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
    height: auto;
}

.my-seo-redirects-toolbar select:focus,
.my-seo-redirects-toolbar input[type="search"]:focus {
    border-color: var(--sp-primary);
    box-shadow: var(--sp-shadow-focus);
    outline: none;
}

.my-seo-redirects-toolbar .button {
    border-radius: var(--sp-radius) !important;
    font-family: var(--sp-font) !important;
    font-size: 13px !important;
}

/* ── Redirects table ── */
.my-seo-redirects-container .wp-list-table {
    border-radius: var(--sp-radius);
    overflow: hidden;
    border: 1px solid var(--sp-border) !important;
    box-shadow: var(--sp-shadow-xs);
}

.my-seo-redirects-container .wp-list-table thead th {
    background: var(--sp-light-card);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--sp-text-muted);
    padding: 11px 14px;
    border-bottom: 1px solid var(--sp-border) !important;
    font-family: var(--sp-font);
}

.my-seo-redirects-container .wp-list-table tbody td {
    padding: 11px 14px;
    font-size: 13px;
    border-bottom: 1px solid var(--sp-border) !important;
    font-family: var(--sp-font);
    vertical-align: middle;
}

.my-seo-redirects-container .wp-list-table tbody tr:hover td {
    background: var(--sp-primary-subtle) !important;
}

.my-seo-redirects-container .wp-list-table tbody tr.inactive td {
    opacity: .5;
}

.rdr-notes-cell {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sp-text-muted) !important;
    font-size: 12px !important;
}

.rdr-actions-cell {
    white-space: nowrap;
}

.rdr-actions-cell .button {
    font-size: 12px !important;
    font-family: var(--sp-font) !important;
    border-radius: var(--sp-radius-sm) !important;
    padding: 3px 10px !important;
    height: auto !important;
    line-height: 1.6 !important;
}

/* ── Type & status badges ── */
.redirect-type {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: var(--sp-radius-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    font-family: var(--sp-font);
}

.redirect-type-301 {
    background: var(--sp-green-light);
    color: var(--sp-green);
}

.redirect-type-302 {
    background: var(--sp-amber-light);
    color: var(--sp-amber);
}

.redirect-type-307 {
    background: var(--sp-purple-light);
    color: var(--sp-purple);
}

.status-enabled {
    color: var(--sp-green);
    font-weight: 600;
    font-size: 13px;
}

.status-disabled {
    color: var(--sp-text-muted);
    font-weight: 500;
    font-size: 13px;
}

/* ── Empty state ── */
.my-seo-empty-state {
    text-align: center;
    padding: 64px 24px;
    color: var(--sp-text-muted);
}

.my-seo-empty-state .empty-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
    opacity: .25;
    color: var(--sp-text-muted);
}

.my-seo-empty-state h3 {
    font-size: 17px;
    color: var(--sp-text-secondary);
    margin: 0 0 8px;
    font-weight: 600;
    font-family: var(--sp-font);
}

.my-seo-empty-state p {
    font-size: 14px;
    margin: 0;
    font-family: var(--sp-font);
}

/* ═══════════════════════════════════════════════════════════════
   ANALYTICS TAB
   ═══════════════════════════════════════════════════════════════ */

.my-seo-redirects-analytics {
    padding-top: 28px;
}

.rdr-analytics-cards {
    margin-bottom: 28px;
}

.rdr-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-text);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--sp-font);
}

.rdr-section-title svg {
    color: var(--sp-primary);
    flex-shrink: 0;
}

.rdr-analytics-table-wrap .wp-list-table {
    border-radius: var(--sp-radius);
    overflow: hidden;
    border: 1px solid var(--sp-border) !important;
    box-shadow: var(--sp-shadow-xs);
}

.rdr-analytics-table-wrap .wp-list-table thead th {
    background: var(--sp-light-card);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--sp-text-muted);
    padding: 11px 14px;
    border-bottom: 1px solid var(--sp-border) !important;
    font-family: var(--sp-font);
}

.rdr-analytics-table-wrap .wp-list-table tbody td {
    padding: 11px 14px;
    font-size: 13px;
    border-bottom: 1px solid var(--sp-border) !important;
    font-family: var(--sp-font);
    vertical-align: middle;
}

.rdr-analytics-table-wrap .wp-list-table tbody tr:hover td {
    background: var(--sp-primary-subtle) !important;
}

.rdr-last-access {
    color: var(--sp-text-muted);
    font-size: 12px !important;
}

.rdr-never {
    color: var(--sp-text-placeholder);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   IMPORT / EXPORT TAB
   ═══════════════════════════════════════════════════════════════ */

.my-seo-redirects-import-export {
    padding-top: 28px;
}

.rdr-ie-header {
    margin-bottom: 24px;
}

.rdr-ie-header h2 {
    font-size: 16px !important;
    font-weight: 600;
    color: var(--sp-text);
    margin: 0 0 6px !important;
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--sp-font);
}

.rdr-ie-header h2 svg {
    color: var(--sp-primary);
    flex-shrink: 0;
}

.rdr-ie-header > p {
    font-size: 13px;
    color: var(--sp-text-muted);
    margin: 0;
    font-family: var(--sp-font);
}

.rdr-notice {
    margin: 0 0 20px !important;
    border-radius: var(--sp-radius) !important;
}

/* ── Card grid ── */
.my-seo-ie-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 782px) {
    .my-seo-ie-grid {
        grid-template-columns: 1fr;
    }
}

.my-seo-ie-card {
    background: var(--sp-surface);
    border: 1.5px solid var(--sp-border-medium);
    border-radius: var(--sp-radius-md);
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    overflow: hidden;
    transition: box-shadow var(--sp-transition), border-color var(--sp-transition), transform var(--sp-transition);
    box-shadow: var(--sp-shadow-sm);
}

.my-seo-ie-card:hover {
    box-shadow: var(--sp-shadow-md);
    border-color: rgba(20, 110, 245, .2);
    transform: translateY(-2px);
}

/* Coloured left accent strip + icon */
.my-seo-ie-card-icon-wrap {
    width: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    border-radius: 0;
}

.my-seo-ie-card-icon-wrap--blue {
    background: var(--sp-blue-light);
    color: var(--sp-primary);
}

.my-seo-ie-card-icon-wrap--green {
    background: var(--sp-green-light);
    color: var(--sp-green);
}

.my-seo-ie-card-body {
    flex: 1;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.my-seo-ie-card h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--sp-text);
    margin: 0;
    font-family: var(--sp-font);
}

.my-seo-ie-card p {
    font-size: 13px;
    color: var(--sp-text-muted);
    margin: 0;
    line-height: 1.6;
    font-family: var(--sp-font);
}

.rdr-ie-format-hint {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    font-size: 12px !important;
    color: var(--sp-text-muted) !important;
    background: var(--sp-light-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    padding: 6px 10px !important;
    line-height: 1.5;
}

.rdr-ie-format-hint svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--sp-info);
}

.my-seo-ie-card code {
    background: var(--sp-border);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 11px;
}

/* ── Shared CTA button for IE cards ── */
.rdr-ie-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: var(--sp-radius-full);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--sp-font);
    text-decoration: none !important;
    cursor: pointer;
    border: none;
    transition: all var(--sp-transition);
    align-self: flex-start;
    margin-top: 2px;
    line-height: 1.5;
}

.rdr-ie-btn--export {
    background: var(--sp-primary);
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(20, 110, 245, .25);
}

.rdr-ie-btn--export:hover,
.rdr-ie-btn--export:focus {
    background: var(--sp-primary-hover);
    box-shadow: 0 4px 16px rgba(20, 110, 245, .35);
    transform: translateY(-1px);
    color: #fff !important;
}

.rdr-ie-btn--import {
    background: var(--sp-green);
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, .25);
}

.rdr-ie-btn--import:hover,
.rdr-ie-btn--import:focus {
    background: #0da271;
    box-shadow: 0 4px 16px rgba(16, 185, 129, .35);
    transform: translateY(-1px);
    color: #fff !important;
}

/* ── Custom file drop zone ── */
.rdr-import-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 2px;
}

.rdr-file-drop-zone {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1.5px dashed var(--sp-border-medium);
    border-radius: var(--sp-radius);
    background: var(--sp-light-card);
    cursor: pointer;
    transition: border-color var(--sp-transition), background var(--sp-transition);
    font-size: 13px;
    color: var(--sp-text-secondary);
    font-family: var(--sp-font);
    min-height: 48px;
    position: relative;
}

.rdr-file-drop-zone:hover {
    border-color: var(--sp-primary);
    background: var(--sp-primary-subtle);
    color: var(--sp-primary);
}

.rdr-file-drop-zone svg {
    flex-shrink: 0;
    color: var(--sp-text-muted);
    transition: color var(--sp-transition);
}

.rdr-file-drop-zone:hover svg {
    color: var(--sp-primary);
}

.rdr-file-drop-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

#rdr-file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════
   waiseo-btn — Shared CTA button (dashboard upgrade CTAs)
   ═══════════════════════════════════════════════════ */
.waiseo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: var(--sp-radius-full);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--sp-font);
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all var(--sp-transition-base);
    white-space: nowrap;
    line-height: 1.4;
}

.waiseo-btn-primary {
    background: var(--sp-primary);
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(20, 110, 245, .30);
}

.waiseo-btn-primary:hover,
.waiseo-btn-primary:focus,
.waiseo-btn-primary:visited {
    background: var(--sp-primary-hover);
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(20, 110, 245, .40);
    transform: translateY(-1px);
}

.waiseo-btn-large {
    padding: 14px 32px;
    font-size: 15px;
}

/* ═══════════════════════════════════════════════════
   Dashboard Upgrade Banner — Modern redesign
   ═══════════════════════════════════════════════════ */
.waiseo-dashboard-upgrade-banner {
    margin-bottom: 28px;
}

.waiseo-upgrade-banner-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 28px;
    background: linear-gradient(135deg, #0f1623 0%, #1a2540 60%, #1e1438 100%);
    border-radius: var(--sp-radius-lg);
    border: 1px solid rgba(124, 58, 237, .20);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255,255,255,.04);
    position: relative;
    overflow: hidden;
}

.waiseo-upgrade-banner-inner::before {
    content: '';
    position: absolute;
    top: -60%;
    right: 5%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(124, 58, 237, .15) 0%, transparent 70%);
    pointer-events: none;
}

.waiseo-upgrade-banner-inner::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: 10%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(20, 110, 245, .12) 0%, transparent 70%);
    pointer-events: none;
}

.waiseo-upgrade-banner-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(124, 58, 237, .18);
    border: 1px solid rgba(124, 58, 237, .30);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #a78bfa;
    position: relative;
    z-index: 1;
}

.waiseo-upgrade-banner-icon svg {
    width: 24px;
    height: 24px;
}

.waiseo-upgrade-banner-text {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.waiseo-upgrade-banner-text h3 {
    font-size: 17px;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 4px;
    letter-spacing: -.2px;
}

.waiseo-upgrade-banner-text p {
    font-size: 14px;
    color: rgba(241, 245, 249, .60);
    margin: 0;
    line-height: 1.55;
}

.waiseo-upgrade-banner-inner .waiseo-btn-primary {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* Basic plan nudge — slightly different tint */
.waiseo-upgrade-banner--basic .waiseo-upgrade-banner-inner {
    background: linear-gradient(135deg, #0f1623 0%, #1a2235 60%, #1c1434 100%);
    border-color: rgba(20, 110, 245, .20);
}

.waiseo-upgrade-banner--basic .waiseo-upgrade-banner-icon {
    background: rgba(20, 110, 245, .15);
    border-color: rgba(20, 110, 245, .28);
    color: #60a5fa;
}

/* ═══════════════════════════════════════════════════
   Panel header — SVG icon support
   ═══════════════════════════════════════════════════ */
.sp-panel-header h2 svg,
.sp-panel-header h2 .waiseo-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--sp-primary);
    vertical-align: middle;
}

/* Quick Action SVG icon sizing */
.sp-action-btn svg,
.sp-action-btn .waiseo-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* SEO Health Score bar — SVG icons in breakdown */
.sp-seo-bar-meta svg,
.sp-seo-bar-meta .waiseo-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* CTA buttons in health score — SVG */
.sp-seo-cta-btn svg,
.sp-seo-cta-btn .waiseo-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Feature preview grid (plan teaser) — SVG icons */
.waiseo-feature-preview-card svg,
.waiseo-feature-preview-card .waiseo-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 10px;
    color: var(--sp-primary);
    display: block;
}

/* ═══════════════════════════════════════════════════
   SEO Tips — numbered pills instead of left border
   ═══════════════════════════════════════════════════ */
.sp-tip {
    border-left: none !important;
    background: var(--sp-bg-card, var(--sp-light-card)) !important;
    border: 1px solid var(--sp-border) !important;
    gap: 14px !important;
    align-items: flex-start !important;
}

.sp-tip-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--sp-primary-subtle);
    color: var(--sp-primary);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.sp-tip-body {
    flex: 1;
    min-width: 0;
}

/* Quick action icon pill */
.sp-action-btn .sp-action-ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--sp-primary-subtle);
    color: var(--sp-primary);
}

/* Primary action now has a LIGHT blue background, so the icon must be blue
   (not white) to stay visible. */
.sp-action-btn--primary .sp-action-ico {
    background: rgba(20, 110, 245, .14);
    color: var(--sp-primary);
}

/* AI action icon pill — always purple icon on white/purple-tinted bg, regardless of button bg color. */
.sp-action-btn--ai .sp-action-ico {
    background: rgba(255, 255, 255, .92);
    color: #7C3AED !important;
}

.sp-action-ico svg {
    width: 14px;
    height: 14px;
}

.my-seo-ie-card code {
    background: var(--sp-border-light, #e2e8f0);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 12px;
}

.my-seo-ie-btn {
    align-self: flex-start;
    margin-top: 6px !important;
    border-radius: var(--sp-radius) !important;
    font-weight: 600 !important;
}

.my-seo-ie-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.my-seo-ie-form input[type="file"] {
    display: block;
    font-size: 13px;
    color: var(--sp-text);
}

/* === Meta Box — WP AI SEO v5.0 ======================================= */

/* --- Postbox Header Branding --- */
#my_seo_box .sp-mb-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sp-font);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -.2px;
}

#my_seo_box .sp-mb-logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--sp-primary);
    border-radius: 6px;
    color: #fff;
    flex-shrink: 0;
}

#my_seo_box .sp-mb-logo-icon .dashicons,
#my_seo_box .sp-mb-logo-icon svg {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* --- Meta box container --- */
.sp-mb {
    font-family: var(--sp-font);
    color: var(--sp-text);
    -webkit-font-smoothing: antialiased;
    position: relative;
}

/* --- Score header (light card) --- */
.sp-mb-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--sp-bg-card);
    border-radius: var(--sp-radius) var(--sp-radius) 0 0;
    margin: -12px -12px 0;
    border-top: 3px solid var(--sp-primary);
    border-bottom: 1px solid var(--sp-border);
    position: relative;
}

.sp-mb-score-ring {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

.sp-mb-score-ring svg {
    width: 52px;
    height: 52px;
    transform: rotate(-90deg);
}

.sp-mb-ring-bg {
    fill: none;
    stroke: var(--sp-border-medium);
    stroke-width: 3;
}

.sp-mb-ring-fg {
    fill: none;
    stroke: var(--sp-primary);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset .6s ease, stroke .3s ease;
}

.sp-mb-score-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--sp-primary);
    transition: color .3s ease;
}

.sp-mb-header-info {
    flex: 1;
    min-width: 0;
}

.sp-mb-score-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--sp-text-muted);
    margin-bottom: 6px;
}

.sp-mb-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.sp-mb-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--sp-radius-full);
    font-size: 11px;
    font-weight: 600;
    background: var(--sp-bg);
    color: var(--sp-text-secondary);
    border: 1px solid var(--sp-border);
    white-space: nowrap;
}

.sp-mb-badge .dashicons,
.sp-mb-badge svg {
    font-size: 13px;
    width: 13px;
    height: 13px;
}

.sp-mb-badge--read { color: var(--sp-success); border-color: rgba(16,185,129,.2); background: rgba(16,185,129,.06); }
.sp-mb-badge--words { color: var(--sp-info); border-color: rgba(59,130,246,.2); background: rgba(59,130,246,.06); }
.sp-mb-badge--kw { color: var(--sp-primary); border-color: rgba(20,110,245,.2); background: rgba(20,110,245,.06); }

/* --- Tab bar --- */
.sp-mb-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--sp-border);
    margin: 0 -12px;
    padding: 0 12px;
    background: var(--sp-bg-card);
    overflow-x: auto;
    scrollbar-width: none;
}
.sp-mb-tabs::-webkit-scrollbar { display: none; }

.sp-mb-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sp-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color var(--sp-transition-fast), border-color var(--sp-transition-fast);
    white-space: nowrap;
    font-family: var(--sp-font);
}

.sp-mb-tab .dashicons,
.sp-mb-tab svg {
    font-size: 15px;
    width: 15px;
    height: 15px;
}

.sp-mb-tab:hover {
    color: var(--sp-text);
}

.sp-mb-tab--active {
    color: var(--sp-primary);
    border-bottom-color: var(--sp-primary);
}

/* --- Tab panels --- */
.sp-mb-panel {
    display: none;
    padding: 18px 8px 8px;
}

.sp-mb-panel--active {
    display: block;
}

/* --- Fields --- */
.sp-mb-field {
    margin-bottom: 16px;
}

.sp-mb-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text);
    margin-bottom: 6px;
}

.sp-mb-label .dashicons,
.sp-mb-label svg {
    font-size: 15px;
    width: 15px;
    height: 15px;
    color: var(--sp-primary);
}

.sp-mb-label-sm {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-secondary);
    margin-bottom: 4px;
}

.sp-mb-input,
.sp-mb-textarea,
.sp-mb-select {
    width: 100%;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    padding: 9px 12px;
    font-size: 13.5px;
    font-family: var(--sp-font);
    background: var(--sp-bg-input);
    color: var(--sp-text);
    transition: border-color var(--sp-transition-fast), box-shadow var(--sp-transition-fast);
    box-sizing: border-box;
}

.sp-mb-input:focus,
.sp-mb-textarea:focus,
.sp-mb-select:focus {
    border-color: var(--sp-primary);
    box-shadow: var(--sp-shadow-focus);
    outline: none;
}

.sp-mb-textarea {
    min-height: 68px;
    resize: vertical;
}

.sp-mb-textarea--sm {
    min-height: 52px;
}

.sp-mb-input-wrap {
    position: relative;
}

.sp-mb-char-count {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--sp-text-muted);
    pointer-events: none;
}

/* character count for textarea — position differently */
.sp-mb-field:has(.sp-mb-textarea) .sp-mb-char-count {
    top: auto;
    bottom: 8px;
    transform: none;
}

.sp-mb-char-bar {
    height: 3px;
    background: var(--sp-border);
    border-radius: 3px;
    margin-top: 4px;
    overflow: hidden;
}

.sp-mb-char-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--sp-border-medium);
    transition: width .2s ease, background .2s ease;
}

/* --- SERP Preview --- */
.sp-mb-serp {
    margin-bottom: 18px;
}

.sp-mb-serp-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--sp-text-muted);
    margin-bottom: 8px;
}

.sp-mb-serp-label .dashicons,
.sp-mb-serp-label svg {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.sp-mb-serp-card {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    padding: 16px 18px;
    max-width: 600px;
    box-shadow: var(--sp-shadow-xs);
}

.sp-mb-serp-breadcrumb {
    font-size: 12px;
    color: #202124;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-mb-serp-title {
    font-size: 18px;
    font-weight: 400;
    color: #1a0dab;
    line-height: 1.3;
    margin-bottom: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sp-mb-serp-desc {
    font-size: 13px;
    color: #4d5156;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Keyword checks pills --- */
.sp-mb-kw-checks {
    margin-top: 8px;
}

.sp-mb-kw-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sp-mb-kw-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: var(--sp-radius-full);
    font-size: 11px;
    font-weight: 600;
}

.sp-mb-kw-pill .dashicons,
.sp-mb-kw-pill svg {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.sp-mb-kw-pill--pass {
    background: var(--sp-success-subtle);
    color: var(--sp-success);
}

.sp-mb-kw-pill--fail {
    background: var(--sp-danger-subtle);
    color: var(--sp-danger);
}

.sp-mb-kw-pill--info {
    background: var(--sp-info-subtle);
    color: var(--sp-info);
}

/* --- Content stats grid --- */
.sp-mb-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.sp-mb-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    text-align: center;
}

.sp-mb-stat-icon {
    color: var(--sp-primary);
}

.sp-mb-stat-icon .dashicons,
.sp-mb-stat-icon svg {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.sp-mb-stat-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--sp-text);
    line-height: 1.2;
}

.sp-mb-stat-lbl {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--sp-text-muted);
}

/* --- Sections --- */
.sp-mb-section {
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
}

.sp-mb-section-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sp-text);
    margin-bottom: 10px;
}

.sp-mb-section-head .dashicons,
.sp-mb-section-head svg {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.sp-mb-section-head--blue .dashicons, .sp-mb-section-head--blue svg { color: var(--sp-primary); }
.sp-mb-section-head--green .dashicons, .sp-mb-section-head--green svg { color: var(--sp-success); }
.sp-mb-section-head--purple .dashicons, .sp-mb-section-head--purple svg { color: var(--sp-ai-purple); }

.sp-mb-hint {
    font-size: 12px;
    color: var(--sp-text-muted);
    margin: 0 0 10px;
    line-height: 1.5;
}

.sp-mb-muted {
    font-size: 13px;
    color: var(--sp-text-muted);
    margin: 0;
}

/* --- SEO Checklist (rendered by analyzer.js) --- */
.sp-mb-checklist .seo-checks-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sp-mb-checklist .seo-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 1px;
    border-radius: var(--sp-radius-sm);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--sp-text-secondary);
    transition: background var(--sp-transition-fast);
}

.sp-mb-checklist .seo-check:hover {
    background: var(--sp-primary-subtle);
}

.sp-mb-checklist .seo-check strong {
    color: var(--sp-text);
    font-weight: 600;
    white-space: nowrap;
}

/* --- Suggestions body --- */
.sp-mb-suggestions-body {
    font-size: 13px;
    line-height: 1.6;
    color: var(--sp-text-secondary);
}

/* --- Internal link list --- */
.sp-mb-link-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-mb-link-list li {
    padding: 6px 0;
    border-bottom: 1px solid var(--sp-border);
    font-size: 13px;
}

.sp-mb-link-list li:last-child {
    border-bottom: none;
}

.sp-mb-link-list a {
    color: var(--sp-primary);
    text-decoration: none;
    font-weight: 500;
}

.sp-mb-link-list a:hover {
    text-decoration: underline;
}

/* --- AI action buttons --- */
.sp-mb-ai-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.sp-mb-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--sp-ai-purple);
    border-radius: var(--sp-radius-sm);
    background: var(--sp-ai-purple-subtle);
    color: var(--sp-ai-purple);
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--sp-font);
    cursor: pointer;
    transition: background var(--sp-transition-fast), box-shadow var(--sp-transition-fast);
}

.sp-mb-ai-btn .dashicons,
.sp-mb-ai-btn svg {
    font-size: 15px;
    width: 15px;
    height: 15px;
}

.sp-mb-ai-btn:hover {
    background: var(--sp-ai-purple);
    color: #fff;
    box-shadow: 0 2px 8px rgba(124, 58, 237, .25);
}

.sp-mb-ai-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.sp-mb-ai-btn--full {
    width: 100%;
    justify-content: center;
}

/* --- AI suggestion cards --- */
.sp-mb-ai-suggestions {
    margin-top: 10px;
}

.sp-mb-ai-sug-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--sp-text-muted);
    margin-bottom: 6px;
}

.sp-mb-ai-sug-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 4px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    cursor: pointer;
    transition: border-color var(--sp-transition-fast), box-shadow var(--sp-transition-fast);
}

.sp-mb-ai-sug-item:hover {
    border-color: var(--sp-ai-purple);
    box-shadow: var(--sp-shadow-xs);
}

.sp-mb-ai-sug-text {
    flex: 1;
    font-size: 13px;
    color: var(--sp-text);
    line-height: 1.4;
}

.sp-mb-ai-sug-meta {
    font-size: 11px;
    color: var(--sp-text-muted);
    white-space: nowrap;
}

.sp-mb-ai-sug-use {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 700;
    color: var(--sp-ai-purple);
    white-space: nowrap;
}

.sp-mb-ai-sug-use .dashicons,
.sp-mb-ai-sug-use svg {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* --- AI Advisor result --- */
.sp-mb-ai-advisor-result {
    margin-top: 12px;
}

.sp-mb-advisor-grid {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.sp-mb-advisor-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px;
    background: var(--sp-ai-purple-subtle);
    border: 1px solid rgba(124, 58, 237, .15);
    border-radius: var(--sp-radius);
    text-align: center;
}

.sp-mb-advisor-card-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--sp-text-muted);
}

.sp-mb-advisor-card-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--sp-ai-purple);
}

.sp-mb-advisor-section {
    margin-bottom: 10px;
}

.sp-mb-advisor-section strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--sp-text);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.sp-mb-advisor-section ul {
    margin: 0;
    padding: 0 0 0 18px;
    font-size: 13px;
    color: var(--sp-text-secondary);
    line-height: 1.6;
}

.sp-mb-advisor-section p {
    font-size: 13px;
    color: var(--sp-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.sp-mb-sem-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.sp-mb-sem-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--sp-radius-full);
    font-size: 11px;
    font-weight: 600;
    background: var(--sp-primary-subtle);
    color: var(--sp-primary);
}

/* --- Additional keywords pills --- */
.sp-mb-kw-pills {
    display: none;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.sp-mb-kw-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--sp-radius-full);
    font-size: 11px;
    font-weight: 600;
    background: rgba(124, 58, 237, .1);
    color: #7C3AED;
}

.sp-mb-kw-pill--warn {
    background: rgba(245, 158, 11, .14);
    color: #B45309;
}

.sp-mb-hint-inline {
    font-weight: 400;
    font-size: 11px;
    color: var(--sp-text-muted, #94A3B8);
    margin-left: 4px;
}

/* --- Media upload field --- */
.sp-mb-media-field {
    display: flex;
    gap: 6px;
}

.sp-mb-media-field .sp-mb-input {
    flex: 1;
}

.sp-mb-media-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    background: var(--sp-bg-card);
    color: var(--sp-text-muted);
    cursor: pointer;
    transition: border-color var(--sp-transition-fast), color var(--sp-transition-fast);
    flex-shrink: 0;
}

.sp-mb-media-btn:hover {
    border-color: var(--sp-primary);
    color: var(--sp-primary);
}

.sp-mb-img-preview {
    margin-top: 8px;
    border-radius: var(--sp-radius-sm);
    overflow: hidden;
    max-width: 200px;
    border: 1px solid var(--sp-border);
}

.sp-mb-img-preview img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Toast notifications --- */
.sp-mb-toast {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-left: 3px solid var(--sp-success);
    border-radius: var(--sp-radius-sm);
    box-shadow: var(--sp-shadow-md);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sp-text);
    z-index: 100;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
    max-width: 320px;
}

.sp-mb-toast .dashicons,
.sp-mb-toast svg {
    font-size: 16px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sp-mb-toast--show {
    opacity: 1;
    transform: translateY(0);
}

/* --- Spin animation --- */
@keyframes sp-mb-spin {
    to { transform: rotate(360deg); }
}

.sp-mb .sp-spin .dashicons,
.sp-mb .sp-spin {
    animation: sp-mb-spin .8s linear infinite;
}

/* --- Responsive --- */
@media (max-width: 782px) {
    .sp-mb-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-mb-ai-actions {
        flex-direction: column;
    }

    .sp-mb-advisor-grid {
        flex-direction: column;
    }

    .sp-mb-header {
        padding: 14px 16px;
    }
}

/* === Legacy Support: Keep old selectors working ====================== */
.my-seo-meta-box { padding: 0; font-family: var(--sp-font); }
.my-seo-score-container { display: none; }
.my-seo-field { margin-bottom: 16px; }
.my-seo-label { display: block; margin-bottom: 6px; }
.my-seo-label strong { font-size: 13px; font-weight: 600; color: var(--sp-text); }
.my-seo-help { display: block; font-size: 11px; color: var(--sp-text-muted); margin-top: 2px; }
.my-seo-input,
.my-seo-textarea,
.my-seo-select {
    width: 100%;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    padding: 9px 12px;
    font-size: 13.5px;
    font-family: var(--sp-font);
    background: var(--sp-bg-input);
    transition: border-color var(--sp-transition-fast), box-shadow var(--sp-transition-fast);
}
.my-seo-input:focus, .my-seo-textarea:focus, .my-seo-select:focus {
    border-color: var(--sp-primary);
    box-shadow: var(--sp-shadow-focus);
    outline: none;
}
.my-seo-textarea { min-height: 68px; resize: vertical; }
.my-seo-title-preview, .my-seo-description-preview { display: none; }
.my-seo-analysis-results { margin-top: 0; }
.my-seo-advanced-settings, .my-seo-social-settings { display: none; }
.my-seo-suggestions { display: none; }
.my-seo-serp-preview { display: none; }

/* === SEO Score Column Badges === */
.sp-seo-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--sp-radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    line-height: 1.4;
}

.sp-seo-badge--good {
    background: var(--sp-green-light);
    color: var(--sp-green);
}

.sp-seo-badge--ok {
    background: var(--sp-amber-light);
    color: var(--sp-amber);
}

.sp-seo-badge--low {
    background: var(--sp-red-light);
    color: var(--sp-red);
}

/* === Content Insights (Mini Cards) === */
.sp-cards--mini {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.sp-cards--mini .sp-card {
    padding: 16px 18px;
    min-height: auto;
    gap: 13px;
}

/* Mini cards need a smaller icon tile than the big hero stat cards,
   otherwise a 52px icon dwarfs the compact text. */
.sp-cards--mini .sp-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.sp-cards--mini .sp-card-icon svg {
    width: 18px;
    height: 18px;
}

.sp-cards--mini .sp-card-number {
    font-size: 22px;
}

.sp-cards--mini .sp-card-title {
    font-size: 11px;
}

/* All Content-Insight cards share the same clean white chrome; meaning is
   carried by the icon colour only (no per-card background / border accents).
   Numbers stay the standard strong-dark on every card for a consistent set. */

/* === Internal Link Suggestions (in meta box) === */
.my-seo-link-suggestions {
    margin-top: 18px;
    padding: 16px 18px;
    background: var(--sp-green-light);
    border: 1px solid rgba(34, 197, 94, .2);
    border-radius: var(--sp-radius);
}

.my-seo-link-suggestions h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-green);
    margin: 0 0 10px;
}

.my-seo-link-suggestions h4 .dashicons,
.my-seo-link-suggestions h4 svg {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: text-bottom;
}

.my-seo-link-suggestions ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.my-seo-link-suggestions li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(34, 197, 94, .1);
    font-size: 14px;
}

.my-seo-link-suggestions li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.my-seo-link-suggestions a {
    color: var(--sp-primary);
    text-decoration: none;
    font-weight: 500;
}

.my-seo-link-suggestions a:hover {
    text-decoration: underline;
}

.my-seo-link-suggestions small {
    color: var(--sp-text-muted);
    font-size: 11px;
}

/* === 404 Monitor Section === */
.sp-404-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.sp-404-stat {
    background: var(--sp-dark);
    padding: 20px;
    border-radius: var(--sp-radius);
    text-align: center;
    color: #fff;
}

.sp-404-stat-number {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: var(--sp-primary);
    line-height: 1.2;
    letter-spacing: -.3px;
}

.sp-404-stat-label {
    font-size: 12px;
    color: var(--sp-text-on-dark-muted);
    text-transform: uppercase;
    letter-spacing: .6px;
    font-weight: 500;
    margin-top: 4px;
}

.sp-404-table {
    width: 100%;
    border-collapse: collapse;
}

.sp-404-table th,
.sp-404-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--sp-border-light);
    font-size: 14px;
}

.sp-404-table th {
    font-weight: 600;
    color: var(--sp-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.sp-404-table .sp-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--sp-radius-pill);
    font-size: 11px;
    font-weight: 600;
    background: var(--sp-red-light);
    color: var(--sp-red);
}

.sp-404-actions {
    display: flex;
    gap: 6px;
}

.sp-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: var(--sp-radius);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--sp-border);
    background: var(--sp-surface);
    color: var(--sp-text);
    transition: all var(--sp-transition);
    text-decoration: none;
    font-family: var(--sp-font);
}

.sp-btn-sm:hover {
    border-color: var(--sp-primary);
    color: var(--sp-primary);
    background: var(--sp-primary-light);
}

.sp-btn-sm--danger:hover {
    border-color: var(--sp-red);
    color: var(--sp-red);
    background: var(--sp-red-light);
}

.sp-btn-sm .dashicons,
.sp-btn-sm svg {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* === Image SEO Section === */
/* ═══════════════════════════════════════════════════════════════
   IMAGE SEO PAGE — imgseo-* component system
   ═══════════════════════════════════════════════════════════════ */

/* ── Rules bar ── */
.imgseo-rules-bar {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 18px 20px;
    background: var(--sp-light-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-md);
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .imgseo-rules-bar {
        grid-template-columns: 1fr;
    }
}

.imgseo-rules-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.imgseo-rules-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--sp-font);
}

.imgseo-rules-field label svg {
    color: var(--sp-text-muted);
    flex-shrink: 0;
}

.imgseo-rules-field input[type="text"] {
    border: 1.5px solid var(--sp-border-medium);
    border-radius: var(--sp-radius);
    padding: 8px 12px;
    font-size: 13px;
    font-family: var(--sp-font);
    color: var(--sp-text);
    background: var(--sp-surface);
    width: 100%;
    height: auto;
    transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
    box-shadow: var(--sp-shadow-xs);
}

.imgseo-rules-field input[type="text"]:focus {
    border-color: var(--sp-primary);
    box-shadow: var(--sp-shadow-focus);
    outline: none;
}

.imgseo-hint {
    font-size: 11px;
    color: var(--sp-text-muted);
    font-family: var(--sp-font);
    line-height: 1.4;
}

.imgseo-hint code {
    background: var(--sp-border);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 10px;
}

.imgseo-rules-action {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Offset by label height (12px font + 5px gap = ~22px) so the button
       aligns with the input row rather than the top of the column. */
    padding-top: 22px;
}

.imgseo-saved-msg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-green);
    font-family: var(--sp-font);
}

/* ── Shared button skin ── */
.imgseo-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: var(--sp-radius-full);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--sp-font);
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all var(--sp-transition);
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
}

.imgseo-btn--primary {
    background: var(--sp-primary);
    color: #fff;
    border-color: var(--sp-primary);
    box-shadow: 0 2px 8px rgba(20, 110, 245, .22);
}

.imgseo-btn--primary:hover,
.imgseo-btn--primary:focus {
    background: var(--sp-primary-hover);
    border-color: var(--sp-primary-hover);
    box-shadow: 0 4px 14px rgba(20, 110, 245, .32);
    transform: translateY(-1px);
    color: #fff;
}

.imgseo-btn--secondary {
    background: var(--sp-surface);
    color: var(--sp-text);
    border-color: var(--sp-border-medium);
    box-shadow: var(--sp-shadow-xs);
}

.imgseo-btn--secondary:hover,
.imgseo-btn--secondary:focus {
    border-color: var(--sp-primary);
    color: var(--sp-primary);
    box-shadow: var(--sp-shadow-sm);
}

.imgseo-btn--ghost {
    background: transparent;
    color: var(--sp-text-muted);
    border-color: var(--sp-border-medium);
}

.imgseo-btn--ghost:hover {
    border-color: var(--sp-warning);
    color: var(--sp-warning);
}

.imgseo-btn--ai {
    background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-purple) 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(124, 58, 237, .25);
}

.imgseo-btn--ai:hover,
.imgseo-btn--ai:focus {
    box-shadow: 0 4px 18px rgba(124, 58, 237, .38);
    transform: translateY(-1px);
    filter: brightness(1.06);
    color: #fff;
}

.imgseo-btn--fix {
    background: var(--sp-green);
    color: #fff;
    border-color: var(--sp-green);
    box-shadow: 0 2px 8px rgba(16, 185, 129, .22);
}

.imgseo-btn--fix:hover {
    background: #0da271;
    border-color: #0da271;
    box-shadow: 0 4px 14px rgba(16, 185, 129, .32);
    transform: translateY(-1px);
    color: #fff;
}

.imgseo-btn--save {
    background: var(--sp-surface);
    color: var(--sp-text);
    border-color: var(--sp-border-medium);
    box-shadow: var(--sp-shadow-xs);
    padding: 7px 14px;
}

.imgseo-btn--save:hover {
    border-color: var(--sp-primary);
    color: var(--sp-primary);
}

.imgseo-btn:disabled,
.imgseo-btn[disabled] {
    opacity: .55;
    pointer-events: none;
    transform: none !important;
}

/* ── Toolbar ── */
.imgseo-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.imgseo-toolbar-left,
.imgseo-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Progress bar ── */
.imgseo-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--sp-light-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
}

.imgseo-progress-track {
    flex: 1;
    height: 6px;
    background: var(--sp-border-medium);
    border-radius: var(--sp-radius-full);
    overflow: hidden;
}

.imgseo-progress-fill {
    height: 100%;
    border-radius: var(--sp-radius-full);
    background: linear-gradient(90deg, var(--sp-primary), #6BA3F7);
    transition: width .35s ease;
}

.imgseo-progress-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--sp-text-muted);
    min-width: 36px;
    text-align: right;
    font-family: var(--sp-font);
}

/* ── Stat bar ── */
.imgseo-stat-bar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: var(--sp-info-subtle);
    border: 1px solid rgba(59, 130, 246, .18);
    border-radius: var(--sp-radius-full);
    font-size: 13px;
    color: var(--sp-info);
    font-family: var(--sp-font);
    font-weight: 500;
    margin-bottom: 12px;
}

.imgseo-stat-bar strong {
    font-weight: 700;
    font-size: 14px;
}

/* ── Bulk AI progress ── */
.imgseo-bulk-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: var(--sp-purple-light);
    border: 1px solid rgba(124, 58, 237, .18);
    border-radius: var(--sp-radius);
}

.imgseo-bulk-progress-bar {
    flex: 1;
    height: 5px;
    background: rgba(124, 58, 237, .15);
    border-radius: var(--sp-radius-full);
    overflow: hidden;
}

.imgseo-bulk-progress-fill {
    height: 100%;
    border-radius: var(--sp-radius-full);
    background: linear-gradient(90deg, var(--sp-primary), var(--sp-purple));
    transition: width .3s ease;
}

.imgseo-bulk-progress-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-purple);
    font-family: var(--sp-font);
    white-space: nowrap;
}

/* ── Results header / select-all ── */
.imgseo-results-wrap {
    margin-top: 4px;
}

.imgseo-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px 8px 10px;
    background: var(--sp-light-card);
    border: 1px solid var(--sp-border);
    border-bottom: none;
    border-radius: var(--sp-radius) var(--sp-radius) 0 0;
}

.imgseo-select-all-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-muted);
    cursor: pointer;
    user-select: none;
    font-family: var(--sp-font);
}

.imgseo-table-scroll {
    max-height: 440px;
    overflow-y: auto;
    border: 1px solid var(--sp-border);
    border-radius: 0 0 var(--sp-radius) var(--sp-radius);
    box-shadow: var(--sp-shadow-xs);
}

/* ── Results table ── */
.imgseo-table {
    width: 100%;
    border-collapse: collapse;
}

.imgseo-table th {
    background: var(--sp-light-card);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--sp-text-muted);
    padding: 10px 12px;
    border-bottom: 1px solid var(--sp-border) !important;
    font-family: var(--sp-font);
    position: sticky;
    top: 0;
    z-index: 1;
}

.imgseo-table td {
    padding: 10px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--sp-border) !important;
    font-family: var(--sp-font);
    vertical-align: middle;
}

.imgseo-table tbody tr:hover td {
    background: var(--sp-primary-subtle) !important;
}

.imgseo-table .col-check { width: 36px; }
.imgseo-table .col-image { width: 60px; }
.imgseo-table .col-filename { width: 200px; }
.imgseo-table .col-action { width: 76px; text-align: center; }

.imgseo-thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--sp-radius-sm);
    object-fit: cover;
    border: 1px solid var(--sp-border);
    display: block;
}

.imgseo-alt-input {
    width: 100%;
    border: 1.5px solid var(--sp-border-medium) !important;
    border-radius: var(--sp-radius-sm) !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    font-family: var(--sp-font) !important;
    color: var(--sp-text) !important;
    background: var(--sp-surface) !important;
    height: auto !important;
    transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
}

.imgseo-alt-input:focus {
    border-color: var(--sp-primary) !important;
    box-shadow: var(--sp-shadow-focus) !important;
    outline: none !important;
}

.imgseo-post-label {
    font-size: 11px;
    color: var(--sp-text-muted);
}

/* ── Per-row Fix button ── */
.imgseo-fix-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--sp-radius-full);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--sp-font);
    cursor: pointer;
    border: 1.5px solid var(--sp-primary);
    background: transparent;
    color: var(--sp-primary);
    transition: all var(--sp-transition);
    white-space: nowrap;
}

.imgseo-fix-btn:hover {
    background: var(--sp-primary);
    color: #fff;
}

.imgseo-fix-btn:disabled {
    opacity: .5;
    pointer-events: none;
}

.imgseo-row--done td {
    opacity: .4;
}

/* Legacy sp-image-* kept for potential external references */
.sp-image-stats { display: none; }
.sp-image-stat  { display: none; }

/* === Empty State === */
.sp-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--sp-text-muted);
}

.sp-empty-state .dashicons,
.sp-empty-state svg {
    font-size: 56px;
    width: 56px;
    height: 56px;
    color: var(--sp-border);
    margin-bottom: 16px;
}

.sp-empty-state p {
    font-size: 15px;
    margin: 0;
}

/* === Export / Import === */
.sp-wrap .sp-grid-2 h3 {
    margin-top: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--sp-text);
}

.sp-wrap #sp-io-status span {
    font-size: 14px;
    font-weight: 500;
}

/* General button overrides */
.sp-wrap .button-secondary,
.sp-wrap .button {
    border-radius: var(--sp-radius);
    font-family: var(--sp-font);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 18px;
    height: auto;
    line-height: 1.5;
    transition: all var(--sp-transition);
}

.sp-wrap .button-secondary:hover,
.sp-wrap .button:hover {
    border-color: var(--sp-primary);
    color: var(--sp-primary);
}

/* === Responsive === */
@media (max-width: 1200px) {
    .sp-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 960px) {
    .sp-grid-2 {
        grid-template-columns: 1fr;
    }

    .sp-hero {
        flex-direction: column;
        text-align: center;
        padding: 32px 28px;
    }

    .sp-hero-metrics {
        justify-content: center;
    }

    .sp-cards--mini {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-404-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-image-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 782px) {
    .sp-topbar {
        top: 46px;
    }

    .sp-topbar-brand {
        padding: 10px 24px;
    }

    .sp-tabs {
        padding: 0 16px;
    }

    .sp-tab {
        padding: 9px 12px;
        font-size: 12px;
    }

    .sp-tab-icon {
        font-size: 13px;
    }

    .sp-cards {
        grid-template-columns: 1fr;
    }

    .sp-cards--mini {
        grid-template-columns: 1fr;
    }

    .sp-social-grid {
        grid-template-columns: 1fr;
    }

    .serp-preview-card {
        max-width: 100%;
    }

    .sp-404-stats,
    .sp-image-stats {
        grid-template-columns: 1fr;
    }

    .sp-wrap {
        padding: 0 16px 36px;
    }
}

/* === Scrollbar refinements === */
.sp-wrap ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.sp-wrap ::-webkit-scrollbar-track {
    background: transparent;
}

.sp-wrap ::-webkit-scrollbar-thumb {
    background: var(--sp-border);
    border-radius: 3px;
}

.sp-wrap ::-webkit-scrollbar-thumb:hover {
    background: var(--sp-text-muted);
}

/* === WP Admin overrides within our wrap === */
.sp-wrap h1.wp-heading-inline {
    display: none;
}

.sp-wrap .form-table {
    border-collapse: collapse;
}

/* ==========================================================================
   DESIGN ENHANCEMENT — Polished Analysis & Meta-Box UI
   ========================================================================== */

/* --- SEO Checks List (rendered by analyzer.js) --- */
.seo-checks-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.seo-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 2px;
    border-radius: var(--sp-radius);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sp-text-secondary);
    transition: background var(--sp-transition);
}

.seo-check:hover {
    background: var(--sp-light-card);
}

.seo-check strong {
    color: var(--sp-text);
    font-weight: 600;
    white-space: nowrap;
    margin-right: 2px;
}

/* Status dot icons */
.msp-status-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.msp-icon-good {
    background: var(--sp-green);
    box-shadow: 0 0 0 3px var(--sp-green-light);
}

.msp-icon-ok {
    background: var(--sp-amber);
    box-shadow: 0 0 0 3px var(--sp-amber-light);
}

.msp-icon-bad {
    background: var(--sp-red);
    box-shadow: 0 0 0 3px var(--sp-red-light);
}

.msp-priority-icon {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: 1px;
}

.msp-priority-high {
    background: var(--sp-red);
}

.msp-priority-medium {
    background: var(--sp-amber);
}

.msp-priority-low {
    background: var(--sp-green);
}

/* Suggestions block inside results */
.seo-suggestions {
    margin-top: 16px;
    padding: 16px 18px;
    background: var(--sp-primary-light);
    border-radius: var(--sp-radius);
    border: 1px solid rgba(20, 110, 245, .12);
}

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

.seo-suggestions ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.seo-suggestions li {
    padding: 6px 0;
    font-size: 13.5px;
    color: var(--sp-text-secondary);
    border-bottom: 1px solid rgba(20, 110, 245, .06);
    line-height: 1.5;
}

.seo-suggestions li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* --- Keyword Quick Info (analyzer.js #seo-keyword-quick) --- */
#seo-keyword-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 10px 14px;
    background: var(--sp-light-card);
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-border-light);
    margin-top: 8px;
}

/* --- Progress Bar (generic component) --- */
/* Legacy sp-progress-* kept for any page that still uses them (404 monitor etc.) */
.sp-progress-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--sp-border-medium);
    overflow: hidden;
    flex: 1;
}

.sp-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--sp-primary), #6BA3F7);
    transition: width .3s ease;
}

.sp-progress-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--sp-text-muted);
    min-width: 32px;
    text-align: right;
}

/* Legacy sp-image-toolbar — no longer used by Image SEO page */
.sp-image-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* --- Meta Box Collapsible Section Toggle --- */
.my-seo-advanced-settings h4,
.my-seo-social-settings h4 {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color var(--sp-transition);
}

.my-seo-advanced-settings h4:hover,
.my-seo-social-settings h4:hover {
    color: var(--sp-primary);
}

/* --- Consistent Focus Ring --- */
.sp-wrap :focus-visible,
.my-seo-meta-box :focus-visible {
    outline: 2px solid var(--sp-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- Loading State Shimmer on Analysis --- */
#seo-analysis-results.loading {
    position: relative;
    pointer-events: none;
    opacity: .5;
}

#seo-analysis-results.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 30%, var(--sp-primary-light) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease infinite;
    border-radius: var(--sp-radius);
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* --- Tooltip helper (.sp-tooltip) --- */
.sp-tooltip {
    position: relative;
    cursor: help;
}

.sp-tooltip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(.92);
    padding: 7px 14px;
    background: var(--sp-dark);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
    letter-spacing: .01em;
}

.sp-tooltip:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* --- Badge improvements --- */
.sp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--sp-radius-pill);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--sp-font);
}

/* --- Print stylesheet --- */
@media print {

    .sp-topbar,
    .sp-save-bar,
    .my-seo-loading-overlay,
    .my-seo-progressbar,
    .sp-action-btn,
    .sp-btn-sm {
        display: none !important;
    }

    .sp-wrap {
        padding: 0;
    }

    .sp-panel {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* ==========================================================================
   FIX: Select Arrow Positioning & Styling
   ========================================================================== */
.my-seo-root select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px;
    padding-right: 32px !important;
    /* Ensure text doesn't overlap arrow */
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    height: 36px;
    line-height: 1.5;
    color: var(--sp-text);
    font-size: 13.5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    vertical-align: middle;
}

.my-seo-root select:focus {
    border-color: var(--sp-primary);
    box-shadow: 0 0 0 3px var(--sp-primary-light);
    outline: none;
}

/* ============================================================
   APPLICATION SHELL
   ============================================================ */

#waiseo-app.waiseo-shell {
    margin: 0;
    padding: 0;
    font-family: var(--sp-font);
    background: var(--sp-bg);
    min-height: calc(100vh - 32px);
    color: var(--sp-text);
    transition: background var(--sp-transition-base), color var(--sp-transition-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   HEADER
   ============================================================ */

.waiseo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-space-4);
    background: var(--sp-bg-nav);
    padding: 0 var(--sp-space-6);
    height: 64px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* full border for floating look */
    border-radius: var(--sp-radius-lg);
    /* rounded edges for entire menu */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    /* floating shadow */
    position: sticky;
    top: 32px;
    margin: 24px 0 36px 0;
    /* no negative margin; fits within elements */
    z-index: var(--sp-z-dropdown);
}

@media (max-width: 782px) {
    .waiseo-header {
        top: 46px;
    }
}

.waiseo-header__brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-right: var(--sp-space-4);
}

/* ============================================================
   LOGO — dual SVG with automatic light/dark switching
   Nav bar height: 56px. Logo height: 40px.
   8px padding top and bottom inside the nav bar.
   Width is always auto — driven by the SVG aspect ratio.
   ============================================================ */

.waiseo-logo-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
    /* removes phantom inline-block spacing gap */
    margin-right: 8px;
    /* breathing room between logo and nav tabs */
    overflow: visible;
    /* CRITICAL: never hidden — clips the logo */
}

.waiseo-logo {
    display: block;
    height: 40px;
    /* 40px fills 56px nav with 8px padding each side */
    width: auto;
    /* preserves SVG aspect ratio — never stretch */
    max-width: 200px;
    /* safety cap against runaway width */
    min-width: 80px;
    /* never collapses below readable size */
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    image-rendering: -webkit-optimize-contrast;
    /* crisp SVG on retina */
    image-rendering: crisp-edges;
}

/* ── Visibility rules ───────────────────────────────────────
   The nav background is ALWAYS dark — in both light mode and
   dark mode. So logo_light.svg (--for-dark class) is always
   shown. logo_dark.svg (--for-light class) is hidden in the
   nav and reserved for placement on light surfaces elsewhere.
   ────────────────────────────────────────────────────────── */

.waiseo-logo--for-dark {
    display: block;
}

.waiseo-logo--for-light {
    display: none;
}

[data-theme="light"] .waiseo-logo--for-dark {
    display: block;
}

[data-theme="light"] .waiseo-logo--for-light {
    display: none;
}

[data-theme="dark"] .waiseo-logo--for-dark {
    display: block;
}

[data-theme="dark"] .waiseo-logo--for-light {
    display: none;
}

/* ── Utility for light backgrounds ─────────────────────────
   When placing the logo on a white or light card background,
   add class "waiseo-logo-wrap--on-light" to the wrapper.
   The dark logo will automatically be shown instead.
   ────────────────────────────────────────────────────────── */
.waiseo-logo-wrap--on-light .waiseo-logo--for-dark {
    display: none;
}

.waiseo-logo-wrap--on-light .waiseo-logo--for-light {
    display: block;
}

.waiseo-header__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-space-3);
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.waiseo-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 100%;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}

.waiseo-nav::-webkit-scrollbar {
    display: none;
}

.waiseo-nav__item {
    display: flex;
    align-items: center;
    gap: var(--sp-space-2);
    padding: 10px 20px;
    border-radius: 100px;
    color: var(--sp-text-on-dark-muted);
    font-size: var(--sp-text-sm);
    font-weight: var(--sp-font-medium);
    font-family: var(--sp-font);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: transparent;
    transition: color var(--sp-transition-fast), background var(--sp-transition-fast);
    white-space: nowrap;
}

.waiseo-nav__item:hover {
    color: var(--sp-text-on-dark);
    background: var(--sp-bg-nav-item-hover);
    text-decoration: none;
}

.waiseo-nav__item:visited {
    color: var(--sp-text-on-dark-muted);
    text-decoration: none;
}

.waiseo-nav__item:active,
.waiseo-nav__item:focus {
    color: var(--sp-text-on-dark);
    text-decoration: none;
    outline: none;
}

.waiseo-nav__item.active,
.waiseo-nav__item[aria-current="page"] {
    color: #ffffff;
    background: var(--sp-bg-nav-item-active);
}

.waiseo-nav__item.active:visited,
.waiseo-nav__item[aria-current="page"]:visited,
.waiseo-nav__item.active:active,
.waiseo-nav__item[aria-current="page"]:active,
.waiseo-nav__item.active:focus,
.waiseo-nav__item[aria-current="page"]:focus {
    color: #ffffff;
    text-decoration: none;
    outline: none;
}

.waiseo-nav__item::after {
    display: none !important;
}

.waiseo-nav__item svg {
    width: 15px;
    height: 15px;
    opacity: 0.7;
    flex-shrink: 0;
    transition: opacity var(--sp-transition-fast);
}

.waiseo-nav__item:hover svg,
.waiseo-nav__item.active svg {
    opacity: 1;
}

/* ============================================================
   THEME TOGGLE
   ============================================================ */

.waiseo-theme-toggle {
    width: 34px;
    height: 34px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: var(--sp-text-on-dark-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--sp-transition-fast);
    padding: 0;
}

.waiseo-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.waiseo-theme-toggle__icon {
    display: flex;
    align-items: center;
}

.waiseo-theme-toggle__icon--sun {
    display: none;
}

.waiseo-theme-toggle__icon--moon {
    display: flex;
}

[data-theme="dark"] .waiseo-theme-toggle__icon--sun {
    display: flex;
}

[data-theme="dark"] .waiseo-theme-toggle__icon--moon {
    display: none;
}

/* ============================================================
   PLAN BADGE (header)
   ============================================================ */

.waiseo-plan-badge {
    font-size: var(--sp-text-xs);
    font-weight: var(--sp-font-semibold);
    font-family: var(--sp-font);
    padding: 3px 10px;
    border-radius: var(--sp-radius-full);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.waiseo-plan-badge--none,
.waiseo-plan-none {
    background: rgba(255, 255, 255, 0.1);
    color: var(--sp-text-on-dark-muted);
}

.waiseo-plan-badge--basic,
.waiseo-plan-basic {
    background: rgba(20, 110, 245, 0.2);
    color: #6ba3f7;
    border: 1px solid rgba(20, 110, 245, 0.3);
}

.waiseo-plan-badge--pro,
.waiseo-plan-pro {
    background: rgba(124, 58, 237, 0.2);
    color: #a78bfa;
    border: 1px solid rgba(124, 58, 237, 0.3);
}

.waiseo-plan-badge--agency,
.waiseo-plan-agency {
    background: linear-gradient(135deg, #146EF5, #7C3AED);
    color: #ffffff;
    border: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* ============================================================
   PAGE CONTENT AREA
   ============================================================ */

.waiseo-content {
    padding: var(--sp-space-8);
    max-width: 1280px;
    margin: 0 auto;
}

/* ============================================================
   PAGE HEADER
   ============================================================ */

.waiseo-page-header {
    margin-bottom: var(--sp-space-8);
}

.waiseo-page-title {
    font-size: var(--sp-text-2xl);
    font-weight: var(--sp-font-bold);
    font-family: var(--sp-font);
    color: var(--sp-text);
    margin: 0 0 var(--sp-space-2) 0;
    letter-spacing: -0.02em;
    line-height: var(--sp-line-height-tight);
}

.waiseo-page-subtitle {
    font-size: var(--sp-text-base);
    color: var(--sp-text-secondary);
    margin: 0;
    font-family: var(--sp-font);
    line-height: var(--sp-line-height);
}

/* ============================================================
   CARD SYSTEM
   ============================================================ */

.waiseo-card {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-lg);
    padding: var(--sp-space-6);
    box-shadow: var(--sp-shadow-sm);
    transition: background var(--sp-transition-base), border-color var(--sp-transition-base);
}

.waiseo-card:hover {
    border-color: var(--sp-border-medium);
}

.waiseo-card--flat {
    box-shadow: none;
    border-color: var(--sp-border);
}

.waiseo-card--elevated {
    box-shadow: var(--sp-shadow-md);
}

.waiseo-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-space-5);
    padding-bottom: var(--sp-space-4);
    border-bottom: 1px solid var(--sp-border);
}

.waiseo-card__title {
    font-size: var(--sp-text-md);
    font-weight: var(--sp-font-semibold);
    color: var(--sp-text);
    font-family: var(--sp-font);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-space-2);
}

.waiseo-card__title svg {
    width: 18px;
    height: 18px;
    color: var(--sp-primary);
}

/* ============================================================
   STAT CARDS
   ============================================================ */

.waiseo-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-space-4);
    margin-bottom: var(--sp-space-6);
}

@media (max-width: 1100px) {
    .waiseo-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .waiseo-stat-grid {
        grid-template-columns: 1fr;
    }
}

.waiseo-stat-card {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-lg);
    padding: var(--sp-space-5) var(--sp-space-6);
    display: flex;
    align-items: center;
    gap: var(--sp-space-4);
    transition: all var(--sp-transition-fast);
    box-shadow: var(--sp-shadow-sm);
}

.waiseo-stat-card:hover {
    border-color: var(--sp-border-medium);
    box-shadow: var(--sp-shadow-md);
    transform: translateY(-1px);
}

.waiseo-stat-card__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--sp-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.waiseo-stat-card__icon--blue {
    background: var(--sp-primary-subtle);
    color: var(--sp-primary);
}

.waiseo-stat-card__icon--purple {
    background: var(--sp-ai-purple-subtle);
    color: var(--sp-ai-purple);
}

.waiseo-stat-card__icon--green {
    background: var(--sp-success-subtle);
    color: var(--sp-success);
}

.waiseo-stat-card__icon--amber {
    background: var(--sp-warning-subtle);
    color: var(--sp-warning);
}

.waiseo-stat-card__body {
    flex: 1;
    min-width: 0;
}

.waiseo-stat-card__value {
    font-size: var(--sp-text-2xl);
    font-weight: var(--sp-font-bold);
    color: var(--sp-text);
    font-family: var(--sp-font);
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}

.waiseo-stat-card__label {
    font-size: var(--sp-text-xs);
    font-weight: var(--sp-font-semibold);
    color: var(--sp-text-muted);
    font-family: var(--sp-font);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ============================================================
   BUTTON SYSTEM
   ============================================================ */

.waiseo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-space-2);
    font-family: var(--sp-font);
    font-size: var(--sp-text-sm);
    font-weight: var(--sp-font-semibold);
    line-height: 1;
    border-radius: var(--sp-radius);
    padding: 9px 18px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all var(--sp-transition-fast);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.waiseo-btn:disabled,
.waiseo-btn.is-loading {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.waiseo-btn--primary,
.waiseo-btn-primary {
    background: var(--sp-primary);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(20, 110, 245, 0.3);
}

.waiseo-btn--primary:hover,
.waiseo-btn-primary:hover {
    background: var(--sp-primary-hover);
    box-shadow: 0 4px 12px rgba(20, 110, 245, 0.35);
    transform: translateY(-1px);
    color: #ffffff;
    text-decoration: none;
}

.waiseo-btn--ai {
    background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-ai-purple) 100%);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(124, 58, 237, 0.25);
}

.waiseo-btn--ai:hover {
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
    transform: translateY(-1px);
    color: #ffffff;
    text-decoration: none;
    filter: brightness(1.05);
}

.waiseo-btn--secondary {
    background: var(--sp-primary-subtle);
    color: var(--sp-primary);
    border-color: transparent;
}

.waiseo-btn--secondary:hover {
    background: var(--sp-primary-subtle-hover);
    color: var(--sp-primary);
    text-decoration: none;
}

.waiseo-btn--ghost {
    background: transparent;
    color: var(--sp-text-secondary);
    border-color: var(--sp-border-medium);
}

.waiseo-btn--ghost:hover {
    background: var(--sp-bg-card-hover);
    border-color: var(--sp-border-strong);
    color: var(--sp-text);
    text-decoration: none;
}

.waiseo-btn--danger,
.waiseo-btn-danger {
    background: var(--sp-danger-subtle);
    color: var(--sp-danger);
    border-color: rgba(239, 68, 68, 0.2);
}

.waiseo-btn--danger:hover,
.waiseo-btn-danger:hover {
    background: var(--sp-danger);
    color: #ffffff;
    border-color: transparent;
    text-decoration: none;
}

.waiseo-btn--sm,
.waiseo-btn-small {
    font-size: var(--sp-text-xs);
    padding: 6px 12px;
    border-radius: var(--sp-radius-sm);
}

.waiseo-btn--lg,
.waiseo-btn-large {
    font-size: var(--sp-text-base);
    padding: 12px 24px;
    border-radius: var(--sp-radius-md);
}

.waiseo-btn--icon {
    padding: 8px;
    border-radius: var(--sp-radius-sm);
    width: 34px;
    height: 34px;
}

.waiseo-btn.is-loading::after {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: waiseo-spin 0.6s linear infinite;
    margin-left: var(--sp-space-2);
}

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

/* ============================================================
   FORM ELEMENTS
   ============================================================ */

.waiseo-field {
    margin-bottom: var(--sp-space-5);
}

.waiseo-label {
    display: block;
    font-size: var(--sp-text-sm);
    font-weight: var(--sp-font-semibold);
    color: var(--sp-text);
    font-family: var(--sp-font);
    margin-bottom: var(--sp-space-2);
}

.waiseo-label--required::after {
    content: ' *';
    color: var(--sp-danger);
}

.waiseo-input,
.waiseo-select,
.waiseo-textarea {
    width: 100%;
    background: var(--sp-bg-input);
    border: 1.5px solid var(--sp-border-medium);
    border-radius: var(--sp-radius);
    padding: 9px 14px;
    font-size: var(--sp-text-sm);
    font-family: var(--sp-font);
    color: var(--sp-text);
    transition: border-color var(--sp-transition-fast), box-shadow var(--sp-transition-fast);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    height: auto;
    line-height: normal;
}

.waiseo-input::placeholder,
.waiseo-textarea::placeholder {
    color: var(--sp-text-placeholder);
}

.waiseo-input:hover,
.waiseo-select:hover,
.waiseo-textarea:hover {
    border-color: var(--sp-border-strong);
}

.waiseo-input:focus,
.waiseo-select:focus,
.waiseo-textarea:focus {
    border-color: var(--sp-border-focus);
    box-shadow: var(--sp-shadow-focus);
}

.waiseo-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: var(--sp-line-height);
}

.waiseo-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

.waiseo-field-hint {
    font-size: var(--sp-text-xs);
    color: var(--sp-text-muted);
    margin-top: var(--sp-space-1);
    font-family: var(--sp-font);
    line-height: var(--sp-line-height);
}

.waiseo-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-space-3);
    cursor: pointer;
}

.waiseo-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.waiseo-toggle__track {
    width: 44px;
    height: 24px;
    background: var(--sp-border-strong);
    border-radius: var(--sp-radius-full);
    transition: background var(--sp-transition-fast);
    flex-shrink: 0;
    position: relative;
}

.waiseo-toggle__track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: transform var(--sp-transition-fast);
    box-shadow: var(--sp-shadow-xs);
}

.waiseo-toggle input:checked+.waiseo-toggle__track {
    background: var(--sp-primary);
}

.waiseo-toggle input:checked+.waiseo-toggle__track::after {
    transform: translateX(20px);
}

.waiseo-toggle__label {
    font-size: var(--sp-text-sm);
    font-family: var(--sp-font);
    color: var(--sp-text);
    font-weight: var(--sp-font-medium);
}

/* ============================================================
   TABLE SYSTEM
   ============================================================ */

.waiseo-table-wrapper {
    overflow-x: auto;
    border-radius: var(--sp-radius-lg);
    border: 1px solid var(--sp-border);
    background: var(--sp-bg-card);
}

.waiseo-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sp-font);
    font-size: var(--sp-text-sm);
}

.waiseo-table thead {
    background: var(--sp-bg);
    border-bottom: 1px solid var(--sp-border-medium);
}

.waiseo-table th {
    padding: 12px var(--sp-space-4);
    text-align: left;
    font-size: var(--sp-text-xs);
    font-weight: var(--sp-font-semibold);
    color: var(--sp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.waiseo-table td {
    padding: 14px var(--sp-space-4);
    color: var(--sp-text);
    border-bottom: 1px solid var(--sp-border);
    vertical-align: middle;
}

.waiseo-table tr:last-child td {
    border-bottom: none;
}

.waiseo-table tbody tr {
    transition: background var(--sp-transition-fast);
}

.waiseo-table tbody tr:hover {
    background: var(--sp-bg-card-hover);
}

.waiseo-table .waiseo-table__url {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: var(--sp-text-xs);
    color: var(--sp-text-secondary);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.waiseo-table__img-col {
    width: 70px;
    min-width: 70px;
}

.waiseo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: var(--sp-radius-full);
    font-size: var(--sp-text-xs);
    font-weight: var(--sp-font-semibold);
    font-family: var(--sp-font);
}

.waiseo-badge--count {
    background: var(--sp-primary-subtle);
    color: var(--sp-primary);
}

.waiseo-badge--danger {
    background: var(--sp-danger-subtle);
    color: var(--sp-danger);
}

.waiseo-table__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-space-2);
    white-space: nowrap;
}

.waiseo-table__redirect-input {
    width: 160px;
    font-size: var(--sp-text-xs);
    padding: 5px 10px;
    border-radius: var(--sp-radius-sm);
    border: 1.5px solid var(--sp-border-medium);
    background: var(--sp-bg-input);
    color: var(--sp-text);
    font-family: var(--sp-font);
}

.waiseo-table__redirect-input:focus {
    border-color: var(--sp-border-focus);
    outline: none;
}

/* ============================================================
   ALERTS & NOTICES
   ============================================================ */

.waiseo-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-space-3);
    padding: var(--sp-space-4) var(--sp-space-5);
    border-radius: var(--sp-radius-md);
    font-family: var(--sp-font);
    font-size: var(--sp-text-sm);
    line-height: var(--sp-line-height);
    border: 1px solid transparent;
    margin-bottom: var(--sp-space-5);
}

.waiseo-alert__icon {
    flex-shrink: 0;
    margin-top: 1px;
    width: 18px;
    height: 18px;
}

.waiseo-alert__body {
    flex: 1;
}

.waiseo-alert__title {
    font-weight: var(--sp-font-semibold);
    margin-bottom: 2px;
    color: inherit;
}

.waiseo-alert__text {
    opacity: 0.85;
}

.waiseo-alert__text a {
    color: inherit;
    text-decoration: underline;
    font-weight: var(--sp-font-medium);
}

.waiseo-alert--warning {
    background: var(--sp-warning-subtle);
    border-color: rgba(245, 158, 11, 0.2);
    color: #92400e;
}

[data-theme="dark"] .waiseo-alert--warning {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
}

.waiseo-alert--info {
    background: var(--sp-info-subtle);
    border-color: rgba(59, 130, 246, 0.2);
    color: #1e40af;
}

[data-theme="dark"] .waiseo-alert--info {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.1);
}

.waiseo-alert--success {
    background: var(--sp-success-subtle);
    border-color: rgba(16, 185, 129, 0.2);
    color: #065f46;
}

[data-theme="dark"] .waiseo-alert--success {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.1);
}

.waiseo-alert--danger {
    background: var(--sp-danger-subtle);
    border-color: rgba(239, 68, 68, 0.2);
    color: #991b1b;
}

[data-theme="dark"] .waiseo-alert--danger {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.1);
}

/* ============================================================
   HERO BANNER
   ============================================================ */

.waiseo-hero,
.sp-hero {
    background: var(--sp-bg-hero);
    border-radius: var(--sp-radius-xl);
    padding: var(--sp-space-8) var(--sp-space-10);
    margin-bottom: var(--sp-space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-space-6);
    overflow: hidden;
    position: relative;
}

.waiseo-hero::before,
.sp-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(20, 110, 245, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.waiseo-hero__title {
    font-size: var(--sp-text-2xl);
    font-weight: var(--sp-font-bold);
    color: var(--sp-text-on-dark);
    font-family: var(--sp-font);
    margin: 0 0 var(--sp-space-2) 0;
    letter-spacing: -0.02em;
}

.waiseo-hero__subtitle {
    font-size: var(--sp-text-sm);
    color: var(--sp-text-on-dark-muted);
    font-family: var(--sp-font);
    margin: 0;
}

.waiseo-hero__stats {
    display: flex;
    gap: var(--sp-space-8);
    flex-shrink: 0;
}

.waiseo-hero__stat-value {
    font-size: var(--sp-text-3xl);
    font-weight: var(--sp-font-bold);
    color: var(--sp-text-on-dark);
    font-family: var(--sp-font);
    line-height: 1;
    letter-spacing: -0.03em;
}

.waiseo-hero__stat-label {
    font-size: var(--sp-text-xs);
    color: var(--sp-text-on-dark-muted);
    font-family: var(--sp-font);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}

/* ============================================================
   DARK MODE — Scoped overrides for existing components
   ============================================================ */

[data-theme="dark"] .sp-panel,
[data-theme="dark"] .waiseo-card {
    background: var(--sp-bg-card);
    border-color: var(--sp-border);
}

[data-theme="dark"] .sp-panel-header {
    background: rgba(255, 255, 255, 0.02);
    border-bottom-color: var(--sp-border);
}

[data-theme="dark"] .sp-panel .form-table input[type="text"],
[data-theme="dark"] .sp-panel .form-table input[type="url"],
[data-theme="dark"] .sp-panel .form-table input[type="number"],
[data-theme="dark"] .sp-panel .form-table input[type="tel"],
[data-theme="dark"] .sp-panel .form-table input[type="email"],
[data-theme="dark"] .sp-panel .form-table textarea,
[data-theme="dark"] .sp-panel .form-table select {
    background: var(--sp-bg-input);
    color: var(--sp-text);
    border-color: var(--sp-border-medium);
}

[data-theme="dark"] .sp-panel .form-table input[type="text"]:focus,
[data-theme="dark"] .sp-panel .form-table input[type="url"]:focus,
[data-theme="dark"] .sp-panel .form-table textarea:focus,
[data-theme="dark"] .sp-panel .form-table select:focus {
    border-color: var(--sp-primary);
    box-shadow: var(--sp-shadow-focus);
}

[data-theme="dark"] .sp-sub-tabs {
    background: var(--sp-bg-card);
    border-color: var(--sp-border);
}

[data-theme="dark"] .sp-sub-tab {
    color: var(--sp-text-secondary);
}

[data-theme="dark"] .sp-sub-tab:hover {
    color: var(--sp-text);
    background: var(--sp-bg-card-hover);
}

[data-theme="dark"] .sp-sub-tab-active {
    color: #fff;
    background: var(--sp-primary);
}

[data-theme="dark"] .sp-social-item {
    background: var(--sp-bg-card);
    border-color: var(--sp-border);
}

[data-theme="dark"] .sp-social-field input {
    background: var(--sp-bg-input);
    color: var(--sp-text);
    border-color: var(--sp-border-medium);
}

[data-theme="dark"] .sp-tip {
    background: var(--sp-bg-card);
    color: var(--sp-text-secondary);
}

[data-theme="dark"] .sp-action-btn {
    background: var(--sp-bg-card);
    color: var(--sp-text);
    border-color: var(--sp-border);
}

[data-theme="dark"] .sp-action-btn:hover {
    background: var(--sp-primary-subtle);
    color: var(--sp-primary);
}

[data-theme="dark"] .sp-sitemap-link {
    background: var(--sp-bg-card);
    border-color: var(--sp-border);
    color: var(--sp-text);
}

[data-theme="dark"] .sp-mini-stat {
    background: var(--sp-bg-card);
}

[data-theme="dark"] .sp-engine-btn {
    background: var(--sp-bg-card);
    color: var(--sp-text);
}

[data-theme="dark"] .my-seo-settings-header {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
}

[data-theme="dark"] .sp-wrap .nav-tab-wrapper,
[data-theme="dark"] .my-seo-root .nav-tab-wrapper {
    background: var(--sp-bg-card);
    border-color: var(--sp-border);
}

[data-theme="dark"] .sp-404-stat,
/* Image SEO dark-mode overrides */
[data-theme="dark"] .imgseo-rules-bar {
    background: var(--sp-dark-card);
    border-color: var(--sp-border);
}

[data-theme="dark"] .imgseo-rules-field input[type="text"] {
    background: var(--sp-bg-input);
    color: var(--sp-text);
    border-color: var(--sp-border-medium);
}

[data-theme="dark"] .imgseo-btn--secondary,
[data-theme="dark"] .imgseo-btn--save {
    background: var(--sp-dark-card);
    color: var(--sp-text);
    border-color: var(--sp-border-medium);
}

[data-theme="dark"] .imgseo-btn--ghost {
    border-color: var(--sp-border-medium);
    color: var(--sp-text-muted);
}

[data-theme="dark"] .imgseo-progress-wrap {
    background: var(--sp-dark-card);
    border-color: var(--sp-border);
}

[data-theme="dark"] .imgseo-progress-track {
    background: rgba(255,255,255,.1);
}

[data-theme="dark"] .imgseo-results-header {
    background: var(--sp-dark-card);
    border-color: var(--sp-border);
}

[data-theme="dark"] .imgseo-table-scroll {
    border-color: var(--sp-border);
}

[data-theme="dark"] .imgseo-table th {
    background: var(--sp-dark-card);
    border-color: var(--sp-border) !important;
}

[data-theme="dark"] .imgseo-table td {
    border-color: var(--sp-border) !important;
    color: var(--sp-text);
}

[data-theme="dark"] .imgseo-alt-input {
    background: var(--sp-bg-input) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border-medium) !important;
}

[data-theme="dark"] .imgseo-thumb {
    border-color: var(--sp-border-medium);
}

/* Legacy */
[data-theme="dark"] .sp-image-stat {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
}

[data-theme="dark"] .my-seo-redirects-stats {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
}

[data-theme="dark"] .sp-save-bar {
    background: var(--sp-bg-card);
    border-color: var(--sp-border);
}

[data-theme="dark"] .my-seo-score-container {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
}

[data-theme="dark"] .my-seo-meta-box {
    color: var(--sp-text);
}

[data-theme="dark"] .my-seo-input,
[data-theme="dark"] .my-seo-textarea,
[data-theme="dark"] .my-seo-select {
    background: var(--sp-bg-input);
    color: var(--sp-text);
    border-color: var(--sp-border-medium);
}

[data-theme="dark"] .my-seo-title-preview,
[data-theme="dark"] .my-seo-description-preview {
    background: var(--sp-bg-card);
    border-color: var(--sp-border);
}

[data-theme="dark"] .title-preview {
    color: #6ba3f7;
}

[data-theme="dark"] .description-preview {
    color: var(--sp-text-secondary);
}

[data-theme="dark"] .serp-preview-card {
    background: var(--sp-bg-card);
    border-color: var(--sp-border);
}

[data-theme="dark"] .serp-preview-card .serp-url {
    color: var(--sp-text-secondary);
}

[data-theme="dark"] .serp-preview-card .serp-title {
    color: #6ba3f7;
}

[data-theme="dark"] .serp-preview-card .serp-desc {
    color: var(--sp-text-secondary);
}

[data-theme="dark"] .sp-panel .form-table code {
    background: var(--sp-primary-subtle);
    color: var(--sp-primary);
}

[data-theme="dark"] .my-seo-loading-overlay {
    background: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .my-seo-analysis-results,
[data-theme="dark"] #seo-keyword-quick {
    background: var(--sp-bg-card);
    border-color: var(--sp-border);
}

[data-theme="dark"] a.sm-open-link {
    background: var(--sp-bg-card);
    color: var(--sp-text);
}

[data-theme="dark"] .sp-wrap .notice-success {
    border-color: var(--sp-success);
    background: var(--sp-success-subtle);
    color: var(--sp-text);
}

[data-theme="dark"] .sp-wrap .notice-error {
    border-color: var(--sp-danger);
    background: var(--sp-danger-subtle);
    color: var(--sp-text);
}

/* Dark mode for wp-list-table used in panels */
[data-theme="dark"] .striped>tbody> :nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .striped>tbody> :nth-child(even) {
    background-color: transparent;
}

[data-theme="dark"] .striped>tbody> :nth-child(odd) td,
[data-theme="dark"] .striped>tbody> :nth-child(odd) th,
[data-theme="dark"] .striped>tbody> :nth-child(even) td,
[data-theme="dark"] .striped>tbody> :nth-child(even) th {
    background-color: transparent;
}

[data-theme="dark"] .sp-panel table.wp-list-table thead th,
[data-theme="dark"] .sp-404-table th,
/* sp-image-table dark-mode — replaced by imgseo-table overrides */
[data-theme="dark"] .sp-panel table.wp-list-table,
[data-theme="dark"] .sp-404-table {
    background: var(--sp-bg-card);
}

[data-theme="dark"] .sp-panel table.wp-list-table tbody tr,
[data-theme="dark"] .sp-404-table tbody tr {
    background-color: var(--sp-bg-card) !important;
}

[data-theme="dark"] .sp-panel table.wp-list-table tbody td,
[data-theme="dark"] .sp-404-table td {
    background-color: transparent !important;
    border-bottom-color: var(--sp-border);
    color: var(--sp-text);
}

[data-theme="dark"] .sp-panel table.wp-list-table tbody tr:nth-child(odd),
[data-theme="dark"] .sp-404-table tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] .sp-panel table.wp-list-table tbody tr:nth-child(odd) td,
[data-theme="dark"] .sp-404-table tbody tr:nth-child(odd) td {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] .sp-panel table.wp-list-table tbody tr:hover,
[data-theme="dark"] .sp-404-table tbody tr:hover {
    background-color: var(--sp-bg-card-hover) !important;
}

[data-theme="dark"] .sp-panel table.wp-list-table tbody tr:hover td,
[data-theme="dark"] .sp-404-table tbody tr:hover td {
    background-color: var(--sp-bg-card-hover) !important;
    color: var(--sp-text);
}

/* imgseo-table dark-mode already handled in imgseo overrides block above */

[data-theme="dark"] .my-seo-redirects-container .wp-list-table thead th {
    background: rgba(255, 255, 255, 0.02);
    color: var(--sp-text-muted);
    border-bottom-color: var(--sp-border);
}

[data-theme="dark"] .my-seo-redirects-container .wp-list-table tbody td {
    border-bottom-color: var(--sp-border);
    color: var(--sp-text);
}

[data-theme="dark"] .my-seo-redirects-container .wp-list-table tbody tr:hover td {
    background: var(--sp-bg-card-hover);
}

[data-theme="dark"] .my-seo-redirects-toolbar select,
[data-theme="dark"] .my-seo-redirects-toolbar input[type="search"] {
    background: var(--sp-bg-input);
    color: var(--sp-text);
    border-color: var(--sp-border-medium);
}

[data-theme="dark"] .sp-404-redirect-to {
    background: var(--sp-bg-input);
    color: var(--sp-text);
    border-color: var(--sp-border-medium);
}

[data-theme="dark"] .sp-btn-sm {
    background: var(--sp-bg-card);
    color: var(--sp-text);
    border-color: var(--sp-border);
}

/* Redirects dark-mode overrides */
[data-theme="dark"] .my-seo-redirects-container,
[data-theme="dark"] .my-seo-redirects-analytics,
[data-theme="dark"] .my-seo-redirects-import-export {
    background: var(--sp-bg-card);
    border-color: var(--sp-border);
}

[data-theme="dark"] .my-seo-redirects-form .form-table input[type="text"],
[data-theme="dark"] .my-seo-redirects-form .form-table textarea,
[data-theme="dark"] .my-seo-redirects-form .form-table select,
[data-theme="dark"] .my-seo-redirects-toolbar select,
[data-theme="dark"] .my-seo-redirects-toolbar input[type="search"] {
    background: var(--sp-bg-input);
    color: var(--sp-text);
    border-color: var(--sp-border-medium);
}

[data-theme="dark"] .my-seo-ie-card {
    background: var(--sp-bg-card);
    border-color: var(--sp-border);
}

[data-theme="dark"] .my-seo-ie-card-icon-wrap--blue {
    background: rgba(20, 110, 245, .12);
}

[data-theme="dark"] .my-seo-ie-card-icon-wrap--green {
    background: rgba(16, 185, 129, .12);
}

[data-theme="dark"] .rdr-file-drop-zone {
    background: var(--sp-bg-input);
    border-color: var(--sp-border-medium);
    color: var(--sp-text-secondary);
}

[data-theme="dark"] .rdr-ie-format-hint {
    background: var(--sp-dark-card);
    border-color: var(--sp-border);
}

[data-theme="dark"] .rdr-analytics-table-wrap .wp-list-table thead th,
[data-theme="dark"] .my-seo-redirects-container .wp-list-table thead th {
    background: var(--sp-dark-card);
    color: var(--sp-text-muted);
    border-color: var(--sp-border) !important;
}

[data-theme="dark"] .my-seo-redirects-container .wp-list-table,
[data-theme="dark"] .rdr-analytics-table-wrap .wp-list-table {
    border-color: var(--sp-border) !important;
}

[data-theme="dark"] .my-seo-redirects-container .wp-list-table tbody td,
[data-theme="dark"] .rdr-analytics-table-wrap .wp-list-table tbody td {
    border-color: var(--sp-border) !important;
    color: var(--sp-text);
}

[data-theme="dark"] .seo-check:hover {
    background: var(--sp-bg-card-hover);
}

[data-theme="dark"] .sp-empty-state h3,
[data-theme="dark"] .my-seo-empty-state h3 {
    color: var(--sp-text);
}

[data-theme="dark"] .sp-empty-state p,
[data-theme="dark"] .my-seo-empty-state p {
    color: var(--sp-text-secondary);
}

/* --- Native <select> <option> contrast fix for dark mode ---
   Force color-scheme: dark so the browser renders dropdown popups
   with a dark background, and set explicit option colors as a
   fallback for browsers that ignore color-scheme. ------------- */
[data-theme="dark"] .my-seo-root select,
[data-theme="dark"] .sp-panel .form-table select,
[data-theme="dark"] .my-seo-redirects-form .form-table select,
[data-theme="dark"] .my-seo-redirects-toolbar select,
[data-theme="dark"] #redirects-bulk-action,
[data-theme="dark"] .my-seo-select {
    color-scheme: dark;
}

[data-theme="dark"] .my-seo-root select option,
[data-theme="dark"] .sp-panel .form-table select option,
[data-theme="dark"] .my-seo-redirects-form select option,
[data-theme="dark"] .my-seo-redirects-toolbar select option,
[data-theme="dark"] #redirects-bulk-action option,
[data-theme="dark"] .my-seo-select option {
    background: #1a2235;
    color: #e8edf5;
}

/* Quick action AI button — a quiet neutral card like the others, with just a
   subtle purple tint + purple icon so it's gently distinguished, not loud. */
.sp-action-btn--ai {
    background: var(--sp-ai-purple-subtle, rgba(124, 58, 237, .06));
    color: var(--sp-text);
    border-color: rgba(124, 58, 237, .16);
}

.sp-action-btn--ai:hover {
    background: rgba(124, 58, 237, .12);
    color: var(--sp-ai-purple, #7C3AED);
    border-color: rgba(124, 58, 237, .3);
}

.sp-action-btn--ai:hover::after {
    color: var(--sp-ai-purple, #7C3AED);
}

/* Make AI action cards fully opaque & interactive */
.sp-ai-action-btn {
    opacity: 1 !important;
}

.sp-ai-action-btn:disabled {
    opacity: 0.55 !important;
}

/* ============================================================
   INPUT GROUP (license key input + button)
   ============================================================ */

.waiseo-input-group {
    display: flex;
    align-items: center;
    background: var(--sp-bg-input);
    border: 1.5px solid var(--sp-border-medium);
    border-radius: 100px;
    /* Fully rounded pill */
    padding: 4px;
    /* Inner padding for the button */
    transition: box-shadow var(--sp-transition-fast), border-color var(--sp-transition-fast);
}

.waiseo-input-group:focus-within {
    border-color: var(--sp-border-focus);
    box-shadow: var(--sp-shadow-focus);
}

.waiseo-input-group .waiseo-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 10px 18px;
    margin: 0;
    box-shadow: none !important;
    outline: none !important;
}

.waiseo-input-group .waiseo-btn {
    border-radius: 100px;
    /* Match outer pill */
    padding: 10px 24px;
    margin: 0;
    white-space: nowrap;
}

.waiseo-result-box {
    margin-top: var(--sp-space-3);
    padding: var(--sp-space-3) var(--sp-space-4);
    border-radius: var(--sp-radius);
    font-size: var(--sp-text-sm);
    font-family: var(--sp-font);
}

/* ============================================================
   LOCK BADGE
   ============================================================ */

.waiseo-lock-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: var(--sp-font-semibold);
    color: var(--sp-warning);
    background: var(--sp-warning-subtle);
    padding: 2px 7px;
    border-radius: var(--sp-radius-full);
    vertical-align: middle;
    margin-left: 4px;
}

/* ============================================================
   DARK MODE — Dashboard components
   ============================================================ */

/* Bug 4: Stat cards dark background */
[data-theme="dark"] .sp-card {
    background: var(--sp-bg-card);
    border-color: var(--sp-border);
}

[data-theme="dark"] .sp-card:hover {
    border-color: rgba(20, 110, 245, 0.18);
}

/* Bug 12: Hide WordPress-generated page title on plugin pages */
.waiseo-shell .wrap>h1:first-child,
.waiseo-shell .wrap>h2:first-child {
    display: none;
}

/* ============================================================
   SEO HEALTH SCORE SECTION
   ============================================================ */
.sp-seo-score-section {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    align-items: center;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-lg, 16px);
    padding: 36px 40px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,.06);
}

/* Decorative gradient stripe at the top */
/* Subtle background glow blob */
.sp-seo-score-section::after {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(20,110,245,.07) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}

/* ---- Ring (left column) ---- */
.sp-seo-ring-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.sp-seo-ring {
    position: relative;
    width: 180px;
    height: 180px;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,.12));
}

/* Track circle colour (SVG uses currentColor) */
.sp-ring-track {
    color: var(--sp-border-light, #e2e8f0);
}

/* Animated arc — JS sets stroke-dashoffset after load */
.sp-ring-arc {
    transition: stroke-dashoffset 1.4s cubic-bezier(.4, 0, .2, 1);
}

/* Centered inner overlay */
.sp-ring-inner {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

.sp-ring-score {
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--sp-text);
    font-variant-numeric: tabular-nums;
}

/* Grade badge */
.sp-ring-grade {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 100px;
    margin-top: 2px;
}

.sp-ring-grade.seo-score--green  { background: rgba(16,185,129,.14); color: #10b981; }
.sp-ring-grade.seo-score--amber  { background: rgba(245,158,11,.14);  color: #d97706; }
.sp-ring-grade.seo-score--orange { background: rgba(249,115,22,.14);  color: #ea580c; }
.sp-ring-grade.seo-score--red    { background: rgba(239,68,68,.14);   color: #dc2626; }

/* Label below ring */
.sp-seo-ring-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--sp-text-muted);
    text-align: center;
    margin: 0;
    line-height: 1.4;
}

/* ---- Detail (right column) ---- */
.sp-seo-score-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
}

.sp-seo-score-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-seo-score-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--sp-text);
    margin: 0;
    line-height: 1.2;
}

.sp-seo-score-sub {
    font-size: 13px;
    color: var(--sp-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ---- Breakdown Bars ---- */
.sp-seo-bars {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sp-seo-bar-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-seo-bar-meta {
    display: flex;
    align-items: center;
    gap: 7px;
}

.sp-seo-bar-meta .dashicons,
.sp-seo-bar-meta svg {
    font-size: 15px;
    width: 15px;
    height: 15px;
}

.sp-seo-bar-label {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--sp-text);
    line-height: 1;
}

.sp-seo-bar-pct {
    font-size: 12px;
    font-weight: 700;
    color: var(--sp-text);
    min-width: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sp-seo-bar-track {
    height: 7px;
    background: var(--sp-border-light, #e8edf3);
    border-radius: 100px;
    overflow: hidden;
}

.sp-seo-bar-fill {
    height: 100%;
    width: 0;               /* JS animates to data-width% */
    border-radius: 100px;
    transition: width 1.1s cubic-bezier(.4, 0, .2, 1) .25s;
    position: relative;
}

/* Subtle shimmer on fills */
.sp-seo-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
    border-radius: inherit;
}

/* ---- Footer CTAs ---- */
.sp-seo-score-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.sp-seo-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    transition: opacity .18s, transform .18s, box-shadow .18s;
    border: none;
    background: var(--sp-primary, #146ef5);
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(20,110,245,.28);
}

.sp-seo-cta-btn .dashicons,
.sp-seo-cta-btn svg {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.sp-seo-cta-btn:hover,
.sp-seo-cta-btn:focus {
    opacity: .88;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(20,110,245,.36);
    color: #fff !important;
    text-decoration: none !important;
}

.sp-seo-cta-btn--ghost {
    background: transparent;
    color: var(--sp-text) !important;
    border: 1.5px solid var(--sp-border-medium, #d1d9e6);
    box-shadow: none;
}

.sp-seo-cta-btn--ghost:hover,
.sp-seo-cta-btn--ghost:focus {
    background: var(--sp-bg-card-hover);
    border-color: var(--sp-primary, #146ef5);
    color: var(--sp-primary, #146ef5) !important;
    box-shadow: none;
    transform: translateY(-1px);
}

/* ============================================================
   SEO Health KPI chips (merged from old stat-card row)
   ============================================================ */
.sp-seo-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 4px 0 18px;
}

.sp-seo-kpi {
    background: var(--sp-light-card, #f6f8fb);
    border: 1px solid var(--sp-border-light, #e7ecf3);
    border-radius: 12px;
    padding: 12px 14px;
    text-align: center;
}

.sp-seo-kpi-num {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--sp-text);
    line-height: 1.1;
    letter-spacing: -.5px;
}

.sp-seo-kpi-label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--sp-text-secondary);
    margin-top: 3px;
}

[data-theme="dark"] .sp-seo-kpi {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .08);
}

/* ============================================================
   Action Center — prioritised fix-it list
   ============================================================ */
.waiseo-ac-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.waiseo-ac-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--sp-border-light, #eef1f6);
    transition: background .15s;
}

.waiseo-ac-item:last-child { border-bottom: none; }
.waiseo-ac-item:hover { background: var(--sp-primary-light, rgba(20,110,245,.04)); }

.waiseo-ac-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--sp-primary-light, rgba(20,110,245,.1));
    color: var(--sp-primary, #146ef5);
}

.waiseo-ac-icon svg { width: 19px; height: 19px; }

.waiseo-ac-item--high .waiseo-ac-icon {
    background: rgba(239, 68, 68, .1);
    color: #ef4444;
}

.waiseo-ac-item--medium .waiseo-ac-icon {
    background: rgba(245, 158, 11, .12);
    color: #d97706;
}

.waiseo-ac-count {
    flex: 0 0 auto;
    min-width: 40px;
    font-size: 24px;
    font-weight: 800;
    color: var(--sp-text);
    letter-spacing: -.5px;
    text-align: center;
}

.waiseo-ac-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.waiseo-ac-text strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-text);
    line-height: 1.35;
}

.waiseo-ac-desc {
    font-size: 12.5px;
    color: var(--sp-text-secondary);
    line-height: 1.4;
}

.waiseo-ac-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border-radius: 100px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    color: var(--sp-primary, #146ef5);
    background: var(--sp-primary-light, rgba(20,110,245,.08));
    border: 1px solid rgba(20,110,245,.15);
    white-space: nowrap;
    transition: background .15s, color .15s, transform .15s;
}

.waiseo-ac-cta svg { width: 13px; height: 13px; }

.waiseo-ac-cta:hover {
    background: var(--sp-primary, #146ef5);
    color: #fff !important;
    transform: translateX(2px);
}

.waiseo-ac-empty {
    text-align: center;
    padding: 40px 24px;
}

.waiseo-ac-empty-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(34, 197, 94, .12);
    color: #16a34a;
    margin-bottom: 14px;
}

.waiseo-ac-empty-ico svg { width: 28px; height: 28px; }
.waiseo-ac-empty h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--sp-text); }
.waiseo-ac-empty p { margin: 0; font-size: 14px; color: var(--sp-text-secondary); }

[data-theme="dark"] .waiseo-ac-item { border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .waiseo-ac-item:hover { background: rgba(255,255,255,.03); }

/* ============================================================
   Recent Posts — SEO status chips
   ============================================================ */
.waiseo-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.waiseo-status-chip--ok {
    background: rgba(34, 197, 94, .12);
    color: #16a34a;
}

.waiseo-status-chip--warn {
    background: rgba(245, 158, 11, .14);
    color: #b45309;
}

/* Recent Posts table — explicit column widths so the status chip has its own
   space and never collides with the Edit link (the old fixed layout did). */
.waiseo-recent-table col.waiseo-rc-title  { width: auto; }
.waiseo-recent-table col.waiseo-rc-type   { width: 78px; }
.waiseo-recent-table col.waiseo-rc-status { width: 140px; }
.waiseo-recent-table col.waiseo-rc-action { width: 64px; }

.waiseo-recent-table td,
.waiseo-recent-table th { vertical-align: middle; }

.waiseo-rc-title-cell a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.waiseo-recent-action {
    text-align: right;
}

.waiseo-recent-action a {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sp-primary, #146ef5);
    text-decoration: none;
    white-space: nowrap;
}

.waiseo-recent-action a:hover { text-decoration: underline; }

[data-theme="dark"] .waiseo-status-chip--ok   { background: rgba(34,197,94,.18);  color: #4ade80; }
[data-theme="dark"] .waiseo-status-chip--warn { background: rgba(245,158,11,.2);  color: #fbbf24; }

@media (max-width: 600px) {
    .sp-seo-kpis { grid-template-columns: repeat(2, 1fr); }
    .waiseo-ac-item { flex-wrap: wrap; gap: 10px; }
    .waiseo-ac-count { min-width: 0; font-size: 20px; }
    .waiseo-ac-cta { margin-left: auto; }
}

/* ---- Responsive ---- */
@media (max-width: 720px) {
    .sp-seo-score-section {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 24px 20px;
    }
    .sp-seo-ring-wrap {
        flex-direction: row;
        gap: 20px;
        align-items: center;
    }
    .sp-seo-ring {
        width: 120px;
        height: 120px;
    }
    .sp-seo-ring svg {
        width: 120px;
        height: 120px;
    }
    .sp-ring-score { font-size: 28px; }
}

/* ---- Dark mode overrides ---- */
[data-theme="dark"] .sp-seo-score-section {
    box-shadow: 0 2px 24px rgba(0,0,0,.35);
}

[data-theme="dark"] .sp-ring-track {
    color: var(--sp-border, rgba(255,255,255,.1));
}

[data-theme="dark"] .sp-seo-bar-track {
    background: var(--sp-border, rgba(255,255,255,.1));
}

[data-theme="dark"] .sp-seo-cta-btn--ghost {
    border-color: var(--sp-border-medium, rgba(255,255,255,.18));
}

[data-theme="dark"] .sp-seo-cta-btn--ghost:hover {
    background: rgba(20,110,245,.12);
}
/* =====================================================================
   META BOX — SVG ICON POLISH (added with dashicon→SVG migration)
   ===================================================================== */

/* Spin animation covers both .dashicons and svg */
.sp-mb .sp-spin,
.sp-mb .sp-spin svg {
    animation: sp-mb-spin .8s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

/* Stat icon pill — give it a subtle coloured background like the AI hub */
.sp-mb-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(20, 110, 245, .08);
    color: var(--sp-primary);
    flex-shrink: 0;
    transition: background .2s ease;
}

.sp-mb-stat:hover .sp-mb-stat-icon {
    background: rgba(20, 110, 245, .15);
}

/* Media buttons (OG image / Twitter image) — keep SVG aligned */
.sp-mb-media-btn svg {
    width: 14px;
    height: 14px;
    display: block;
}

/* Inline magic-wand button (generate keyword) */
.sp-mb-inline-ai-btn svg {
    width: 14px;
    height: 14px;
    display: block;
}

/* Inline AI chip — under SEO Title / Meta Description */
.sp-mb-field-ai {
    margin-top: 5px;
}

.sp-mb-ai-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: var(--sp-primary-subtle);
    color: var(--sp-primary);
    border: 1px solid rgba(20, 110, 245, .18);
    border-radius: var(--sp-radius-full);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--sp-font);
    cursor: pointer;
    transition: background var(--sp-transition-fast), border-color var(--sp-transition-fast), opacity var(--sp-transition-fast);
    line-height: 1;
}

.sp-mb-ai-chip:hover {
    background: var(--sp-primary-subtle-hover);
    border-color: rgba(20, 110, 245, .35);
}

.sp-mb-ai-chip:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.sp-mb-ai-chip svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Bulk filter toggle */
.sp-filter-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

.sp-filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-full);
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text-secondary);
    cursor: pointer;
    font-family: var(--sp-font);
    transition: border-color var(--sp-transition-fast), color var(--sp-transition-fast), background var(--sp-transition-fast);
    line-height: 1;
}

.sp-filter-toggle-btn:hover,
.sp-filter-toggle-btn.sp-filter-active {
    border-color: var(--sp-primary);
    color: var(--sp-primary);
    background: var(--sp-primary-subtle);
}

.sp-filter-toggle-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform var(--sp-transition-fast);
}

.sp-filter-toggle-btn.sp-filter-active svg.sp-chevron {
    transform: rotate(180deg);
}

.sp-filter-count-badge {
    background: var(--sp-primary);
    color: #fff;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

/* Filter panel */
.sp-filter-panel {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-md);
    padding: 20px;
    margin-top: 12px;
    margin-bottom: 20px;
}

.sp-filter-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 16px;
}

.sp-filter-group-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--sp-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px;
    display: block;
}

.sp-filter-check-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 150px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.sp-filter-check-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sp-text);
    cursor: pointer;
    line-height: 1.3;
}

.sp-filter-check-list input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--sp-primary);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.sp-filter-date-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-filter-date-row label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--sp-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 5px;
}

.sp-filter-date-input {
    width: 100%;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    padding: 8px 10px;
    font-size: 13px;
    font-family: var(--sp-font);
    color: var(--sp-text);
    background: var(--sp-bg-input);
    transition: border-color var(--sp-transition-fast);
}

.sp-filter-date-input:focus {
    outline: none;
    border-color: var(--sp-primary);
    box-shadow: var(--sp-shadow-focus);
}

.sp-filter-panel-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 14px;
    border-top: 1px solid var(--sp-border);
}

.sp-filter-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-full);
    background: transparent;
    color: var(--sp-text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--sp-font);
    transition: border-color var(--sp-transition-fast), color var(--sp-transition-fast);
}

.sp-filter-reset-btn:hover {
    border-color: var(--sp-danger);
    color: var(--sp-danger);
}

/* Tab SVG sizing */
.sp-mb-tab svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Label SVG sizing */
.sp-mb-label svg {
    width: 14px;
    height: 14px;
    color: var(--sp-primary);
    flex-shrink: 0;
}

/* Badge SVG sizing */
.sp-mb-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* SERP label Google logo */
.sp-mb-serp-label svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Section head icon pill */
.sp-mb-section-head svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* AI action button SVG */
.sp-mb-ai-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Use-button SVG in suggestion items */
.sp-mb-ai-sug-use svg {
    width: 12px;
    height: 12px;
}

/* Toast notification SVG */
.sp-mb-toast svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* KW pill SVG */
.sp-mb-kw-pill svg {
    width: 12px;
    height: 12px;
}

/* ================================================================
   404 MONITOR
   ================================================================ */

/* Panel header actions row */
.sp-panel-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Count badge inside panel header */
.sp-404-count-badge {
    font-size: 12px;
    color: var(--sp-text-muted);
    background: var(--sp-bg);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-full);
    padding: 3px 10px;
    white-space: nowrap;
}

/* Generic small button variants */
.sp-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--sp-radius-full);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
    text-decoration: none;
    white-space: nowrap;
}
.sp-btn--sm { padding: 5px 14px; font-size: 12px; }
.sp-btn--xs { padding: 3px 10px; font-size: 12px; }
.sp-btn--primary {
    background: var(--sp-primary);
    border-color: var(--sp-primary);
    color: #fff;
}
.sp-btn--primary:hover { opacity: 0.88; color: #fff; }
/* Soft danger — a destructive secondary action shouldn't shout. Light red
   surface + red text, fills solid only on hover. */
.sp-btn--danger {
    background: rgba(239, 68, 68, .10);
    border-color: rgba(239, 68, 68, .22);
    color: var(--sp-danger, #ef4444);
}
.sp-btn--danger:hover {
    background: var(--sp-danger, #ef4444);
    border-color: var(--sp-danger, #ef4444);
    color: #fff;
    opacity: 1;
}
.sp-btn--ghost {
    background: transparent;
    border-color: var(--sp-border);
    color: var(--sp-text-body);
}
.sp-btn--ghost:hover {
    border-color: var(--sp-primary);
    color: var(--sp-primary);
}
.sp-btn:disabled,
.sp-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Red stat card (used for Total Hits on 404 Monitor) — icon colour only,
   no top strip, to match the other coloured cards. */
.sp-card--red .sp-card-icon {
    background: rgba(239, 68, 68, 0.10);
    color: var(--sp-danger, #ef4444);
}

/* 404 table column widths */
.sp-404-table .sp-404-col-hits   { width: 64px; }
.sp-404-table .sp-404-col-date   { width: 164px; }
.sp-404-table .sp-404-col-referer { width: 180px; }
.sp-404-table .sp-404-col-actions { width: 240px; }

/* URL cell monospace */
.sp-404-url {
    font-size: 12px;
    word-break: break-all;
    background: transparent;
    border: none;
    padding: 0;
    font-family: 'SFMono-Regular', Consolas, monospace;
    color: var(--sp-text-strong);
}

/* Referer link */
.sp-404-referer-link {
    color: var(--sp-text-muted);
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}
.sp-404-referer-link:hover { color: var(--sp-primary); }

/* Actions cell */
.sp-404-actions-cell {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
}

/* Redirect destination input */
.sp-404-redirect-to {
    flex: 1 1 0;
    min-width: 0;
    max-width: 110px;
    padding: 4px 8px;
    font-size: 12px;
    border: 1.5px solid var(--sp-border);
    border-radius: var(--sp-radius-sm, 6px);
    background: var(--sp-surface);
    color: var(--sp-text-body);
    transition: border-color 0.15s;
}
.sp-404-redirect-to:focus {
    border-color: var(--sp-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(20,110,245,0.10);
}
.sp-404-redirect-to.sp-input-error {
    border-color: var(--sp-danger, #ef4444);
    box-shadow: 0 0 0 3px rgba(239,68,68,0.10);
}

/* Done row */
.sp-404-table tbody tr.sp-row-done {
    opacity: 0.5;
    background: var(--sp-bg);
}

/* sp-card link (used for "Fix Now" action card) */
.sp-card-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: 13px;
    font-weight: 600;
}
.sp-card-link:hover { color: var(--sp-primary); }

/* ================================================================
   SETTINGS PAGE — new utility classes
   ================================================================ */

/* Robots.txt description spacing (replaces inline margin-bottom:12px) */
.sp-robots-desc {
    margin-bottom: 12px;
}

/* Sitemap links: icon replaces emoji */
.sp-sitemap-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--sp-radius-sm, 6px);
    background: rgba(20,110,245,0.08);
    color: var(--sp-primary);
    flex-shrink: 0;
}

/* Engine buttons: replace emoji with SVG inline */
.sp-engine-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Export/import status messages (replaces inline color:#dc2626) */
.sp-io-error  { color: var(--sp-danger, #ef4444); }
.sp-io-success { color: var(--sp-green); }

/* ================================================================
   LICENSE TAB
   ================================================================ */

/* Panel description below panel-header h2 */
.sp-panel-desc {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--sp-text-muted);
}

/* Plan table wrap with horizontal scroll on small screens */
.waiseo-plan-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 12px;
}

/* Plan comparison — auto layout so "Agency" is not squeezed by table-layout:fixed */
.waiseo-plan-table.widefat.fixed {
    table-layout: auto;
}

.waiseo-plan-table .waiseo-plan-col {
    width: 1%;
    min-width: 92px;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    padding-left: 16px;
    padding-right: 16px;
}

.waiseo-plan-table thead th.waiseo-plan-col {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.waiseo-plan-table thead th.waiseo-plan-col:last-child {
    min-width: 104px;
}

/* Cap icon — primary color without inline style */
.waiseo-cap-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 0;
}
.waiseo-cap-icon {
    flex-shrink: 0;
    color: var(--sp-primary);
}

/* Connect button — full styling via class, no inline style needed */
.waiseo-connect-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 10px 28px;
}

/* ================================================================
   DARK MODE OVERRIDES — 404 Monitor + Settings + License
   ================================================================ */
[data-theme="dark"] .sp-404-count-badge {
    background: var(--sp-bg);
    border-color: var(--sp-border);
    color: var(--sp-text-muted);
}
[data-theme="dark"] .sp-404-redirect-to {
    background: var(--sp-surface);
    border-color: var(--sp-border);
    color: var(--sp-text-body);
}
[data-theme="dark"] .sp-404-redirect-to:focus {
    border-color: var(--sp-primary);
}
[data-theme="dark"] .sp-btn--ghost {
    border-color: var(--sp-border);
    color: var(--sp-text-body);
}
[data-theme="dark"] .sp-sitemap-icon {
    background: rgba(20,110,245,0.15);
}
[data-theme="dark"] .waiseo-plan-table-wrap {
    border-color: var(--sp-border);
}

/* ================================================================
   SEO BADGE — post list column (admin-meta-box.php)
   ================================================================ */
.sp-seo-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.sp-seo-badge--good  { background: rgba(34,197,94,.12); color: #16a34a; }
.sp-seo-badge--ok    { background: rgba(245,158,11,.12); color: #d97706; }
.sp-seo-badge--low   { background: rgba(239,68,68,.12); color: #dc2626; }
.sp-seo-badge-kw     { font-size: 11px; color: var(--sp-text-muted); }

[data-theme="dark"] .sp-seo-badge--good  { background: rgba(34,197,94,.18); color: #4ade80; }
[data-theme="dark"] .sp-seo-badge--ok    { background: rgba(245,158,11,.18); color: #fbbf24; }
[data-theme="dark"] .sp-seo-badge--low   { background: rgba(239,68,68,.18); color: #f87171; }

/* ================================================================
   AI MODEL SELECT ROW + FILTER HINT (class-ai-settings-page.php)
   ================================================================ */
.sp-model-select-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.sp-ai-model-select  { flex: 1 1 220px; min-width: 200px; max-width: 320px; }
.sp-ai-model-custom  { flex: 1 1 200px; min-width: 180px; }

/* Narrow containers (the AI Provider card has a label gutter): stack the
   model dropdown and the custom-ID input so neither gets truncated. */
@media (max-width: 1100px) {
    .sp-model-select-row { flex-direction: column; align-items: stretch; }
    .sp-ai-model-select,
    .sp-ai-model-custom { max-width: none; width: 100%; }
}
.sp-ai-input-wordcount { max-width: 110px; }
.sp-ai-actions-section--flush { padding-bottom: 0; margin-bottom: 0; }
.sp-filter-hint { font-size: 12px; color: var(--sp-text-muted); }

/* ================================================================
   AI PROGRESS LOG HEADER (class-ai-settings-page.php)
   ================================================================ */
.sp-progress-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--sp-border);
    padding-bottom: 8px;
    margin-bottom: 10px;
}
.sp-progress-log-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-text-strong);
}
.sp-progress-log-count {
    font-size: 12px;
    color: var(--sp-text-muted);
    background: var(--sp-bg);
    padding: 2px 8px;
    border-radius: 12px;
}
.sp-progress-log-list {
    margin: 0;
    max-height: 250px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.5;
    list-style-type: none;
    padding-left: 0;
}

/* ================================================================
   PROGRESS PANEL HEADER ACTIONS (class-ai-settings-page.php)
   ================================================================ */
.sp-progress-panel__header-actions {
    display: flex;
    gap: 8px;
}

/* ================================================================
   RETRY BUTTON (class-ai-settings-page.php)
   ================================================================ */
.sp-progress-panel__retry {
    background: var(--sp-amber, #f59e0b);
    color: #fff;
    border: none;
    padding: 4px 10px;
    border-radius: var(--sp-radius-sm, 6px);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    transition: opacity .15s;
}
.sp-progress-panel__retry:hover { opacity: .85; }

/* ================================================================
   LOCK BADGE — SVG variant (class-ai-settings-page.php)
   ================================================================ */
.waiseo-lock-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--sp-text-muted);
    background: var(--sp-bg);
    border: 1px solid var(--sp-border);
    border-radius: 20px;
    padding: 1px 7px 1px 5px;
    vertical-align: middle;
    line-height: 1.4;
}
.waiseo-lock-badge svg { flex-shrink: 0; }

/* ================================================================
   CONNECT NOTICE (class-connect.php) — replaces all inline styles
   ================================================================ */
.waiseo-connect-notice {
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 14px;
    border-width: 1.5px;
    border-style: solid;
    padding: 14px 18px;
    margin: 16px 20px 0;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    position: relative;
}
.waiseo-connect-notice--success { background: #F0FDF4; border-color: #86EFAC; }
.waiseo-connect-notice--error   { background: #FEF2F2; border-color: #FCA5A5; }
.waiseo-connect-notice--warning { background: #FFFBEB; border-color: #FCD34D; }
.waiseo-connect-notice--info    { background: #EFF6FF; border-color: #93C5FD; }

.waiseo-connect-notice__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}
.waiseo-connect-notice--success .waiseo-connect-notice__icon { background: #22C55E; }
.waiseo-connect-notice--error   .waiseo-connect-notice__icon { background: #EF4444; }
.waiseo-connect-notice--warning .waiseo-connect-notice__icon { background: #F59E0B; }
.waiseo-connect-notice--info    .waiseo-connect-notice__icon { background: #146EF5; }

.waiseo-connect-notice__text {
    flex: 1;
    font-size: 13.5px;
    line-height: 1.5;
}
.waiseo-connect-notice--success .waiseo-connect-notice__text { color: #166534; }
.waiseo-connect-notice--error   .waiseo-connect-notice__text { color: #991B1B; }
.waiseo-connect-notice--warning .waiseo-connect-notice__text { color: #78350F; }
.waiseo-connect-notice--info    .waiseo-connect-notice__text { color: #1E3A8A; }

.waiseo-connect-notice__dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    opacity: .6;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    transition: opacity .15s;
}
.waiseo-connect-notice__dismiss:hover { opacity: 1; }
.waiseo-connect-notice--success .waiseo-connect-notice__dismiss { color: #166534; }
.waiseo-connect-notice--error   .waiseo-connect-notice__dismiss { color: #991B1B; }
.waiseo-connect-notice--warning .waiseo-connect-notice__dismiss { color: #78350F; }
.waiseo-connect-notice--info    .waiseo-connect-notice__dismiss { color: #1E3A8A; }

[data-theme="dark"] .waiseo-connect-notice--success { background: rgba(34,197,94,.08);  border-color: rgba(34,197,94,.3); }
[data-theme="dark"] .waiseo-connect-notice--error   { background: rgba(239,68,68,.08);  border-color: rgba(239,68,68,.3); }
[data-theme="dark"] .waiseo-connect-notice--warning { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.3); }
[data-theme="dark"] .waiseo-connect-notice--info    { background: rgba(20,110,245,.08); border-color: rgba(20,110,245,.3); }
[data-theme="dark"] .waiseo-connect-notice--success .waiseo-connect-notice__text,
[data-theme="dark"] .waiseo-connect-notice--success .waiseo-connect-notice__dismiss { color: #4ade80; }
[data-theme="dark"] .waiseo-connect-notice--error   .waiseo-connect-notice__text,
[data-theme="dark"] .waiseo-connect-notice--error   .waiseo-connect-notice__dismiss { color: #f87171; }
[data-theme="dark"] .waiseo-connect-notice--warning .waiseo-connect-notice__text,
[data-theme="dark"] .waiseo-connect-notice--warning .waiseo-connect-notice__dismiss { color: #fbbf24; }
[data-theme="dark"] .waiseo-connect-notice--info    .waiseo-connect-notice__text,
[data-theme="dark"] .waiseo-connect-notice--info    .waiseo-connect-notice__dismiss { color: #93c5fd; }

/* ================================================================
   AI SETTINGS — settings sections use .sp-card as a FULL-WIDTH
   vertical section (not a horizontal stat card). Scoped to the
   settings form so dashboard stat cards keep their row layout.
   ================================================================ */
#sp-ai-settings-form .sp-card {
    display: block;          /* override the flex row used by stat cards */
    align-items: stretch;
    padding: 0;              /* header/body provide their own padding */
    margin-bottom: 20px;
    overflow: visible;
}

#sp-ai-settings-form .sp-card:hover {
    transform: none;         /* sections shouldn't lift on hover like stat cards */
}

#sp-ai-settings-form .sp-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--sp-border);
    margin: 0;
}

#sp-ai-settings-form .sp-card-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--sp-text);
    text-transform: none;
    letter-spacing: 0;
}

#sp-ai-settings-form .sp-card-body {
    display: block;
    width: 100%;
    padding: 22px 24px;
}

/* Each field gets comfortable vertical rhythm. */
#sp-ai-settings-form .sp-field {
    margin-bottom: 18px;
}
#sp-ai-settings-form .sp-field:last-child {
    margin-bottom: 0;
}

#sp-ai-settings-form .sp-field-label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--sp-text);
    margin-bottom: 7px;
}

#sp-ai-settings-form .sp-field-desc {
    font-size: 12.5px;
    color: var(--sp-text-muted);
    margin: 7px 0 0;
    line-height: 1.5;
}

/* Inputs/selects fill the available width within the section. */
#sp-ai-settings-form .sp-input,
#sp-ai-settings-form .sp-select,
#sp-ai-settings-form select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    background: var(--sp-surface);
    color: var(--sp-text);
    font-size: 14px;
}

/* Toggle rows stay horizontal: switch on the left, label + desc on the right. */
#sp-ai-settings-form .sp-field-toggle {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
#sp-ai-settings-form .sp-field-toggle .sp-field-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
#sp-ai-settings-form .sp-field-toggle .sp-field-label {
    margin-bottom: 0;
}

/* API key row: input grows, eye + Test buttons sit beside it and wrap gracefully. */
#sp-ai-settings-form .sp-input-group {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}
#sp-ai-settings-form .sp-input-group .sp-input {
    flex: 1 1 280px;
    min-width: 220px;
}
#sp-ai-settings-form .sp-input-group .sp-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--sp-border);
    background: var(--sp-surface);
    color: var(--sp-text);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
#sp-ai-settings-form .sp-input-group .sp-btn:hover {
    border-color: var(--sp-primary);
}
#sp-ai-settings-form .sp-input-group .sp-btn-icon {
    padding: 10px 12px;
}
#sp-ai-settings-form .sp-input-group .sp-btn-outline {
    border-color: var(--sp-primary);
    color: var(--sp-primary);
}
#sp-ai-settings-form .sp-input-group .sp-btn-outline:hover {
    background: var(--sp-primary);
    color: #fff;
}

/* Test result banner spacing. */
#sp-ai-settings-form .sp-ai-test-result {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
}
#sp-ai-settings-form .sp-ai-test-result.sp-ai-test-success {
    background: rgba(16,185,129,.1);
    color: #065F46;
}
#sp-ai-settings-form .sp-ai-test-result.sp-ai-test-error {
    background: rgba(239,68,68,.08);
    color: #991B1B;
}

/* Collapsible Advanced Settings header should look clickable. */
#sp-ai-settings-form .sp-card-toggle {
    cursor: pointer;
    justify-content: space-between;
}
#sp-ai-settings-form .sp-card-toggle .sp-card-chevron {
    transition: transform .2s ease;
}
#sp-ai-settings-form .sp-card-toggle.sp-card-open .sp-card-chevron {
    transform: rotate(180deg);
}