/* MinimalRank CSS - Clean & Professional */
:root {
    /* Primary Colors */
    --primary: black;
    --primary-dark: #000000;
    --primary-color: #6366f1;  /* Indigo for buttons/actions */
    --success: #00AA00;
    --danger: #CC0000;
    
    /* Text Colors - DRY principle */
    --text-primary: #111827;    /* Main text color */
    --text-secondary: #6b7280;  /* Secondary text */
    --text-muted: #9ca3af;      /* Muted text */
    
    /* Border Colors */
    --border-color: #e5e7eb;    /* Default borders */
    --border-light: #f3f4f6;    /* Light borders */
    --border-dark: #d1d5db;     /* Dark borders */
    
    /* Gray Scale */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: black;
    
    /* Component Specific - Tabs */
    --tab-color: var(--text-secondary);
    --tab-color-hover: var(--text-primary);
    --tab-color-active: var(--text-primary);
    --tab-border-active: var(--text-primary);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gray-900);
    background: var(--gray-50);
    margin: 0;
    padding: 0;
    padding-top: 0;
    min-height: 100vh;
}

/* Unified Form Controls - DRY & KISS */
.form-control {
    width: 100%;
    padding: 14px 16px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    color: var(--gray-900);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

/* Select specific styling */
select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* Input specific placeholder */
input.form-control::placeholder {
    color: var(--gray-400);
}

/* Hover & Focus states */
.form-control:hover {
    border-color: var(--gray-400);
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

/* Header */
.header {
    background: white;
    border-bottom: 1px solid var(--gray-200);
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 32px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 18px;
}

.logo svg {
    color: var(--primary);
}

.project-selector {
    position: relative;
}

.project-dropdown {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: white;
    cursor: pointer;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-dropdown:hover {
    background: white;
    border-color: var(--gray-400);
}

/* Project dropdown menu */
.project-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
}

.project-dropdown-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid var(--gray-100);
}

.project-dropdown-item:last-child {
    border-bottom: none;
}

.project-dropdown-item:hover {
    background: var(--gray-50);
}

.project-item-name {
    font-weight: 500;
    color: var(--gray-900);
    margin-bottom: 2px;
}

.project-item-domain {
    font-size: 12px;
    color: var(--gray-500);
}

.project-dropdown-item.new-project {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-weight: 500;
    border-top: 1px solid var(--gray-200);
    margin-top: 4px;
    padding-top: 16px;
}

.project-dropdown-item.new-project svg {
    width: 16px;
    height: 16px;
}

.main-nav {
    display: flex;
    gap: 4px;
}

.nav-item {
    padding: 8px 16px;
    text-decoration: none;
    color: var(--gray-600);
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.nav-item .material-symbols-outlined {
    font-size: 18px;
    vertical-align: middle;
}

.nav-item:hover {
    color: var(--gray-900);
    background: var(--gray-100);
}

.nav-item.active {
    color: var(--primary);
    background: rgba(0, 0, 0, 0.08);
}

/* Header Right Section */
.header-right {
    display: flex;
    align-items: center;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.language-selector-container {
    display: flex;
    align-items: center;
}

.profile-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}

.avatar {
    width: 36px;
    height: 36px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* Main Content */
.main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 24px;
    padding-top: 96px; /* ZENON: Header 64px + 32px spacing = 96px */
}

/* When there's no sub-navigation, add extra top padding */
.main-content.no-subnav {
    padding-top: 96px; /* ZENON: Same as regular main-content since header is fixed */
}

.page-header {
    margin-bottom: 32px;
    padding-top: 0;
}

.page-header h1 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
}

.page-header h1 .material-symbols-outlined {
    font-size: 28px;
    vertical-align: middle;
}

.page-header .subtitle {
    color: var(--text-secondary);
    font-size: 16px;
    margin-top: 4px;
}

/* Time Selector */
.time-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    background: white;
    padding: 8px;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    width: fit-content;
}

.time-btn {
    padding: 8px 16px;
    background: none;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s;
}

.time-btn:hover {
    background: var(--gray-100);
}

.time-btn.active {
    background: var(--primary);
    color: white;
}

/* Metrics Grid */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.metric-card {
    background: white;
    padding: 24px;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.metric-card h3 {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-600);
    margin-bottom: 8px;
}

.metric-value {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 4px;
}

.metric-change {
    font-size: 14px;
    font-weight: 500;
}

.metric-change.positive {
    color: var(--success);
}

.metric-change.negative {
    color: var(--danger);
}

/* Chart Section */
.chart-section {
    background: white;
    padding: 24px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    margin-bottom: 32px;
}

.chart-section h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.date-range-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-range-selector select {
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: white;
    font-size: 14px;
    cursor: pointer;
    min-width: 150px;
}

.date-range-selector select:hover {
    border-color: #9ca3af;
}

.date-range-selector select:focus {
    outline: none;
    border-color: #000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.chart-metric {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.chart-label {
    color: var(--gray-600);
    font-size: 14px;
}

.chart-value {
    font-size: 32px;
    font-weight: 600;
}

.chart-change {
    font-size: 14px;
    font-weight: 500;
}

.chart-change.negative {
    color: var(--danger);
}

.chart-section .chart-container {
    height: 300px;
    position: relative;
    width: 100%;
}

.chart-section canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Rankings Section */
.rankings-section {
    background: white;
    padding: 24px;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.section-header h2 {
    font-size: 18px;
    font-weight: 600;
}

.search-box {
    position: relative;
    width: 300px;
}

.search-box svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.search-box input {
    width: 100%;
    padding: 8px 12px 8px 40px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 14px;
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary);
}

/* Filter Tabs */
.filter-tabs {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.filter-tab {
    padding: 8px 16px;
    background: none;
    border: none;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.filter-tab:hover {
    color: var(--gray-900);
}

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

/* Table */
.rankings-table {
    overflow-x: auto;
    margin-bottom: 24px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    text-align: left;
    padding: 12px;
    font-weight: 500;
    color: var(--gray-600);
    border-bottom: 1px solid var(--gray-200);
}

td {
    padding: 16px 12px;
    border-bottom: 1px solid var(--gray-100);
}

tr:hover td {
    background: var(--gray-50);
}

.position-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.position-change.up {
    color: var(--success);
}

.position-change.down {
    color: var(--danger);
}

.position-change.neutral {
    color: var(--gray-400);
}

.url-link {
    color: var(--primary);
    text-decoration: none;
    max-width: 300px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Table Footer */
.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-size-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--gray-600);
}

.page-size-selector select {
    padding: 4px 8px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: white;
    font-size: 14px;
    cursor: pointer;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-btn, .page-num {
    padding: 8px 12px;
    background: none;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    color: var(--gray-600);
    transition: all 0.2s;
}

.page-btn:hover, .page-num:hover {
    background: var(--gray-100);
}

.page-num.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.page-dots {
    padding: 0 8px;
    color: var(--gray-400);
}

.table-actions {
    display: flex;
    gap: 12px;
}

/* Buttons */
.btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

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

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-secondary {
    background: white;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

.btn-secondary:hover {
    background: var(--gray-50);
}

.btn-action {
    background: var(--gray-800);
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-action:hover {
    background: var(--gray-900);
}

/* Project Dropdown Menu */
.project-menu {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    padding: 8px;
    min-width: 240px;
    z-index: 9999;
}

/* Profile Menu Dropdown */
.profile-menu {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    padding: 8px;
    min-width: 260px;
    z-index: 1000;
}

.profile-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
}

.profile-avatar {
    width: 40px;
    height: 40px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
}

.profile-info {
    flex: 1;
}

.profile-name {
    font-weight: 600;
    color: var(--gray-900);
    font-size: 14px;
}

.profile-email {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 2px;
}

.profile-menu-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 8px 0;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--gray-700);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.15s;
}

.profile-menu-item:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.profile-menu-item .material-symbols-outlined {
    font-size: 20px;
    color: var(--gray-500);
}

.project-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    color: var(--gray-700);
    font-size: 14px;
}

.project-menu-item:hover {
    background: var(--gray-50);
}

.project-menu-item.active {
    background: var(--gray-100);
    font-weight: 500;
}

.project-menu-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--gray-500);
}

.project-menu-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 8px 0;
}

.project-menu-loading {
    padding: 16px;
    text-align: center;
    color: var(--gray-500);
    font-size: 14px;
}

.btn-action svg {
    width: 16px;
    height: 16px;
}

.btn .material-symbols-outlined {
    font-size: 20px;
    line-height: 1;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--gray-700);
    margin: 0 8px;
}

.menu-toggle:hover {
    background: var(--gray-100);
    border-radius: 8px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    /* Hide desktop nav */
    .main-nav {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: white;
        border-bottom: 1px solid var(--gray-200);
        padding: 20px;
        flex-direction: column;
        gap: 16px;
        z-index: 999;
        box-shadow: var(--shadow-lg);
    }
    
    .main-nav.active {
        display: flex !important;
    }
    
    .nav-item {
        display: block;
        padding: 12px 16px;
        border-radius: 8px;
    }
    
    /* Show menu toggle */
    .menu-toggle {
        display: block !important;
    }
    
    /* Keep project selector visible on mobile */
    .project-selector {
        display: block;
    }
    
    /* Make project dropdown smaller on mobile */
    .project-dropdown {
        padding: 6px 12px;
        font-size: 14px;
    }
    
    /* Adjust header layout */
    .header {
        padding: 12px 16px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }
    
    .header-left {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
    }
    
    .logo span:last-child {
        display: none; /* Hide "MinimalRank" text, keep icon only */
    }
    
    /* Profile button adjustments */
    .header-right {
        margin-left: auto;
        display: flex;
        align-items: center;
    }
    
    /* Language selector on mobile */
    .nav-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    /* Even smaller screens */
    .main-content {
        padding: 16px 12px;
    }
    
    .page-header h1 {
        font-size: 20px;
    }
    
    .page-header .subtitle {
        font-size: 13px;
    }
    
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .btn {
        font-size: 13px;
        padding: 8px 16px;
    }
    
    .table-wrapper {
        overflow-x: auto;
    }
    
    table {
        min-width: 500px;
    }
    
    /* Adjust form controls */
    .form-control {
        font-size: 14px;
        padding: 10px 12px;
    }
    
    /* Keywords specific text */
    .keywords-search-placeholder::placeholder {
        font-size: 14px;
    }
}

/* Modal styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow: auto;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid var(--gray-200);
}

.modal-header h2 {
    margin: 0;
    font-size: 20px;
}

.modal-close {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--gray-500);
    border-radius: 8px;
}

.modal-close:hover {
    background: var(--gray-100);
}

.modal-body {
    padding: 24px;
}

.modal-body p {
    margin-bottom: 20px;
    color: var(--gray-600);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--gray-700);
}

.form-help {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--gray-500);
}

.form-group input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 14px;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary);
}

.form-group small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--gray-500);
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

/* Spinner animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner {
    animation: spin 1s linear infinite;
}

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

@media (max-width: 768px) {
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .table-footer {
        flex-direction: column;
        gap: 16px;
    }
    
    .rankings-table {
        font-size: 12px;
    }
}

/* Free Audit Button in App Header */
.btn-free-audit-header {
    background: var(--success);
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-free-audit-header:hover {
    background: #0F9D6F;
    transform: translateY(-1px);
}

.btn-free-audit-header .material-symbols-outlined {
    font-size: 18px;
}

/* Usage Section */
.usage-section {
    margin-top: 40px;
    padding: 30px;
    background: var(--gray-50);
    border-radius: 12px;
}

.usage-section h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 24px;
}

.usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.usage-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--gray-200);
}

.usage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.usage-header h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
}

.usage-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--success-light);
    color: var(--success);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
}

.usage-reset {
    font-size: 12px;
    color: var(--gray-500);
}

/* Project Dropdown */
.project-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: 4px;
    min-width: 250px;
    z-index: 1000;
}

.project-dropdown-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.project-dropdown-item:hover {
    background-color: var(--gray-50);
}

.project-dropdown-item:not(:last-child) {
    border-bottom: 1px solid var(--gray-100);
}

.project-dropdown-item.new-project {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--success);
    font-weight: 500;
}

.project-item-name {
    font-weight: 500;
    color: var(--gray-900);
}

.project-item-domain {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 2px;
}

.usage-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--gray-200);
    border-radius: 100px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 100px;
    transition: width 0.3s ease;
}

.usage-text {
    font-size: 14px;
    color: var(--gray-700);
    text-align: right;
}

.usage-current {
    font-weight: 600;
    color: var(--gray-900);
}

.usage-footer {
    text-align: center;
}

.usage-footer p {
    color: var(--gray-600);
    margin-bottom: 16px;
}


/* ==========================================================================
   SECCIONES ESPECÍFICAS POR PÁGINA
   Filosofía Bugatti: Un solo archivo, perfectamente organizado
   ========================================================================== */


/* ==========================================================================
   KEYWORDS PAGE
   ========================================================================== */

.keywords-table {

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 20px;

}
.keywords-table table {

    width: 100%;
    min-width: 800px;
    border-collapse: collapse;

}
.keywords-table th {

    background: var(--gray-50);
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-200);

}
.keywords-table td {

    padding: 12px;
    border-bottom: 1px solid var(--gray-100);

}
#keywordsTableBody a {

    color: var(--primary);
    text-decoration: none;
    font-weight: 500;

}
#keywordsTableBody a:hover {

    text-decoration: underline;

}
.keywords-table tr:hover {

    background: var(--gray-50);

}
.position-badge {

    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;

}
.position-badge.top10 {

    background: #d1fae5;
    color: #065f46;

}
.position-badge.top20 {

    background: #fef3c7;
    color: #92400e;

}
.position-badge.top50 {

    background: #e0e7ff;
    color: #3730a3;

}
.position-badge.beyond {

    background: #f3f4f6;
    color: #374151;

}
.position-badge.not-found {

    background: #fee2e2;
    color: #991b1b;

}
.position-badge.loading {
    background: #f3f4f6;
    color: #6b7280;
    min-width: 50px;
    justify-content: center;
}

/* Animated loading dots */
.loading-dots {
    display: inline-block;
    animation: loading-dots 1.4s infinite;
    font-size: 20px;
    line-height: 1;
}

@keyframes loading-dots {
    0% { content: '⋯'; opacity: 0.3; }
    25% { opacity: 0.6; }
    50% { opacity: 1; }
    75% { opacity: 0.6; }
    100% { opacity: 0.3; }
}
.change-indicator {

    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;

}
.change-indicator.improved {

    color: var(--success);

}
.change-indicator.declined {

    color: var(--danger);

}
.change-indicator.stable {

    color: var(--gray-500);

}
.change-indicator.new {

    color: var(--primary);

}
.change-indicator .material-symbols-outlined {

    font-size: 16px;

}
.url-cell {

    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}
.url-cell a {

    color: var(--primary);
    text-decoration: none;
    font-size: 13px;

}
.url-cell a:hover {

    text-decoration: underline;

}
.action-buttons {

    display: flex;
    gap: 8px;

}
.btn-icon {

    padding: 6px;
    background: none;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;

}
.btn-icon:hover {

    background: var(--gray-50);
    border-color: var(--gray-400);

}
.btn-icon .material-symbols-outlined {

    font-size: 18px;
    color: var(--gray-600);

}
.pagination button {

    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;

}
.pagination button:disabled {

    opacity: 0.5;
    cursor: not-allowed;

}
.pagination button.active {

    background: var(--primary);
    color: white;
    border-color: var(--primary);

}
.pagination-info {

    color: var(--gray-600);
    font-size: 14px;
    margin: 0 16px;

}
.competitive-analysis-section {
    background: white;
    padding: 32px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-top: 32px;
}

.competitive-analysis-section h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 1.5rem;
    font-weight: 600;
}

.chart-controls {
    margin-bottom: 24px;
}

.chart-controls .form-control {
    max-width: 400px;
}

.competitive-chart {
    position: relative;
    width: 100%;
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
}

#dateRangeSelector {
    min-width: 200px;
    max-width: 260px;
    width: 260px;
}

#changeFilter {
    max-width: 180px;
}

.date-range-display {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    white-space: nowrap;
    margin-right: 16px;
    padding: 8px 12px;
    background-color: #f3f4f6;
    border-radius: 6px;
}

.ranking-history-section {

    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: var(--shadow);

}
.history-chart {

    margin-top: 24px;
    height: 300px;
    position: relative;

}
.chart-placeholder {

    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: var(--gray-50);
    border-radius: 8px;
    color: var(--gray-500);
    font-size: 14px;

}
.form-row {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;

}
.message {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1000;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.message-success {

    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;

}
.message-error {

    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;

}
.message-info {

    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;

}
.empty-state {

    text-align: center;
    padding: 60px 20px;
    color: var(--gray-500);

}
.empty-state h3 {

    font-size: 18px;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 8px;

}
.keywords-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    align-items: center;
    justify-content: space-between;
}

.keywords-filters input.form-control {
    flex: 0 1 350px;
    min-width: 200px;
}

.keywords-filters select.form-control {
    flex: 1 1 auto;
    min-width: 150px;
}

@media (max-width: 768px) {
    .keywords-filters {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    /* Fix mobile form controls - ensure full width */
    .keywords-filters .form-control {
        width: 100% !important;
        padding: 10px 12px;  /* Reduced padding for mobile */
        font-size: 16px;  /* Prevent zoom on iOS */
        flex: none !important;  /* Override flex properties */
        min-width: 100% !important;
    }
    
    /* Fix search input height on mobile */
    .keywords-filters input[type="text"] {
        min-height: 44px;  /* Touch-friendly but not excessive */
        max-height: 44px;
        width: 100% !important;
    }
    
    /* Fix select dropdowns on mobile */
    .keywords-filters select {
        width: 100% !important;
        min-height: 44px;
        max-height: 44px;
        flex: none !important;
        min-width: 100% !important;
    }
    
    .keywords-filters input.form-control,
    .keywords-filters select.form-control {
        width: 100%;
        max-width: none;
    }
    
    /* Keywords page mobile optimizations */
    .page-header {
        margin-bottom: 20px;
    }
    
    .page-header h1 {
        font-size: 24px;
        margin-bottom: 8px;
    }
    
    .page-header .subtitle {
        font-size: 14px;
        margin-bottom: 16px;
    }
    
    /* Metrics cards mobile */
    .metrics-grid {
        gap: 12px;
        margin-bottom: 20px;
    }
    
    .metric-card {
        padding: 16px;
    }
    
    .metric-card h3 {
        font-size: 12px;
        margin-bottom: 8px;
    }
    
    .metric-value {
        font-size: 24px;
    }
    
    /* Table mobile styles */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -16px;
        padding: 0 16px;
    }
    
    .data-table {
        font-size: 12px;
        min-width: 600px;
    }
    
    .data-table th,
    .data-table td {
        padding: 8px;
    }
    
    /* Button styles mobile */
    .btn {
        font-size: 14px;
        padding: 10px 16px;
    }
    
    .btn-icon {
        padding: 8px;
    }
    
    /* Don't hide columns on mobile - use horizontal scroll instead */
    
    /* Section actions mobile - stack buttons vertically */
    .section-actions {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    
    .section-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Section header mobile */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .section-header h2 {
        font-size: 20px;
    }
    
    /* Keywords section mobile */
    .keywords-section {
        padding: 16px;
        margin: 0 -16px;
    }
    
    /* Ensure buttons have proper spacing from edges */
    .main-content {
        padding: 16px;
    }
}

.form-hint {
    font-size: 12px;
    color: var(--gray-500);
    margin: 4px 0 8px 0;
}

/* Fix message display on desktop */
@media (min-width: 768px) {
    .message {
        margin-left: 0;
        margin-right: 0;
        position: fixed;
        top: 80px;
        left: 50%;
        transform: translateX(-50%);
        max-width: 600px;
        width: auto;
        min-width: 300px;
    }
}

/* Intent badges */
.intent-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.intent-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: capitalize;
}

.intent-badge .material-symbols-outlined {
    font-size: 14px;
}

.intent-badge.informational {
    background: #EBF5FF;
    color: #1E40AF;
}

.intent-badge.commercial {
    background: #F3E8FF;
    color: #6B21A8;
}

.intent-badge.transactional {
    background: #DCFCE7;
    color: #166534;
}

.intent-badge.navigational {
    background: #FEF3C7;
    color: #A16207;
}

/* ==========================================================================
   COMPETITORS PAGE
   ========================================================================== */

.honesty-banner {

    background: #FEF3C7;
    border: 1px solid #F59E0B;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 32px;
    display: flex;
    gap: 12px;
    align-items: flex-start;

}
.honesty-banner .material-symbols-outlined {

    color: #F59E0B;
    flex-shrink: 0;

}
.honesty-banner div {

    flex: 1;
    font-size: 14px;
    line-height: 1.6;

}
.competitors-section {

    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: var(--shadow);

}
.section-actions {

    display: flex;
    gap: 12px;

}
.competitors-list {

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-top: 24px;

}
.competitor-card {

    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 20px;
    transition: all 0.2s;

}
.competitor-card:hover {

    border-color: var(--gray-300);
    box-shadow: var(--shadow);

}
.competitor-domain {

    font-weight: 600;
    font-size: 16px;
    margin-bottom: 12px;

}
.competitor-stats {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;

}
.competitor-stat {

    text-align: center;
    padding: 8px;
    background: var(--gray-50);
    border-radius: 6px;

}
.competitor-stat-label {

    font-size: 12px;
    color: var(--gray-600);
    margin-bottom: 4px;

}
.competitor-stat-value {

    font-size: 18px;
    font-weight: 600;

}
.comparison-section {

    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: var(--shadow);

}
.comparison-table {

    margin-top: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    max-width: 100%;

}
.comparison-table table {

    width: 100%;
    min-width: 650px; /* Minimum width to trigger scroll on small screens */
    border-collapse: collapse;

}
.comparison-table th {

    background: var(--gray-50);
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-200);

}
.comparison-table td {

    padding: 12px;
    border-bottom: 1px solid var(--gray-100);

}
.comparison-table tr.winning {

    background-color: rgba(16, 185, 129, 0.05);

}
.comparison-table tr.losing {

    background-color: rgba(239, 68, 68, 0.05);

}
.comparison-table tr.tie {

    background-color: rgba(107, 114, 128, 0.05);

}
.comparison-table td.positive {

    color: var(--success);
    font-weight: 600;

}
.comparison-table td.negative {

    color: var(--danger);
    font-weight: 600;

}
.position-diff {

    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;

}
.position-diff.winning {

    color: var(--success);

}
.position-diff.losing {

    color: var(--danger);

}
.position-diff.tied {

    color: var(--gray-500);

}
.table-note {

    margin-top: 12px;
    font-size: 12px;
    color: var(--gray-600);
    text-align: right;

}
.traffic-estimation-section {

    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: var(--shadow);

}
.estimation-grid {

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin: 24px 0;

}
.estimation-card {

    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 20px;

}
.estimation-card h4 {

    font-size: 16px;
    margin-bottom: 16px;

}
.traffic-range {

    font-size: 24px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 8px;

}
.traffic-label {

    font-size: 13px;
    color: var(--gray-600);

}
.estimation-disclaimer {

    background: var(--gray-50);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;

}
.estimation-disclaimer .material-symbols-outlined {

    color: var(--gray-600);
    flex-shrink: 0;

}
.estimation-disclaimer p {

    flex: 1;
    font-size: 13px;
    line-height: 1.6;
    color: var(--gray-700);
    margin: 0;

}
.estimation-disclaimer strong {

    color: var(--gray-900);

}
.empty-state p {

    margin-bottom: 20px;

}

/* ==========================================================================
   COMPETITOR ANALYSIS PAGE
   ========================================================================== */

.sub-nav {
    display: flex;
    gap: 24px;
    margin-top: -8px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--gray-200);
}

.sub-nav a {
    padding: 12px 0;
    text-decoration: none;
    color: var(--gray-600);
    font-weight: 500;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s;
}

.sub-nav a:hover {

    color: var(--primary);

}
.sub-nav a.active {

    color: var(--primary);
    border-bottom-color: var(--primary);

}
.analysis-form-section {

    background: white;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: var(--shadow);

}
.analysis-form {

    max-width: 800px;  /* Increased for wider input field */
    margin: 0 auto;

}
.domain-input-wrapper {

    display: flex;
    gap: 16px;
    margin-bottom: 8px;
    width: 100%;
    align-items: stretch;  /* Make button same height as input */

}

/* Specific styles for analyze button to prevent text wrap */
.domain-input-wrapper .btn-primary {
    white-space: nowrap;  /* Prevent text from wrapping */
    min-width: 150px;     /* Minimum width for button */
    padding: 12px 24px;   /* More horizontal padding */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.domain-input {

    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 16px;

}
.domain-input:focus {

    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);

}
.form-hint {

    font-size: 14px;
    color: var(--gray-600);
    margin: 0;

}
.loading-state {

    text-align: center;
    padding: 60px;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow);

}
.loading-message {

    color: var(--gray-600);
    font-size: 14px;

}
.results-section {

    animation: fadeIn 0.3s ease-out;

}
.domain-overview {

    background: white;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);

}
.domain-overview h2 {

    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 20px;

}
.traffic-distribution {

    background: white;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);

}
.traffic-distribution h2 {

    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 20px;

}
.distribution-bars {

    display: grid;
    gap: 16px;

}
.distribution-bar {

    display: flex;
    align-items: center;
    gap: 16px;

}
.bar-label {

    min-width: 100px;
    font-weight: 500;
    color: var(--gray-700);

}
.bar-container {

    flex: 1;
    height: 32px;
    background: var(--gray-100);
    border-radius: 6px;
    overflow: hidden;
    position: relative;

}
.bar-fill {

    height: 100%;
    background: var(--primary);
    transition: width 0.5s ease-out;
    display: flex;
    align-items: center;
    padding: 0 12px;

}
.bar-value {

    color: white;
    font-size: 14px;
    font-weight: 500;

}
.top-keywords-section {

    background: white;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);

}
.top-keywords-section h2 {

    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 20px;

}
.position-badge.beyond20 {

    background: #f8d7da;
    color: #721c24;

}
.url-link:hover {

    text-decoration: underline;

}
.upgrade-prompt {

    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 24px;
    text-align: center;

}
.upgrade-prompt p {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--gray-700);

}
.export-section {

    display: flex;
    gap: 12px;
    justify-content: center;

}
.error-state {

    text-align: center;
    padding: 60px;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow);

}
.error-state .material-symbols-outlined {

    font-size: 48px;
    color: var(--error);
    margin-bottom: 16px;

}
.error-state h3 {

    margin-bottom: 8px;

}
.error-state p {

    color: var(--gray-600);
    margin-bottom: 24px;

}

/* ==========================================================================
   COMPETITOR COMPARISON PAGE
   ========================================================================== */

.notice-banner {

    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 24px;
    margin: 32px auto;
    max-width: 600px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;

}
.notice-banner .material-symbols-outlined {

    font-size: 48px;
    color: var(--gray-400);

}
.notice-banner p {

    color: var(--gray-600);
    font-size: 16px;
    margin: 0;

}

/* ==========================================================================
   RESEARCH PAGE
   ========================================================================== */

.loading-section {

    background: white;
    border-radius: 12px;
    padding: 3rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

}
.progress-steps {

    margin-top: 2rem;
    text-align: left;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;

}
.progress-step {

    padding: 0.5rem 0;
    color: #9CA3AF;
    transition: color 0.3s;

}
.progress-step.active {

    color: black;
    font-weight: 500;

}
.progress-step.completed {

    color: #10B981;

}
.results-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;

}
.results-summary {

    background: #F3F4F6;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 500;

}
.results-tabs {

    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #E5E7EB;

}
.result-tab {

    padding: 0.75rem 1rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #6B7280;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;

}
.result-tab:hover {

    color: black;

}
.result-tab.active {

    color: black;
    border-bottom-color: black;

}
.tab-content {

    display: none;

}
.tab-content.active {

    display: block;

}
.intent-grid {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;

}
.intent-category h3 {

    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;

}
.intent-category h3 .material-symbols-outlined,
.source-category h3 .material-symbols-outlined {

    font-size: 20px;
    color: #6B7280;

}
.keyword-list {

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;

}
.keyword-item {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #F9FAFB;
    border-radius: 8px;
    font-size: 0.875rem;
    gap: 1rem;

}
.keyword-item:hover {

    background: #F3F4F6;

}
.keyword-text {

    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

}
.keyword-volume {

    font-size: 0.75rem;
    color: #6B7280;

}
.keyword-metrics {

    display: flex;
    align-items: center;
    gap: 0.75rem;

}
.metric-cpc {

    font-size: 0.75rem;
    color: #059669;
    font-weight: 500;

}
.trend {

    font-size: 1rem;

}
.trend .material-symbols-outlined {

    font-size: 18px;
    vertical-align: middle;

}
.trend .material-symbols-outlined[text="trending_up"] {

    color: #10B981;

}
.trend .material-symbols-outlined[text="trending_down"] {

    color: #EF4444;

}
.keyword-difficulty {

    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;

}

/* Market select with flags */
.market-select {
    padding-left: 35px !important;
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 20px 14px;
}

/* Use lipis flag-icons for dropdown selected value display */
.market-flag-display {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}
.difficulty-badge {

    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-weight: 500;

}
.difficulty-easy {

    background: #D1FAE5;
    color: #065F46;

}
.difficulty-medium {

    background: #FEF3C7;
    color: #92400E;

}
.difficulty-hard {

    background: #FEE2E2;
    color: #991B1B;

}
.source-grid {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;

}
.source-category h3 {

    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;

}
.all-keywords-grid {

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.5rem;
    max-height: 500px;
    overflow-y: auto;
    padding: 1rem;
    background: #F9FAFB;
    border-radius: 8px;

}
.modal-overlay {

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;

}
.modal-header h3 {

    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;

}
.modal-keywords-list {

    display: flex;
    flex-direction: column;
    gap: 12px;

}
.modal-keywords-list .keyword-item {

    margin: 0;

}
.intent-grid,
    .source-grid {

        grid-template-columns: 1fr;
    
}
.seed-input-box {

        flex-direction: column;
    
}
.export-section .btn {

        width: 100%;
        justify-content: center;
    
}
.intent-category.clickable,
.source-category.clickable {

    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    background: #f9fafb;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;

}
.intent-category.clickable:hover,
.source-category.clickable:hover {

    background: #f3f4f6;
    border-color: #d1d5db;

}
.clickable-keyword {

    cursor: pointer;
    transition: all 0.2s ease;

}
.clickable-keyword:hover {

    background: #e5e7eb;
    transform: translateX(2px);

}
.serp-loading {

    text-align: center;
    padding: 40px;

}
.serp-loading .spinner {

    width: 40px;
    height: 40px;
    border: 3px solid #f3f4f6;
    border-top-color: #000;
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: spin 1s linear infinite;

}
.serp-loading p {

    font-size: 16px;
    color: #1f2937;
    margin-bottom: 8px;

}
.serp-loading small {

    font-size: 14px;
    color: var(--text-secondary);

}
.serp-list {

    max-height: 500px;
    overflow-y: auto;

}
.serp-item {

    display: flex;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;

}
.serp-item:hover {

    background: #f9fafb;

}
.serp-item:last-child {

    border-bottom: none;

}
.serp-position {

    min-width: 32px;
    height: 32px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #1f2937;

}
.serp-content {

    flex: 1;
    overflow: hidden;

}
.serp-title {

    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;

}
.serp-url {

    font-size: 13px;
    color: #10b981;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}
.serp-description {

    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;

}
.cache-info {

    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #92400e;

}
.cache-info.fresh {

    background: #d1fae5;
    border-color: #a7f3d0;
    color: #065f46;

}
.cache-info .material-symbols-outlined {

    font-size: 18px;

}
.refresh-btn {

    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #d97706;
    border-radius: 6px;
    color: #92400e;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;

}
.refresh-btn:hover {

    background: #fef3c7;
    border-color: #92400e;

}
.refresh-btn .material-symbols-outlined {

    font-size: 16px;

}
.serp-actions {

    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;

}
.keyword-group {

    margin-bottom: 32px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;

}
.keyword-group.highlighted {

    border-color: black;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}
.group-title {

    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1f2937;

}
.group-title .material-symbols-outlined {

    font-size: 22px;
    color: var(--text-secondary);

}
.group-keywords {

    display: grid;
    gap: 8px;

}
#allKeywordsList.grouped-view {

    background: transparent;
    padding: 0;
    max-height: none;

}
.show-more-btn {

    width: 100%;
    padding: 8px 16px;
    margin-top: 8px;
    background: #f3f4f6;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;

}
.show-more-btn:hover {

    background: #e5e7eb;
    color: #4b5563;

}

/* ==========================================================================
   AUDITS PAGE
   ========================================================================== */

.score-bar {

    width: 100%;
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    margin-top: 12px;
    overflow: hidden;

}
.score-fill {

    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    width: 0%;
    transition: width 1s ease-out;

}
.metric-value.error {

    color: var(--danger);

}
.metric-value.warning {

    color: #f59e0b;

}
.metric-value.success {

    color: var(--success);

}
.audit-actions {

    display: flex;
    gap: 16px;
    margin-bottom: 32px;

}
.audit-categories {

    display: grid;
    gap: 24px;

}
.audit-category {

    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow);

}
.category-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

}
.category-header h2 {

    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    margin: 0;

}
.category-header .material-symbols-outlined {

    color: var(--gray-600);

}
.category-score {

    font-size: 24px;
    font-weight: 600;
    color: var(--gray-700);

}
.category-score.good {

    color: var(--success);

}
.category-score.medium {

    color: #f59e0b;

}
.category-score.poor {

    color: var(--danger);

}
.audit-items {

    display: flex;
    flex-direction: column;
    gap: 16px;

}
.audit-item {

    display: flex;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    transition: all 0.2s;

}
.audit-item:hover {

    border-color: var(--gray-300);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

}
.audit-item .status-icon {

    flex-shrink: 0;
    font-size: 24px;
    width: 24px;
    height: 24px;
    line-height: 1;
    text-align: center;
    display: inline-block;

}
.audit-item.pending .status-icon {

    color: var(--gray-400);

}
.audit-item.checking .status-icon {

    color: var(--primary);
    animation: spin 1.2s linear infinite;

}
.audit-item.passed {

    background: #f0fdf4;
    border-color: #bbf7d0;

}
.audit-item.passed .status-icon {

    color: var(--success);

}
.audit-item.warning {

    background: #fffbeb;
    border-color: #fde68a;

}
.audit-item.warning .status-icon {

    color: #f59e0b;

}
.audit-item.error {

    background: #fef2f2;
    border-color: #fecaca;

}
.audit-item.error .status-icon {

    color: var(--danger);

}
.audit-content {

    flex: 1;

}
.audit-content h4 {

    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;

}
.audit-content p {

    font-size: 14px;
    color: var(--gray-600);
    margin: 0;

}
.audit-content .details {

    margin-top: 8px;
    font-size: 13px;
    color: var(--gray-700);

}
.audit-content .details strong {

    color: var(--gray-900);

}
.audit-history {

    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-top: 32px;
    box-shadow: var(--shadow);

}
.audit-history h2 {

    margin-bottom: 24px;

}
.history-list {

    display: flex;
    flex-direction: column;
    gap: 16px;

}
.history-item {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;

}
.history-item:hover {

    background: var(--gray-50);

}
.history-info h4 {

    font-size: 16px;
    margin: 0 0 4px 0;

}
.history-info p {

    font-size: 14px;
    color: var(--gray-600);
    margin: 0;

}
.history-score {

    text-align: center;

}
.history-score .score-value {

    font-size: 24px;
    font-weight: 600;
    display: block;

}
.history-score .score-label {

    font-size: 12px;
    color: var(--gray-600);

}
.audit-item.expanded {

    background-color: rgba(0, 0, 0, 0.02);

}
.audit-details {

    margin-top: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 6px;
    font-size: 13px;

}
.audit-details h5 {

    font-size: 14px;
    font-weight: 600;
    margin: 16px 0 8px 0;
    color: var(--gray-800);

}
.audit-details h5:first-child {

    margin-top: 0;

}
.audit-details ul {

    list-style: none;
    padding: 0;
    margin: 8px 0;

}
.audit-details li {

    padding: 4px 0;
    color: var(--gray-700);

}
.audit-details a {

    color: var(--primary);
    text-decoration: none;
    word-break: break-all;

}
.audit-details a:hover {

    text-decoration: underline;

}
.details-content {

    max-height: 400px;
    overflow-y: auto;

}
.issue-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 8px 0;
}
.issue-list li {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 13px;
    line-height: 1.5;
}
.issue-list li:last-child {
    border-bottom: none;
}
.issue-list li em {
    color: var(--gray-600);
    font-size: 12px;
}
.issue-list li code {
    font-size: 11px;
    background: rgba(0,0,0,0.06);
    padding: 1px 4px;
    border-radius: 3px;
}
.duplicate-group {

    margin-bottom: 16px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 4px;

}
.duplicate-group p {

    margin: 0 0 8px 0;
    font-weight: 500;

}
.no-issues {

    color: var(--success);
    font-weight: 500;
    margin: 0;

}
.audit-progress-overlay {

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;

}
.audit-progress-overlay.active {

    opacity: 1;
    visibility: visible;

}
.progress-content {

    background: white;
    border-radius: 16px;
    padding: 48px;
    text-align: center;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

}
.progress-spinner {

    margin-bottom: 24px;

}
.progress-spinner .material-symbols-outlined {

    font-size: 48px;
    color: var(--primary);
    animation: spin 1.2s linear infinite;
    display: inline-block;
    width: 48px;
    height: 48px;
    line-height: 1;
    text-align: center;

}
.progress-phase {

    font-size: 20px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 16px;

}
.progress-message {

    font-size: 16px;
    color: var(--gray-600);
    line-height: 1.6;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;

}
.progress-message.fade-out {

    opacity: 0;
    transition: opacity 0.3s ease;

}
.progress-message.fade-in {

    opacity: 1;
    transition: opacity 0.5s ease;

}
.audit-actions button {

        width: 100%;
    
}

/* ==========================================================================
   SETTINGS PAGE
   ========================================================================== */

.settings-container {

    max-width: 800px;
    margin: 0 auto;

}
.settings-section {

    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

}
.settings-section h2 {

    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;

}
.section-description {

    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 24px;

}
.settings-form {

    display: flex;
    flex-direction: column;
    gap: 20px;

}
.form-group input,
.form-group select {

    padding: 10px 14px;
    background: #f9fafb;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 15px;
    color: #1f2937;
    transition: all 0.2s;

}
.form-group input:focus,
.form-group select:focus {

    outline: none;
    border-color: black;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);

}
.form-actions {

    display: flex;
    gap: 12px;
    margin-top: 8px;

}
.competitor-item {

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f9fafb;
    border: 1px solid var(--border-color);
    border-radius: 8px;

}
.competitor-remove {

    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s;

}
.competitor-remove:hover {

    background: #fee2e2;

}
.add-competitor-form {

    display: flex;
    gap: 12px;
    margin-top: 20px;

}
.add-competitor-form input {

    flex: 1;
    padding: 10px 14px;
    background: #f9fafb;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 15px;

}
.btn-danger {

    background: #ef4444;
    color: white;

}
.btn-danger:hover {

    background: #dc2626;

}
.danger-zone {

    border: 2px solid #fee2e2;
    background: #fef2f2;

}
.danger-zone h2 {

    color: #dc2626;

}
.danger-actions {

    display: flex;
    flex-direction: column;
    gap: 16px;

}
.danger-item {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: white;
    border: 1px solid #fecaca;
    border-radius: 8px;
    gap: 32px;

}
.danger-item > div:first-child {
    flex: 1;
}
.danger-item h4 {

    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;

}
.danger-item p {

    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;

}
.loading {

    opacity: 0.6;
    pointer-events: none;

}
.loading::after {

    content: "...";
    animation: dots 1s steps(4, end) infinite;

}
.danger-item .btn-danger {
    min-width: 180px;
    max-width: 220px;
    white-space: nowrap;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
}
/* Research Page Styles - Steve Jobs Level Perfection */
.research-container {
    max-width: 1200px;
    margin: 0 auto;
}

.search-section {
    background: white;
    padding: 48px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    margin-bottom: 32px;
    border: 1px solid var(--gray-100);
}

.search-section h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--gray-900);
}

.search-section p {
    color: var(--gray-500);
    margin-bottom: 48px;
    font-size: 16px;
}

.search-form-container {
    background: var(--gray-50);
    padding: 32px;
    border-radius: 16px;
    border: 1px solid var(--gray-200);
}

.search-options {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    align-items: end;
}

.option-group {
    display: flex;
    flex-direction: column;
}

.option-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.option-select {
    width: 100%;
    padding: 14px 16px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    color: var(--gray-900);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.option-select:hover {
    border-color: var(--gray-400);
}

.option-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.seed-input-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.seed-input-wrapper {
    display: flex;
    gap: 16px;
    align-items: center;
    width: 100%;
}

.seed-input {
    flex: 1;
    padding: 14px 20px !important;
    font-size: 15px;
    background: white !important;
    border: 1px solid var(--gray-300) !important;
    border-radius: 10px !important;
    outline: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.seed-input:hover {
    border-color: var(--gray-400) !important;
}

.seed-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05) !important;
}

.seed-input::placeholder {
    color: var(--gray-400);
}

.btn-research {
    padding: 16px 32px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 0 10px 10px 0;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    margin-right: -2px;
}

.btn-research:hover {
    background: var(--primary-hover);
    transform: translateX(2px);
}

.btn-research:active {
    transform: translateX(0);
}

.suggestions {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.suggestions > span {
    color: var(--gray-500);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.suggestion-tag {
    padding: 10px 18px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    cursor: default;
    color: var(--gray-600);
}

/* No hover effect for suggestion tags */

@media (max-width: 768px) {
    .search-options {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .search-form-container {
        padding: 20px;
    }
    
    .seed-input-wrapper {
        flex-direction: column;
        gap: 12px;
    }
    
    .seed-input-wrapper input {
        width: 100%;
    }
    
    .seed-input-wrapper button {
        width: 100%;
    }
    
    .seed-input-box {
        flex-direction: column;
    }
    
    .seed-input,
    .btn-research {
        width: 100%;
    }
    
    #marketSelect {
        width: 100%;
        min-width: unset !important;
    }
}

/* Audit Queued Modal */
.audit-queued-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.audit-queued-overlay.fade-out {
    opacity: 0;
}

.audit-queued-modal {
    background: white;
    border-radius: 12px;
    padding: 32px;
    max-width: 480px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.audit-queued-icon {
    width: 64px;
    height: 64px;
    background: #F3F4F6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.audit-queued-icon .material-symbols-outlined {
    font-size: 32px;
    color: #10B981;
}

.audit-queued-modal h2 {
    margin: 0 0 16px;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
}

.audit-queued-modal p {
    margin: 0 0 16px;
    color: #6B7280;
    line-height: 1.6;
}

.queue-position {
    background: #F3F4F6;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 16px 0;
}

.queue-position strong {
    color: #10B981;
    font-size: 20px;
    margin: 0 4px;
}

.queue-info {
    font-size: 14px;
    color: #9CA3AF;
}

.audit-queued-actions {
    margin-top: 24px;
}

/* Audit Status Styles */
.history-item.audit-queued,
.history-item.audit-running {
    background: #F0FDF4;
    border-color: #10B981;
}

.audit-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #10B981;
    font-weight: 500;
}

.audit-status.error {
    color: #EF4444;
}

.history-item.audit-failed {
    background: #FEF2F2;
    border-color: #EF4444;
}

.score-value.pending {
    color: #10B981;
    font-size: 24px;
}

.score-value.error {
    color: #EF4444;
    font-size: 28px;
    font-weight: 700;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.material-symbols-outlined.spinning {
    animation: spin 1.2s linear infinite;
    display: inline-block;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
    width: 1em;
    height: 1em;
}

/* History Item Actions */
.history-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.history-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.btn-icon {
    background: transparent;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: #F3F4F6;
    border-color: #D1D5DB;
}

.btn-icon .material-symbols-outlined {
    font-size: 20px;
    color: #6B7280;
}

/* Delete button styles */
.btn-icon.delete-btn {
    border-color: #FEE2E2;
}

.btn-icon.delete-btn:hover {
    background: #FEE2E2;
    border-color: #FCA5A5;
}

.btn-icon.delete-btn .material-symbols-outlined {
    color: #EF4444;
}

/* Delete confirmation modal animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.delete-modal-overlay {
    animation: fadeIn 0.2s ease;
}

.delete-modal {
    animation: slideUp 0.3s ease;
}

/* Modal button hover effects */
.modal-cancel-btn:hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
}

.modal-confirm-btn:hover {
    background: #dc2626 !important;
}

.btn-icon:hover .material-symbols-outlined {
    color: #374151;
}

/* Audit Details Modal */
.audit-details-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    overflow-y: auto;
}

.audit-details-modal {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid #E5E7EB;
}

.modal-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
}

.close-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.close-btn:hover {
    background: #F3F4F6;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.audit-summary {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
}

.summary-card {
    background: #F3F4F6;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    min-width: 150px;
}

.summary-score {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 8px;
}

.summary-label {
    color: #6B7280;
    font-size: 14px;
}

.summary-stats {
    display: flex;
    gap: 16px;
    flex: 1;
}

.stat-item {
    flex: 1;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.stat-value {
    font-size: 32px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.stat-item.critical .stat-value {
    color: #EF4444;
}

.stat-item.warning .stat-value {
    color: #F59E0B;
}

.stat-item.success .stat-value {
    color: #10B981;
}

.stat-label {
    font-size: 14px;
    color: #6B7280;
}

.audit-details-content {
    margin-top: 24px;
}

.audit-section {
    margin-bottom: 32px;
}

.audit-section h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.audit-checks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.audit-check {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid;
}

.audit-check.passed {
    background: #F0FDF4;
    border-color: #10B981;
}

.audit-check.warning {
    background: #FFFBEB;
    border-color: #F59E0B;
}

.audit-check.critical {
    background: #FEF2F2;
    border-color: #EF4444;
}

.audit-check .material-symbols-outlined {
    flex-shrink: 0;
    font-size: 24px;
}

.audit-check.passed .material-symbols-outlined {
    color: #10B981;
}

.audit-check.warning .material-symbols-outlined {
    color: #F59E0B;
}

.audit-check.critical .material-symbols-outlined {
    color: #EF4444;
}

.check-content {
    flex: 1;
}

.check-content h4 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.check-content p {
    margin: 0;
    color: #4B5563;
    font-size: 14px;
}

.check-details {
    margin-top: 8px !important;
    font-size: 13px !important;
    color: #6B7280 !important;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 24px;
    border-top: 1px solid #E5E7EB;
}

/* Responsive */
@media (max-width: 768px) {
    .audit-summary {
        flex-direction: column;
    }
    
    .summary-stats {
        flex-direction: column;
    }
    
    .modal-body {
        padding: 16px;
    }
}

/* No Results Message */
.no-results {
    text-align: center;
    padding: 40px 20px;
    color: #6B7280;
}

.no-results p {
    margin: 0 0 12px;
}
EOF < /dev/null

/* Audit details list styles */
.check-details-list {
    margin: 10px 0;
    padding-left: 20px;
    font-size: 14px;
    color: #6B7280;
}

.check-details-list li {
    margin: 5px 0;
    line-height: 1.5;
}

.check-details-list .nested-list {
    margin: 5px 0 5px 20px;
    padding-left: 20px;
    list-style-type: disc;
}

.check-details-list .nested-list li {
    margin: 3px 0;
    font-size: 13px;
    word-break: break-word;
}

.audit-check .check-details {
    margin-top: 10px;
    font-size: 14px;
    color: #6B7280;
    line-height: 1.5;
    white-space: pre-wrap;
}

.audit-details-modal .audit-check {
    margin: 15px 0;
    padding: 15px;
    border-radius: 8px;
    background: #F9FAFB;
}

.audit-details-modal .audit-check.critical {
    background: #FEF2F2;
    border-left: 4px solid #EF4444;
}

.audit-details-modal .audit-check.warning {
    background: #FFFBEB;
    border-left: 4px solid #F59E0B;
}

.audit-details-modal .audit-check.passed {
    background: #F0FDF4;
    border-left: 4px solid #10B981;
}

/* Competitor Comparison Styles */
.chart-controls {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px;
    background: #F9FAFB;
    border-radius: 12px;
}

.control-group {
    flex: 1;
}

.control-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #374151;
    font-size: 14px;
}

.chart-container {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    height: 500px;
}

.competitor-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.competitor-chip {
    display: inline-block;
    padding: 4px 10px;
    background: #F3F4F6;
    border-radius: 16px;
    font-size: 12px;
    color: #374151;
    white-space: nowrap;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.status-success {
    background: #D1FAE5;
    color: #065F46;
}

.status-badge.status-warning {
    background: #FEF3C7;
    color: #92400E;
}

.status-badge.status-danger {
    background: #FEE2E2;
    color: #991B1B;
}

/* Clickable keywords in table */
.data-table td a {
    color: #3B82F6;
    text-decoration: none;
    font-weight: 500;
}

.data-table td a:hover {
    text-decoration: underline;
}

/* Metrics Charts Styles */
.metrics-charts {
    margin: 40px 0;
}

.metrics-charts h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.time-period {
    display: flex;
    gap: 8px;
}

.time-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.time-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.time-btn.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.chart-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.chart-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #E5E7EB;
}

.chart-card h3 {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 16px;
}

.chart-card canvas {
    height: 250px !important;
}

@media (max-width: 1024px) {
    .chart-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .chart-grid {
        grid-template-columns: 1fr;
    }
}