/**
 * Clarity SEO Admin Styles
 * Premium admin interface design
 *
 * @package Clarity_SEO
 * @since 2.3.0
 */

/* ============================================
   VARIABLES & BASE
   ============================================ */
:root {
    --clarity-purple: #6366F1;
    --clarity-purple-dark: #4F46E5;
    --clarity-purple-light: #A5B4FC;
    --clarity-purple-bg: #EEF2FF;
    --clarity-white: #FFFFFF;
    --clarity-gray-50: #F9FAFB;
    --clarity-gray-100: #F3F4F6;
    --clarity-gray-200: #E5E7EB;
    --clarity-gray-300: #D1D5DB;
    --clarity-gray-600: #4B5563;
    --clarity-gray-700: #374151;
    --clarity-gray-900: #111827;
    --clarity-green: #10B981;
    --clarity-orange: #F59E0B;
    --clarity-red: #EF4444;
    --clarity-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --clarity-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ============================================
   MAIN WRAPPER
   ============================================ */
.clarity-seo-wrap {
    margin: 0 0 0 -20px;
    background: var(--clarity-gray-50);
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ============================================
   HEADER
   ============================================ */
.clarity-header {
    background: var(--clarity-white);
    border-bottom: 1px solid var(--clarity-gray-200);
    padding: 24px 32px;
    margin-bottom: 32px;
}

.clarity-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.clarity-logo {
    display: flex;
    align-items: center;
    gap: 16px;
}

.clarity-logo svg {
    width: 40px;
    height: 40px;
}

.clarity-logo h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--clarity-gray-900);
    line-height: 1;
}

.clarity-version {
    display: flex;
    align-items: center;
    gap: 12px;
}

.version-badge {
    background: var(--clarity-purple-bg);
    color: var(--clarity-purple);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

.pluginjoy-link {
    color: var(--clarity-gray-600);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.pluginjoy-link:hover {
    color: var(--clarity-purple);
}

.pluginjoy-link strong {
    color: var(--clarity-purple);
    font-weight: 600;
}

/* ============================================
   CONTAINER
   ============================================ */
.clarity-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px 32px;
}

/* ============================================
   CARDS
   ============================================ */
.clarity-card {
    background: var(--clarity-white);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--clarity-shadow);
    margin-bottom: 24px;
}

.clarity-card h2 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--clarity-gray-900);
}

.clarity-card h3 {
    margin: 0 0 16px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--clarity-gray-900);
}

.clarity-card p {
    margin: 0;
    color: var(--clarity-gray-600);
    font-size: 14px;
    line-height: 1.6;
}

/* Welcome Card */
.clarity-welcome {
    background: linear-gradient(135deg, var(--clarity-purple) 0%, var(--clarity-purple-dark) 100%);
    color: var(--clarity-white);
}

.clarity-welcome h2 {
    color: var(--clarity-white);
}

.clarity-welcome p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    margin-bottom: 24px;
}

/* ============================================
   QUICK ACTIONS
   ============================================ */
.clarity-quick-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.clarity-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.clarity-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.clarity-btn-primary {
    background: var(--clarity-white);
    color: var(--clarity-purple);
}

.clarity-btn-primary:hover {
    background: var(--clarity-gray-50);
    transform: translateY(-2px);
    box-shadow: var(--clarity-shadow-lg);
}

.clarity-btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: var(--clarity-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.clarity-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

/* ============================================
   STATS GRID
   ============================================ */
.clarity-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.clarity-stat-card {
    background: var(--clarity-white);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--clarity-shadow);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s;
}

.clarity-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--clarity-shadow-lg);
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
}

.stat-icon-posts {
    background: var(--clarity-purple-bg);
    color: var(--clarity-purple);
}

.stat-icon-pages {
    background: #DBEAFE;
    color: #2563EB;
}

.stat-icon-404 {
    background: #FEF3C7;
    color: var(--clarity-orange);
}

.stat-icon-recent {
    background: #D1FAE5;
    color: var(--clarity-green);
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--clarity-gray-900);
    line-height: 1;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 13px;
    color: var(--clarity-gray-600);
    font-weight: 500;
}

/* ============================================
   TWO COLUMN LAYOUT
   ============================================ */
.clarity-two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

/* ============================================
   FEATURE LIST
   ============================================ */
.clarity-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.clarity-feature-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--clarity-gray-100);
    color: var(--clarity-gray-700);
    font-size: 14px;
}

.clarity-feature-list li:last-child {
    border-bottom: none;
}

.clarity-feature-list .dashicons {
    color: var(--clarity-green);
    font-size: 20px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ============================================
   LINKS
   ============================================ */
.clarity-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.clarity-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--clarity-gray-50);
    border-radius: 8px;
    color: var(--clarity-gray-700);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
    border: 1px solid var(--clarity-gray-200);
}

.clarity-link:hover {
    background: var(--clarity-purple-bg);
    border-color: var(--clarity-purple-light);
    color: var(--clarity-purple);
}

.clarity-link .dashicons {
    color: var(--clarity-purple);
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* ============================================
   FOOTER
   ============================================ */
.clarity-footer {
    text-align: center;
    background: var(--clarity-gray-50);
    border: none;
}

.clarity-footer p {
    margin: 0;
    color: var(--clarity-gray-600);
}

.clarity-footer a {
    color: var(--clarity-purple);
    text-decoration: none;
    font-weight: 500;
}

.clarity-footer a:hover {
    text-decoration: underline;
}

.clarity-footer .separator {
    margin: 0 12px;
    color: var(--clarity-gray-300);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
    .clarity-two-col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 782px) {
    .clarity-seo-wrap {
        margin-left: 0;
    }
    
    .clarity-header {
        padding: 16px 20px;
        margin-bottom: 20px;
    }
    
    .clarity-header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .clarity-container {
        padding: 0 20px 20px;
    }
    
    .clarity-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .clarity-quick-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .clarity-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   MENU ICON STYLING
   ============================================ */
#adminmenu #toplevel_page_clarity-seo .wp-menu-image img {
    width: 20px;
    height: 20px;
    padding: 6px 0;
}

#adminmenu #toplevel_page_clarity-seo:hover .wp-menu-image img,
#adminmenu #toplevel_page_clarity-seo.wp-has-current-submenu .wp-menu-image img {
    opacity: 1;
}

/* ============================================
   PRO BUTTON STYLES
   ============================================ */
.clarity-btn-pro {
    background: rgba(245, 158, 11, 0.2);
    color: #F59E0B !important;
    border: 1px solid rgba(245, 158, 11, 0.4);
    font-weight: 600;
}

.clarity-btn-pro:hover {
    background: rgba(245, 158, 11, 0.3);
    border-color: #F59E0B;
    color: #D97706 !important;
}

.clarity-btn-upgrade {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: #FFFFFF !important;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    border: none;
}

.clarity-btn-upgrade:hover {
    background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
    color: #FFFFFF !important;
}

.clarity-btn-lg {
    padding: 16px 36px;
    font-size: 16px;
}

/* ============================================
   PRO BADGE
   ============================================ */
.pro-badge {
    display: inline-block;
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.pro-badge-header {
    display: inline-block;
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 6px;
    margin-left: 8px;
    vertical-align: middle;
}

/* ============================================
   PRO TEASER CARD (Dashboard)
   ============================================ */
.clarity-pro-teaser {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border: 1px solid #FDE68A;
    padding: 0;
}

.pro-teaser-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
}

.pro-teaser-text h3 {
    margin: 8px 0 6px 0;
    font-size: 18px;
    color: #92400E;
}

.pro-teaser-text p {
    margin: 0;
    color: #A16207;
    font-size: 14px;
}

.pro-teaser-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pro-learn-more {
    color: #B45309;
    font-size: 13px;
    text-decoration: none;
    font-weight: 500;
}

.pro-learn-more:hover {
    color: #92400E;
    text-decoration: underline;
}

/* ============================================
   PRO HERO (Pro Page)
   ============================================ */
.clarity-pro-hero {
    background: linear-gradient(135deg, #6366F1 0%, #4338CA 100%);
    color: #FFFFFF;
    text-align: center;
    padding: 48px 32px;
}

.clarity-pro-hero h2 {
    color: #FFFFFF;
    font-size: 32px;
    margin: 0 0 12px 0;
}

.clarity-pro-hero p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    max-width: 640px;
    margin: 0 auto 28px auto;
    line-height: 1.6;
}

.pro-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.pro-hero-price {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
}

/* ============================================
   PRO COMPARISON TABLE
   ============================================ */
.clarity-pro-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    font-size: 14px;
}

.clarity-pro-table thead th {
    background: var(--clarity-gray-50);
    padding: 16px 20px;
    text-align: left;
    font-weight: 600;
    color: var(--clarity-gray-700);
    border-bottom: 2px solid var(--clarity-gray-200);
}

.clarity-pro-table .feature-col {
    width: 50%;
}

.clarity-pro-table .plan-col {
    width: 25%;
    text-align: center;
}

.clarity-pro-table .plan-pro {
    background: #FFFBEB;
    color: #92400E;
    font-weight: 700;
}

.clarity-pro-table tbody td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--clarity-gray-100);
    color: var(--clarity-gray-700);
    vertical-align: middle;
}

.clarity-pro-table tbody td.check {
    text-align: center;
    font-size: 14px;
}

.clarity-pro-table tbody td small {
    display: block;
    color: var(--clarity-gray-600);
    font-size: 12px;
    margin-top: 2px;
}

.clarity-pro-table .section-header td {
    background: var(--clarity-gray-50);
    font-weight: 700;
    font-size: 15px;
    color: var(--clarity-gray-900);
    padding: 14px 20px;
    border-bottom: 1px solid var(--clarity-gray-200);
}

.clarity-pro-table tbody tr:hover {
    background: #FAFAFA;
}

.clarity-pro-table tbody tr.section-header:hover {
    background: var(--clarity-gray-50);
}

/* ============================================
   PRO PRICING CARDS
   ============================================ */
.clarity-pro-cta {
    padding: 40px 32px;
}

.pro-pricing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}

.pro-pricing-card {
    background: var(--clarity-white);
    border: 2px solid var(--clarity-gray-200);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.2s;
    position: relative;
}

.pro-pricing-card:hover {
    border-color: var(--clarity-purple-light);
    transform: translateY(-4px);
    box-shadow: var(--clarity-shadow-lg);
}

.pro-pricing-featured {
    border-color: #F59E0B;
    background: #FFFBEB;
}

.pro-pricing-featured:hover {
    border-color: #D97706;
}

.pricing-popular {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.pricing-header {
    font-size: 18px;
    font-weight: 700;
    color: var(--clarity-gray-900);
    margin-bottom: 8px;
}

.pricing-price {
    font-size: 48px;
    font-weight: 800;
    color: var(--clarity-purple);
    line-height: 1;
    margin-bottom: 24px;
}

.pricing-price span {
    font-size: 16px;
    font-weight: 500;
    color: var(--clarity-gray-600);
}

.pricing-features {
    list-style: none;
    margin: 0 0 24px 0;
    padding: 0;
    text-align: left;
}

.pricing-features li {
    padding: 8px 0;
    font-size: 14px;
    color: var(--clarity-gray-700);
    border-bottom: 1px solid var(--clarity-gray-100);
}

.pricing-features li:last-child {
    border-bottom: none;
}

.pro-pricing-card .clarity-btn-upgrade {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
}

/* ============================================
   RESPONSIVE PRO
   ============================================ */
@media (max-width: 782px) {
    .pro-teaser-content {
        flex-direction: column;
        text-align: center;
    }

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

    .clarity-pro-hero h2 {
        font-size: 24px;
    }

    .clarity-pro-table .feature-col {
        width: 40%;
    }

    .clarity-pro-table .plan-col {
        width: 30%;
    }

    .clarity-pro-table tbody td,
    .clarity-pro-table thead th {
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* ============================================
   WIZARD STYLING
   ============================================ */
.clarity-wizard-wrap .clarity-container {
    max-width: 900px;
}

.clarity-wizard-card {
    padding: 48px !important;
}

.wizard-intro {
    margin-bottom: 48px;
    text-align: center;
}

.wizard-intro h2 {
    font-size: 32px !important;
    font-weight: 700 !important;
    margin: 0 0 16px 0 !important;
    color: var(--clarity-gray-900) !important;
}

.wizard-intro p {
    font-size: 16px !important;
    color: var(--clarity-gray-600) !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

.clarity-wizard-form {
    margin-top: 0 !important;
}

.wizard-section {
    background: var(--clarity-gray-50) !important;
    border-radius: 16px !important;
    padding: 40px !important;
    margin-bottom: 32px !important;
    border: 2px solid var(--clarity-gray-100) !important;
}

.wizard-section:last-of-type {
    margin-bottom: 0 !important;
}

.wizard-section-title {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 0 36px 0 !important;
    padding: 0 0 24px 0 !important;
    border-bottom: 2px solid var(--clarity-gray-200) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--clarity-gray-900) !important;
}

.wizard-section-title .dashicons {
    font-size: 28px !important;
    width: 28px !important;
    height: 28px !important;
    color: var(--clarity-purple) !important;
}

.wizard-field {
    margin-bottom: 32px !important;
}

.wizard-field:last-child {
    margin-bottom: 0 !important;
}

.wizard-label {
    display: block !important;
    font-weight: 600 !important;
    color: var(--clarity-gray-900) !important;
    margin: 0 0 12px 0 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
}

.wizard-input,
.wizard-textarea,
.wizard-select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 18px !important;
    border: 2px solid var(--clarity-gray-300) !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    transition: all 0.2s !important;
    background: var(--clarity-white) !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
    color: var(--clarity-gray-900) !important;
}

.wizard-input:focus,
.wizard-textarea:focus,
.wizard-select:focus {
    outline: none !important;
    border-color: var(--clarity-purple) !important;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15) !important;
}

.wizard-textarea {
    resize: vertical !important;
    min-height: 120px !important;
    line-height: 1.6 !important;
}

.wizard-select {
    cursor: pointer !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234B5563' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    padding-right: 48px !important;
}

.wizard-help {
    display: block !important;
    color: var(--clarity-gray-600) !important;
    font-size: 14px !important;
    margin: 10px 0 0 0 !important;
    line-height: 1.5 !important;
    font-style: normal !important;
}

.wizard-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    margin-bottom: 32px !important;
}

.wizard-row:last-child {
    margin-bottom: 0 !important;
}

.wizard-row .wizard-field {
    margin-bottom: 0 !important;
}

.wizard-submit {
    margin-top: 56px !important;
    padding-top: 56px !important;
    border-top: 3px solid var(--clarity-gray-200) !important;
    text-align: center !important;
}

.wizard-submit .clarity-btn-upgrade {
    min-width: 280px !important;
    padding: 18px 40px !important;
    font-size: 16px !important;
}

@media (max-width: 782px) {
    .clarity-wizard-card {
        padding: 32px 24px !important;
    }
    
    .wizard-intro h2 {
        font-size: 26px !important;
    }
    
    .wizard-row {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    
    .wizard-section {
        padding: 28px 24px !important;
    }
    
    .wizard-field {
        margin-bottom: 28px !important;
    }
    
    .wizard-section-title {
        font-size: 20px !important;
        margin-bottom: 28px !important;
    }
    
    .wizard-section-title .dashicons {
        font-size: 26px !important;
        width: 26px !important;
        height: 26px !important;
    }
    
    .wizard-submit {
        margin-top: 48px !important;
        padding-top: 48px !important;
    }
    
    .wizard-submit .clarity-btn-upgrade {
        width: 100% !important;
    }
}

/* ============================================
   SETTINGS PAGE STYLING
   ============================================ */
.clarity-settings-wrap .clarity-container {
    max-width: 1000px;
}

.clarity-settings-section {
    background: var(--clarity-white) !important;
    border-radius: 16px !important;
    padding: 40px !important;
    margin-bottom: 28px !important;
    box-shadow: var(--clarity-shadow) !important;
    border: 2px solid var(--clarity-gray-100) !important;
}

.clarity-settings-section h2 {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 0 32px 0 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--clarity-gray-900) !important;
    padding-bottom: 24px !important;
    border-bottom: 2px solid var(--clarity-gray-100) !important;
}

.clarity-settings-section h2 .dashicons {
    color: var(--clarity-purple) !important;
    font-size: 28px !important;
    width: 28px !important;
    height: 28px !important;
}

.clarity-settings-section .section-description {
    color: var(--clarity-gray-600) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: -12px 0 28px 0 !important;
}

/* Override WordPress form-table completely */
.clarity-settings-wrap .form-table {
    display: none !important;
}

/* Custom settings fields */
.settings-field {
    margin-bottom: 28px !important;
}

.settings-field:last-child {
    margin-bottom: 0 !important;
}

.settings-label {
    display: block !important;
    font-weight: 600 !important;
    color: var(--clarity-gray-900) !important;
    margin: 0 0 12px 0 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
}

.settings-input,
.settings-textarea,
.settings-select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 18px !important;
    border: 2px solid var(--clarity-gray-300) !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    transition: all 0.2s !important;
    background: var(--clarity-white) !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
    color: var(--clarity-gray-900) !important;
}

.settings-input:focus,
.settings-textarea:focus,
.settings-select:focus {
    outline: none !important;
    border-color: var(--clarity-purple) !important;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15) !important;
}

.settings-textarea {
    resize: vertical !important;
    min-height: 100px !important;
    line-height: 1.6 !important;
}

.settings-select {
    cursor: pointer !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234B5563' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    padding-right: 48px !important;
}

.settings-help {
    display: block !important;
    color: var(--clarity-gray-600) !important;
    font-size: 14px !important;
    margin: 10px 0 0 0 !important;
    line-height: 1.5 !important;
}

.settings-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    margin-bottom: 28px !important;
}

.settings-row:last-child {
    margin-bottom: 0 !important;
}

.settings-row .settings-field {
    margin-bottom: 0 !important;
}

/* Toggle group for schema settings */
.settings-toggle-group {
    background: var(--clarity-gray-50) !important;
    border-radius: 10px !important;
    padding: 20px !important;
    border: 1px solid var(--clarity-gray-200) !important;
}

.settings-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--clarity-gray-200) !important;
}

.settings-toggle:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.settings-toggle:first-child {
    padding-top: 0 !important;
}

.settings-toggle label {
    font-weight: 500 !important;
    color: var(--clarity-gray-700) !important;
    font-size: 14px !important;
    margin: 0 !important;
}

.settings-select-inline {
    padding: 8px 36px 8px 12px !important;
    border: 2px solid var(--clarity-gray-300) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    background: var(--clarity-white) !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%234B5563' d='M5 7L1 3h8z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    min-width: 80px !important;
}

.settings-select-inline:focus {
    outline: none !important;
    border-color: var(--clarity-purple) !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

@media (max-width: 782px) {
    .clarity-settings-section {
        padding: 28px 24px !important;
    }
    
    .settings-row {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    
    .clarity-settings-section h2 {
        font-size: 20px !important;
    }
    
    .clarity-settings-section h2 .dashicons {
        font-size: 26px !important;
        width: 26px !important;
        height: 26px !important;
    }
}

@media (max-width: 900px) {
    /* Redirect and Bulk Replace responsive */
    .clarity-settings-section div[style*="grid-template-columns: 1fr auto 1fr auto"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }
    
    .clarity-settings-section div[style*="grid-template-columns: 1fr auto 1fr auto"] > span {
        display: none !important;
    }
    
    .clarity-settings-section div[style*="grid-template-columns: 1fr auto 1fr auto"] input[type="submit"] {
        margin-top: 8px !important;
        width: 100%;
    }
}

@media (max-width: 782px) {
    .clarity-settings-section {
        padding: 24px;
    }
    
    .clarity-settings-wrap .form-table {
        display: block;
    }
    
    .clarity-settings-wrap .form-table tr,
    .clarity-settings-wrap .form-table th,
    .clarity-settings-wrap .form-table td {
        display: block;
        width: 100%;
        padding: 12px 0;
    }
    
    .clarity-settings-wrap .form-table th {
        padding-bottom: 8px;
    }
    
    .clarity-settings-wrap .form-table td {
        padding-top: 0;
    }
    
    .clarity-settings-section h2 {
        font-size: 18px;
    }
    
    .clarity-settings-section h2 .dashicons {
        font-size: 22px;
        width: 22px;
        height: 22px;
    }
}



/* Clarity + SiteBirds companion page */
.clarity-sitebirds-page{margin:20px 0 0 -20px;background:linear-gradient(180deg,#f8fafc 0%,#eef2ff 100%);min-height:calc(100vh - 32px);}
.clarity-sitebirds-shell{max-width:1120px;margin:0 auto;padding:32px;}
.clarity-sitebirds-hero,.clarity-sitebirds-card{background:#fff;border:1px solid #e5e7eb;border-radius:24px;box-shadow:0 10px 35px rgba(15,23,42,.06);}
.clarity-sitebirds-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(220px,.7fr);gap:24px;padding:36px;align-items:center;margin-bottom:24px;}
.clarity-sitebirds-kicker{display:inline-flex;align-items:center;gap:8px;background:#eef2ff;color:#4f46e5;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;margin-bottom:16px;}
.clarity-sitebirds-hero h1{font-size:34px;line-height:1.15;margin:0 0 14px;color:#111827;max-width:14ch;}
.clarity-sitebirds-hero p{font-size:16px;line-height:1.7;color:#4b5563;margin:0 0 20px;max-width:64ch;}
.clarity-sitebirds-actions,.clarity-sitebirds-card-footer{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.clarity-sitebirds-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;color:#4b5563;font-size:13px;}
.clarity-sitebirds-meta span{background:#f9fafb;border:1px solid #e5e7eb;border-radius:999px;padding:8px 12px;}
.clarity-sitebirds-hero-logo{display:flex;justify-content:center;align-items:center;}
.clarity-sitebirds-hero-logo svg{width:180px;height:180px;max-width:100%;filter:drop-shadow(0 20px 30px rgba(99,102,241,.22));}
.clarity-sitebirds-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-bottom:24px;}
.clarity-sitebirds-grid-tight{align-items:stretch;}
.clarity-sitebirds-card{padding:28px;display:flex;flex-direction:column;min-height:100%;}
.clarity-sitebirds-card-dark{background:linear-gradient(135deg,#111827 0%,#1f2937 100%);border-color:#111827;}
.clarity-sitebirds-card-accent{background:linear-gradient(180deg,#ffffff 0%,#f5f3ff 100%);border-color:#c7d2fe;}
.clarity-sitebirds-card-head{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;margin-bottom:16px;}
.clarity-sitebirds-card-head h2{margin:0;font-size:22px;line-height:1.25;color:#111827;}
.clarity-sitebirds-card-dark .clarity-sitebirds-card-head h2,.clarity-sitebirds-card-dark .clarity-sitebirds-list li{color:#fff;}
.clarity-sitebirds-pill{display:inline-flex;align-items:center;background:#f3f4f6;color:#111827;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:700;white-space:nowrap;}
.clarity-sitebirds-pill-dark{background:rgba(255,255,255,.12);color:#fff;}
.clarity-sitebirds-score{display:inline-flex;align-items:center;justify-content:center;background:#6366f1;color:#fff;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:700;white-space:nowrap;}
.clarity-sitebirds-list{display:grid;gap:12px;list-style:none;padding:0;margin:0;}
.clarity-sitebirds-list li{position:relative;padding-left:28px;color:#374151;line-height:1.6;font-size:15px;}
.clarity-sitebirds-list li:before{content:"";position:absolute;left:0;top:8px;width:12px;height:12px;border-radius:999px;background:#6366f1;box-shadow:0 0 0 4px rgba(99,102,241,.12);}
.clarity-sitebirds-list-dark li:before{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.15);}
.clarity-sitebirds-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:8px 0 18px;}
.clarity-sitebirds-stats div{background:#fff;border:1px solid #dbeafe;border-radius:18px;padding:18px 16px;}
.clarity-sitebirds-stats strong{display:block;font-size:26px;color:#111827;line-height:1.1;margin-bottom:6px;}
.clarity-sitebirds-stats span{display:block;color:#4b5563;font-size:13px;line-height:1.5;}
.clarity-sitebirds-table{width:100%;border-collapse:collapse;margin-top:8px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;}
.clarity-sitebirds-table th,.clarity-sitebirds-table td{padding:12px 14px;text-align:left;border-bottom:1px solid #e5e7eb;}
.clarity-sitebirds-table th{background:#f8fafc;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;}
.clarity-sitebirds-note{margin:8px 0 0;color:#4b5563;line-height:1.7;font-size:15px;}
.clarity-sitebirds-card-footer{margin-top:auto;padding-top:18px;}
.clarity-sitebirds-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:14px;font-weight:700;text-decoration:none;border:1px solid transparent;transition:all .18s ease;}
.clarity-sitebirds-btn-primary{background:#6366f1;color:#fff;}
.clarity-sitebirds-btn-primary:hover{background:#5558e8;color:#fff;transform:translateY(-1px);}
.clarity-sitebirds-btn-secondary{background:#111827;color:#fff;}
.clarity-sitebirds-btn-secondary:hover{background:#1f2937;color:#fff;}
.clarity-sitebirds-btn-ghost{background:#fff;color:#111827;border-color:#d1d5db;}
.clarity-sitebirds-btn-ghost:hover{background:#f9fafb;color:#111827;}
.clarity-sitebirds-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.clarity-sitebirds-steps div{display:flex;gap:12px;align-items:flex-start;background:#f9fafb;border:1px solid #e5e7eb;border-radius:18px;padding:18px;}
.clarity-sitebirds-steps strong{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:#111827;color:#fff;border-radius:999px;flex-shrink:0;}
.clarity-sitebirds-steps span{color:#374151;line-height:1.6;font-size:14px;}
.clarity-sitebirds-footer{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:12px 0 6px;color:#6b7280;font-size:13px;}
.clarity-sitebirds-footer a{color:#4f46e5;text-decoration:none;}
@media (max-width:900px){.clarity-sitebirds-hero,.clarity-sitebirds-grid,.clarity-sitebirds-steps,.clarity-sitebirds-stats{grid-template-columns:1fr;}.clarity-sitebirds-shell{padding:20px;}.clarity-sitebirds-hero h1{max-width:none;font-size:28px;}}

/* ============================================================
   Upgrade to Pro page (added 2.8.0)
   ============================================================ */
.clarity-pro-page{margin:20px 20px 40px 0;}
.clarity-pro-shell{max-width:1100px;background:linear-gradient(180deg,#eef2ff 0%,#f9fafb 60%);padding:32px;border-radius:24px;display:grid;gap:32px;}
.clarity-pro-hero{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;background:#fff;padding:32px;border-radius:20px;box-shadow:0 10px 30px rgba(99,102,241,0.08);border:1px solid #ede9fe;}
.clarity-pro-kicker{display:inline-block;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.clarity-pro-hero h1{margin:14px 0 12px;font-size:32px;line-height:1.2;color:#111827;max-width:620px;}
.clarity-pro-hero p{margin:0 0 22px;color:#4b5563;line-height:1.65;font-size:16px;max-width:620px;}
.clarity-pro-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.clarity-pro-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:12px;font-weight:600;text-decoration:none;border:1px solid transparent;transition:all .18s ease;font-size:14px;}
.clarity-pro-btn-primary{background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;box-shadow:0 4px 12px rgba(99,102,241,.25);}
.clarity-pro-btn-primary:hover{background:linear-gradient(135deg,#6d28d9,#9333ea);color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(99,102,241,.35);}
.clarity-pro-btn-ghost{background:#fff;color:#374151;border-color:#d1d5db;}
.clarity-pro-btn-ghost:hover{background:#f9fafb;color:#111827;border-color:#9ca3af;}
.clarity-pro-btn-large{padding:16px 32px;font-size:16px;}
.clarity-pro-meta{display:flex;gap:18px;flex-wrap:wrap;color:#6b7280;font-size:13px;}
.clarity-pro-section{background:#fff;padding:28px;border-radius:20px;border:1px solid #ede9fe;}
.clarity-pro-section h2{margin:0 0 22px;color:#111827;font-size:24px;}
.clarity-pro-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.clarity-pro-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.clarity-pro-card{background:#f9fafb;border:1px solid #e5e7eb;border-radius:16px;padding:22px;display:flex;flex-direction:column;}
.clarity-pro-card-accent{background:linear-gradient(135deg,#eef2ff,#f3e8ff);border-color:#ddd6fe;}
.clarity-pro-card header{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.clarity-pro-card h3{margin:0;color:#111827;font-size:18px;}
.clarity-pro-pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
.clarity-pro-pill-free{background:#e5e7eb;color:#374151;}
.clarity-pro-pill-pro{background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;}
.clarity-pro-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.clarity-pro-list li{position:relative;padding-left:24px;color:#374151;line-height:1.55;font-size:14px;}
.clarity-pro-list li:before{content:"✓";position:absolute;left:0;top:0;color:#10b981;font-weight:700;}
.clarity-pro-list-pro li:before{color:#6366f1;}
.clarity-pro-card-footer{margin-top:auto;padding-top:16px;}
.clarity-pro-cta{background:linear-gradient(135deg,#6366f1,#5b21b6);border-radius:24px;padding:48px 32px;text-align:center;color:#fff;}
.clarity-pro-cta h2{color:#fff;margin:0 0 14px;font-size:28px;}
.clarity-pro-cta p{color:#e9d5ff;margin:0 0 24px;font-size:16px;}
.clarity-pro-cta .clarity-pro-btn-primary{background:#fff;color:#6366f1;}
.clarity-pro-cta .clarity-pro-btn-primary:hover{background:#eef2ff;color:#5b21b6;}
.clarity-pro-companion{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;padding:18px 22px;border-radius:14px;border:1px solid #e5e7eb;flex-wrap:wrap;}
.clarity-pro-companion-text{display:flex;flex-direction:column;gap:2px;color:#374151;}
.clarity-pro-companion-text strong{color:#111827;font-size:14px;}
.clarity-pro-companion-text span{font-size:13px;color:#6b7280;}
.clarity-pro-footer{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:12px 0 6px;color:#6b7280;font-size:13px;}
.clarity-pro-footer a{color:#6366f1;text-decoration:none;}
@media (max-width:900px){.clarity-pro-hero,.clarity-pro-grid,.clarity-pro-grid-3{grid-template-columns:1fr;}.clarity-pro-shell{padding:20px;}.clarity-pro-hero h1{font-size:24px;}}

/* Pro Active state (added 2.8.2) */
.clarity-pro-active{background:linear-gradient(135deg,#dcfce7 0%,#f0fdf4 100%);border:1px solid #86efac !important;}
.clarity-pro-active h3{color:#065f46;}
.clarity-pro-badge-active{background:#10b981 !important;color:#fff !important;}