:root {
    --neutral100: #FFFFFF;
    --neutral200: #F4F2F1;
    --neutral300: #D7CEC9;
    --neutral400: #B6ACA6;
    --neutral500: #978F8A;
    --neutral600: #564E4A;
    --neutral700: #3C3836;
    --neutral800: #191015;
    --neutral900: #000000;

    --primary100: #3065e9;
    --primary200: #1750df;
    --primary300: #1547c5;
    --primary400: #123eab;
    --primary500: #0f3492;
    --primary600: #0C2972;

    --secondary100: #ffd1b6;
    --secondary200: #ffb588;
    --secondary300: #ff985a;
    --secondary400: #ff7b2c;
    --secondary500: #FD5F00;

    --accent100: #E4F4F4;
    --accent200: #CDE5E5;
    --accent300: #B6D6D6;
    --accent400: #9FC7C7;
    --accent500: #FFEED4;

    --angry100: #F2D6CD;
    --angry500: #C03403;

    --overlay20: rgba(25, 16, 21, 0.2);
    --overlay50: rgba(25, 16, 21, 0.5);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--neutral200);
    color: var(--neutral700);
}

.header {
    background: linear-gradient(135deg, var(--primary100) 0%, var(--primary400) 100%);
    padding: 2rem 0;
    color: var(--neutral100);
    margin-bottom: 2rem;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 6px var(--overlay20);
}

.card {
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
    border: none;
    transition: transform 0.2s;
    background-color: var(--neutral100);
}

.card:hover {
    transform: translateY(-5px);
}

.card-header {
    background-color: var(--accent100);
    border-bottom: none;
    font-weight: 600;
    border-radius: 10px 10px 0 0 !important;
}

.btn-primary {
    background-color: var(--primary200);
    border-color: var(--primary300);
}

.btn-primary:hover {
    background-color: var(--primary300);
    border-color: var(--primary400);
}

.btn-secondary {
    background-color: var(--secondary300);
    border-color: var(--secondary400);
}

.btn-secondary:hover {
    background-color: var(--secondary400);
    border-color: var(--secondary500);
}

.status-badge {
    font-size: 0.8rem;
    font-weight: 500;
}

.api-section {
    padding: 1.5rem;
    margin-bottom: 1rem;
    background-color: var(--neutral100);
    border-radius: 10px;
    box-shadow: 0 2px 4px var(--overlay20);
}

#responseArea {
    max-height: 300px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 0.9rem;
    padding: 1rem;
    border-radius: 5px;
    background-color: var(--neutral200);
    border: 1px solid var(--neutral300);
}

.loader {
    border: 3px solid var(--neutral300);
    border-top: 3px solid var(--primary200);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.status-running {
    color: var(--primary300);
}

.status-completed {
    color: var(--secondary500);
}

.status-failed {
    color: var(--angry500);
}

.status-queued {
    color: var(--neutral600);
}

.job-stats {
    background-color: var(--accent100);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.stats-item {
    text-align: center;
    padding: 1rem;
}

.stats-number {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--primary300);
}

.stats-label {
    color: var(--neutral600);
    font-size: 0.9rem;
}

.task-action {
    min-width: 90px;
}

.form-floating {
    margin-bottom: 1rem;
}

.alert-task-status {
    margin-bottom: 0;
    padding: 1rem;
}

#taskStatusArea {
    min-height: 120px;
}