.seo-editor-card {
            background: linear-gradient(135deg, #1f2937, #374151);
            border: 1px solid #4b5563;
            transition: all 0.3s ease;
        }

        .seo-editor-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
        }

        .comparison-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .old-value {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        .new-value {
            background: rgba(34, 197, 94, 0.1);
            border: 1px solid rgba(34, 197, 94, 0.3);
        }

        .tab-active {
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            color: white;
            border-color: #3b82f6;
        }
        .tab-panel {
            animation: fadeIn 0.3s ease-in;
        }

        .tab-panel.hidden {
            display: none;
        }
        .tab-inactive {
            background: rgba(31, 41, 55, 0.5);
            color: #9ca3af;
            border: 1px solid transparent;
        }

        .tab-inactive:hover {
            background: rgba(55, 65, 81, 0.7);
            color: #e5e7eb;
        }

        .suggestion-highlight {
            background: rgba(251, 191, 36, 0.2);
            border: 1px solid rgba(251, 191, 36, 0.5);
            animation: pulse 2s infinite;
        }

        .ai-thinking {
            animation: thinking 1.5s ease-in-out infinite;
        }

        @keyframes thinking {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .editor-panel {
            background: rgba(17, 24, 39, 0.8);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(75, 85, 99, 0.3);
        }

        .meta-input {
            background: rgba(31, 41, 55, 0.8);
            border: 1px solid rgba(75, 85, 99, 0.5);
            transition: all 0.3s ease;
        }

        .meta-input:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .validation-success {
            border-color: #10b981;
            background: rgba(16, 185, 129, 0.1);
        }

        .validation-warning {
            border-color: #f59e0b;
            background: rgba(245, 158, 11, 0.1);
        }

        .validation-error {
            border-color: #ef4444;
            background: rgba(239, 68, 68, 0.1);
        }

        .character-count {
            font-size: 0.75rem;
            color: #9ca3af;
        }

        .character-count.warning {
            color: #f59e0b;
        }

        .character-count.error {
            color: #ef4444;
        }

        .ai-suggestion {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
            border: 1px solid rgba(59, 130, 246, 0.3);
            animation: suggestion-appear 0.5s ease-out;
        }

        @keyframes suggestion-appear {
            0% {
                opacity: 0;
                transform: translateY(10px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .preview-panel {
            background: white;
            color: #1f2937;
            border-radius: 8px;
            padding: 1rem;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .search-result-preview {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .search-title {
            color: #1a0dab;
            font-size: 1.1rem;
            font-weight: 400;
            text-decoration: none;
            margin-bottom: 0.25rem;
            display: block;
        }

        .search-url {
            color: #006621;
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }

        .search-description {
            color: #545454;
            font-size: 0.9rem;
            line-height: 1.4;
        }

        .collapsible-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .collapsible-content.open {
            max-height: 1000px;
        }

        .rotate-180 {
            transform: rotate(180deg);
        }

        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .loading-dots::after {
            content: '';
            animation: loading 1.5s infinite;
        }

        @keyframes loading {
            0%, 20% { content: ''; }
            40% { content: '.'; }
            60% { content: '..'; }
            80%, 100% { content: '...'; }
        }

        /* New Feature Styles */
        .serp-device-btn {
            transition: all 0.2s ease;
        }
        
        .serp-device-btn.active {
            background: #3b82f6 !important;
            color: white !important;
        }
        
        .search-result-title {
            font-size: 18px;
            line-height: 1.2;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .search-result-description {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .keyword-suggestion-item {
            background: rgba(234, 179, 8, 0.1);
            border: 1px solid rgba(234, 179, 8, 0.3);
            border-radius: 6px;
            padding: 12px;
            transition: all 0.2s ease;
        }
        
        .keyword-suggestion-item:hover {
            background: rgba(234, 179, 8, 0.2);
            transform: translateY(-1px);
        }

        .image-alt-item {
            background: rgba(236, 72, 153, 0.1);
            border: 1px solid rgba(236, 72, 153, 0.3);
            border-radius: 6px;
            padding: 12px;
            display: flex;
            gap: 12px;
            align-items: center;
            transition: all 0.2s ease;
        }
        
        .image-alt-item:hover {
            background: rgba(236, 72, 153, 0.2);
            transform: translateY(-1px);
        }
        
        .image-alt-item img {
            width: 80px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
        }

        .link-suggestion-item {
            background: rgba(6, 182, 212, 0.1);
            border: 1px solid rgba(6, 182, 212, 0.3);
            border-radius: 6px;
            padding: 12px;
            transition: all 0.2s ease;
        }
        
        .link-suggestion-item:hover {
            background: rgba(6, 182, 212, 0.2);
            transform: translateY(-1px);
        }

        .score-change-indicator {
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 10px;
            font-weight: 600;
        }
        
        .score-increase {
            background: rgba(34, 197, 94, 0.2);
            color: #22c55e;
        }
        
        .score-decrease {
            background: rgba(239, 68, 68, 0.2);
            color: #ef4444;
        }

        .rich-snippet {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            padding: 8px;
            border-radius: 4px;
            font-size: 12px;
            color: #666;
        }
        
        .rating-stars {
            color: #ffa500;
        }

        /* Mobile SERP adjustments */
        .mobile-serp .search-result-title {
            font-size: 16px;
        }
        
        .mobile-serp .search-result-description {
            font-size: 13px;
        }

        /* Loading animations */
        .loading-spinner {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        .page-info-badge {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2));
            border: 1px solid rgba(59, 130, 246, 0.4);
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        }