:root {
    --kp-blue-900: #003c87;
    --kp-blue-700: #0052b4;
    --kp-blue-100: #d8e2ff;
    --kp-blue-50: #e7eeff;
    --kp-border: #d8e3fb;
    --kp-orange: #fe6500;
    --kp-ink: #111c2d;
    --kp-muted: #737784;
}

body {
    background:
        radial-gradient(circle at 84% -8%, rgba(216, 226, 255, .92) 0, rgba(216, 226, 255, 0) 30rem),
        radial-gradient(circle at 102% 94%, rgba(255, 219, 201, .45) 0, rgba(255, 219, 201, 0) 25rem),
        #f9f9ff !important;
    background-attachment: fixed !important;
}

.kp-page-shell {
    min-height: 100vh;
    position: relative;
}

.kp-page-header {
    min-height: 64px;
    box-sizing: border-box;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    background: rgba(249, 249, 255, .88) !important;
    border-color: rgba(194, 198, 213, .78) !important;
    box-shadow: 0 8px 28px rgba(0, 60, 135, .055);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.kp-page-header h1 {
    display: flex;
    align-items: center;
    gap: .65rem;
    letter-spacing: -.025em;
}

.kp-page-header h1::before {
    content: '';
    width: 4px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--kp-orange), #ff9a62);
    box-shadow: 0 3px 8px rgba(254, 101, 0, .24);
}

.kp-page-content {
    position: relative;
}

.kp-page-content .premium-card {
    border-color: rgba(216, 227, 251, .98) !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 10px 30px rgba(0, 60, 135, .055);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}

.kp-page-content .premium-card:hover {
    border-color: #c8d8fa !important;
    box-shadow: 0 15px 38px rgba(0, 60, 135, .085);
}

.kp-page-header label,
.kp-page-header form > div > label {
    box-shadow: 0 3px 12px rgba(0, 60, 135, .035);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.kp-page-header label:hover,
.kp-page-header label:focus-within,
.kp-page-header form > div > label:hover,
.kp-page-header form > div > label:focus-within {
    border-color: var(--kp-blue-700) !important;
    background-color: #fff !important;
    box-shadow: 0 7px 18px rgba(0, 60, 135, .09);
}

.kp-page-content table thead {
    background: linear-gradient(90deg, rgba(231, 238, 255, .96), rgba(240, 243, 255, .82)) !important;
}

.kp-page-content table tbody tr {
    transition: background-color .18s ease;
}

.kp-page-content table tbody tr:hover {
    background-color: rgba(247, 250, 255, .95);
}

.kp-page-content input,
.kp-page-content select,
.kp-page-content textarea {
    accent-color: var(--kp-blue-900);
}

body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]),
body select,
body textarea {
    color: var(--kp-ink) !important;
    caret-color: var(--kp-blue-700);
    font-weight: 500 !important;
}

body :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.bg-transparent),
    select,
    textarea
) {
    outline: none;
    color: var(--kp-ink) !important;
    caret-color: var(--kp-blue-700);
    transition:
        border-color .18s ease,
        background-color .18s ease,
        box-shadow .18s ease,
        color .18s ease;
}

body input:-webkit-autofill,
body input:-webkit-autofill:hover,
body input:-webkit-autofill:focus,
body textarea:-webkit-autofill,
body select:-webkit-autofill {
    -webkit-text-fill-color: var(--kp-ink) !important;
    caret-color: var(--kp-blue-700);
}

body :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.bg-transparent),
    select,
    textarea
):hover:not(:disabled):not([readonly]) {
    border-color: #9ab7ee !important;
    background-color: #fff !important;
    box-shadow: 0 4px 13px rgba(0, 60, 135, .07);
}

body :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.bg-transparent),
    select,
    textarea
):focus,
body :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.bg-transparent),
    select,
    textarea
):focus-visible {
    border-color: var(--kp-blue-700) !important;
    background-color: #fff !important;
    box-shadow:
        0 0 0 3px rgba(0, 82, 180, .13),
        0 7px 18px rgba(0, 60, 135, .08) !important;
}

body :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.bg-transparent),
    select,
    textarea
):active:not(:disabled):not([readonly]) {
    border-color: var(--kp-blue-900) !important;
    background-color: #f8faff !important;
}

body :where(input, select, textarea):disabled,
body :where(input, select, textarea)[readonly] {
    cursor: not-allowed;
    opacity: .62;
}

body :where(input, textarea)::placeholder {
    color: #9298a7;
    transition: color .18s ease;
}

body :where(input, textarea):focus::placeholder {
    color: #b0b5c0;
}

body label.border:has(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus
),
body label.border:has(select:focus),
body label.border:has(textarea:focus),
body .kp-field-shell:focus-within {
    border-color: var(--kp-blue-700) !important;
    background-color: #fff !important;
    box-shadow:
        0 0 0 3px rgba(0, 82, 180, .11),
        0 7px 18px rgba(0, 60, 135, .08) !important;
}

body label.border:has(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"])
):hover,
body label.border:has(select):hover,
body label.border:has(textarea):hover,
body .kp-field-shell:hover {
    border-color: #9ab7ee !important;
    background-color: #fff !important;
}

.kp-page-content a,
.kp-page-content button {
    -webkit-tap-highlight-color: transparent;
}

::selection {
    color: #fff;
    background: var(--kp-blue-700);
}

@media (max-width: 1023px) {
    .kp-page-header {
        box-shadow: 0 5px 20px rgba(0, 60, 135, .045);
    }

    .kp-page-content .premium-card {
        box-shadow: 0 7px 22px rgba(0, 60, 135, .045);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kp-page-content *,
    .kp-page-header * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

body { font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif; background:#f9f9ff; }
.material-symbols-outlined { font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24; }
.login-shell { box-shadow: 0 28px 80px rgba(0, 60, 135, 0.14); }
.login-grid { background-image: linear-gradient(rgba(0,82,180,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(0,82,180,.055) 1px, transparent 1px); background-size: 28px 28px; }
.login-input:-webkit-autofill,.login-input:-webkit-autofill:hover,.login-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset; -webkit-text-fill-color:#111c2d; }
#dashboard-view { min-height:100vh; }
