:root {
    --kjet-green-500: #22c55e;
    --kjet-green-600: #16a34a;
    --kjet-green-700: #15803d;
    --kjet-gray-50: #f9fafb;
    --kjet-gray-100: #f3f4f6;
    --kjet-gray-200: #e5e7eb;
    --kjet-gray-300: #d1d5db;
    --kjet-gray-500: #6b7280;
    --kjet-gray-700: #374151;
    --ring-offset: #ffffff;
}

.bg-kjet-green { background-color: var(--kjet-green-600); }
.text-kjet-green { color: var(--kjet-green-600); }

.card {
    background: #ffffff;
    border: 1px solid var(--kjet-gray-200);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--kjet-gray-700);
    margin-bottom: 0.5rem;
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--kjet-gray-300);
    border-radius: 0.5rem;
    background-color: #ffffff;
    color: #111827;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    outline: none;
    appearance: none;
}

.form-input::placeholder { color: #9ca3af; }
.form-input:focus {
    border-color: var(--kjet-green-500);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}
.form-input[disabled], .form-input[readonly] {
    background-color: var(--kjet-gray-100);
    color: var(--kjet-gray-500);
    cursor: not-allowed;
}

:where(.btn-primary, .btn-secondary, .btn-success) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    transition: transform 0.05s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    outline: none;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
:where(.btn-primary, .btn-secondary, .btn-success):active { transform: translateY(0.5px); }

.btn-primary { background-image: linear-gradient(180deg, var(--kjet-green-500), var(--kjet-green-600)); color: #ffffff; }
.btn-primary:hover { background-image: linear-gradient(180deg, var(--kjet-green-600), var(--kjet-green-700)); }
.btn-primary:focus { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.35); }
.btn-primary[disabled] { opacity: 0.6; cursor: not-allowed; }

.btn-secondary { background-color: #ffffff; color: var(--kjet-green-700); border: 1.5px solid var(--kjet-green-600); }
.btn-secondary:hover { background-color: #f0fdf4; }
.btn-secondary:focus { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25); }
.btn-secondary[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn-success { background-image: linear-gradient(180deg, var(--kjet-green-500), var(--kjet-green-600)); color: #ffffff; }
.btn-success:hover { background-image: linear-gradient(180deg, var(--kjet-green-600), var(--kjet-green-700)); }
.btn-success:focus { box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.35); }

.step-content { transition: all 0.3s ease-in-out; }
.progress-step {
    width: 2rem; height: 2rem;
    border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.875rem; font-weight: 700;
    background: #e5e7eb; color: #374151;
    border: 1px solid #d1d5db;
    transition: all 0.3s ease;
}
.progress-step.active { background: var(--kjet-green-600); color: #fff; border-color: var(--kjet-green-600); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25); }
.progress-step.completed { background: var(--kjet-green-500); color: #fff; border-color: var(--kjet-green-500); }
.progress-step.pending { background: #e5e7eb; color: #4b5563; }

.progress-line { height: 0.25rem; flex: 1 1 auto; background: #e5e7eb; border-radius: 9999px; transition: background-color 0.3s ease; }
.progress-line.completed { background: var(--kjet-green-500); }

.border-red-500 { border-color: #ef4444 !important; }

.file-upload-area {
    position: relative;
    border: 2px dashed var(--kjet-gray-300);
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    background-color: #ffffff;
}
.file-upload-area:hover { border-color: var(--kjet-green-500); background-color: #f0fdf4; }
.file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-upload-text { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #6b7280; }

@media (max-width: 640px) {
    .form-input { padding: 0.625rem 0.75rem; }
    :where(.btn-primary, .btn-secondary, .btn-success) { padding: 0.625rem 1rem; }
}