.data-extraction.css {
    /* Source Card */
    .source-card {
        background: #fff;
        padding: 24px;
        border-radius: 12px;
        border: 1px solid var(--gray-200);
        margin-bottom: 24px;
    }

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

    .source-header h3 {
        font-size: 16px;
        font-weight: 600;
        color: var(--dark);
    }

    .source-tabs {
        display: flex;
        gap: 8px;
    }

    .tab-btn {
        padding: 8px 16px;
        background: var(--gray-50);
        border: 1px solid var(--gray-200);
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        color: var(--gray-600);
        cursor: pointer;
        transition: all 0.2s;
        font-family: inherit;
    }

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

    .tab-btn.active {
        background: var(--primary-bg);
        color: var(--primary);
        border-color: var(--primary);
    }

    .source-option {
        display: none;
    }

    .source-option.active {
        display: block;
    }

    .option-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .option-item {
        background: var(--gray-50);
        padding: 20px;
        border-radius: 10px;
        border: 1px solid var(--gray-200);
        transition: all 0.2s;
    }

    .option-item:hover {
        background: var(--gray-100);
        transform: translateY(-2px);
    }

    .option-item h4 {
        font-size: 15px;
        font-weight: 600;
        color: var(--dark);
        margin-bottom: 8px;
    }

    .option-item p {
        font-size: 13px;
        color: var(--gray-500);
        margin-bottom: 16px;
    }

    /* Filters Card */
    .filters-card {
        background: #fff;
        padding: 24px;
        border-radius: 12px;
        border: 1px solid var(--gray-200);
        margin-bottom: 24px;
    }

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

    .filters-header h3 {
        font-size: 16px;
        font-weight: 600;
        color: var(--dark);
    }

    .filters-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .filter-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .filter-group label {
        font-size: 13px;
        font-weight: 600;
        color: var(--gray-600);
        text-transform: uppercase;
    }

    .filter-select {
        padding: 10px 14px;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        font-size: 14px;
        font-family: inherit;
        background: #fff;
        color: var(--gray-900);
        cursor: pointer;
    }

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

    .date-input {
        flex: 1;
        padding: 10px 14px;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        font-size: 14px;
        font-family: inherit;
    }

    /* Progress Card */
    .progress-card {
        background: #fff;
        padding: 24px;
        border-radius: 12px;
        border: 1px solid var(--gray-200);
        margin-bottom: 24px;
    }

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

    .progress-header h3 {
        font-size: 16px;
        font-weight: 600;
        color: var(--dark);
    }

    .progress-stats {
        display: flex;
        gap: 24px;
    }

    .progress-stat {
        font-size: 13px;
        color: var(--gray-500);
    }

    .progress-stat strong {
        color: var(--dark);
        font-weight: 600;
        margin-left: 4px;
    }

    .progress-bar-large {
        height: 8px;
        background: var(--gray-200);
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 16px;
    }

    .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
        transition: width 0.3s ease;
    }

    .progress-log {
        max-height: 200px;
        overflow-y: auto;
        background: var(--gray-900);
        border-radius: 8px;
        padding: 12px;
        font-family: 'Courier New', monospace;
        font-size: 12px;
        color: var(--gray-300);
    }

    .log-entry {
        display: flex;
        gap: 12px;
        padding: 4px 0;
        border-bottom: 1px solid var(--gray-800);
    }

    .log-entry:last-child {
        border-bottom: none;
    }

    .log-time {
        color: var(--gray-500);
        flex-shrink: 0;
    }

    .log-message {
        color: var(--gray-300);
        flex: 1;
    }

    .log-message.success {
        color: var(--success);
    }

    .log-message.error {
        color: var(--danger);
    }

    .log-message.warning {
        color: var(--warning);
    }

    /* Data Card */
    .data-card {
        background: #fff;
        padding: 24px;
        border-radius: 12px;
        border: 1px solid var(--gray-200);
    }

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

    .data-header h3 {
        font-size: 16px;
        font-weight: 600;
        color: var(--dark);
    }

    .data-actions {
        display: flex;
        gap: 8px;
    }

    .data-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
        border-bottom: 1px solid var(--gray-200);
        padding-bottom: 12px;
    }

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

    .data-tab:hover {
        color: var(--primary);
    }

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

    .data-content {
        min-height: 400px;
    }

    .data-table-wrapper {
        overflow-x: auto;
    }

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

    .data-table thead {
        background: var(--gray-50);
    }

    .data-table th {
        padding: 12px 16px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: var(--gray-600);
        text-transform: uppercase;
        border-bottom: 1px solid var(--gray-200);
    }

    .data-table td {
        padding: 14px 16px;
        font-size: 14px;
        color: var(--gray-700);
        border-bottom: 1px solid var(--gray-100);
    }

    .data-table tbody tr:hover {
        background: var(--gray-50);
    }

    @media (max-width: 1200px) {
        .option-grid,
        .filters-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

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

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

        .source-header {
            flex-direction: column;
            gap: 12px;
            align-items: flex-start;
        }
    }
}