:root {
    --kio-bg-main: #FAFAF8;
    --kio-bg-sec: #F3F4F6;
    --kio-card-bg: #FFFFFF;
    --kio-text-main: #111827;
    --kio-text-sec: #6B7280;
    --kio-border: #E5E7EB;
    --kio-primary: #4F46E5;
    --kio-primary-hover: #4338CA;
    --kio-success: #10B981;
    --kio-warning: #F59E0B;
    --kio-error: #EF4444;

    /* Bootstrap native overrides mapping */
    --bs-body-bg: var(--kio-bg-main);
    --bs-body-color: var(--kio-text-main);
    --bs-primary: var(--kio-primary);
    --bs-primary-rgb: 79, 70, 229;
    --bs-success: var(--kio-success);
    --bs-warning: var(--kio-warning);
    --bs-danger: var(--kio-error);
    --bs-border-color: var(--kio-border);
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.kio-elegant-bg {
    background: linear-gradient(135deg, #FAFAF8 0%, #E5E7EB 100%);
}

.kio-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.kio-card {
    background-color: var(--kio-card-bg);
    border: 1px solid var(--kio-border);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-radius: 1rem;
    padding: 2.5rem;
    width: 100%;
}

.text-muted {
    color: var(--kio-text-sec) !important;
}

.btn-primary {
    background-color: var(--kio-primary);
    border-color: var(--kio-primary);
    color: #ffffff;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--kio-primary-hover) !important;
    border-color: var(--kio-primary-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.25) !important;
}

.form-control {
    border: 1px solid var(--kio-border);
    background-color: var(--kio-bg-main);
    color: var(--kio-text-main);
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    border-color: var(--kio-primary);
    background-color: #ffffff;
    color: var(--kio-text-main);
    box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.25);
}

.alert {
    border-radius: 0.375rem;
    font-weight: 500;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: var(--kio-error);
}

.alert-success {
    background-color: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
    color: var(--kio-success);
}

.kio-footer {
    text-align: center;
    padding: 1.5rem 0;
    color: var(--kio-text-sec);
    font-size: 0.875rem;
    font-weight: 500;
}

.kio-link {
    color: var(--kio-primary);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
}

.kio-link:hover {
    color: var(--kio-primary-hover);
    text-decoration: underline;
}

.pin-input {
    letter-spacing: 0.5rem;
    text-align: center;
    font-size: 1.25rem;
    font-weight: bold;
}