:root {
    --ink: #0b1a2b;
    --slate: #3b4b61;
    --mist: #e8eef4;
    --sea: #1d3a6b;
    --sea-deep: #152d55;
    --sun: #f3b03b;
    --card: #ffffff;
    --shadow: 0 24px 60px rgba(6, 16, 28, 0.22);
    --pv-ink: #0b1a2b;
    --pv-slate: #3b4b61;
    --pv-mist: #e8eef4;
    --pv-accent: #1d3a6b;
    --pv-accent-strong: #152d55;
    --pv-accent-strong-mid: #152d55ad;
    --pv-sun: #f3b03b;
    --pv-card: #ffffff;
    --pv-border: rgba(9, 24, 40, 0.12);
    --pv-shadow: 0 24px 60px rgba(6, 16, 28, 0.18);
    --pv-subtle: #8397b9;
}

body::before {
    background: linear-gradient(315deg,rgba(206, 222, 237, 1) 0%, rgba(247, 249, 248, 1) 60%, rgba(240, 240, 240, 1) 100%);
    background: radial-gradient(circle at 50% 0%, rgba(206, 222, 237, 0.6), transparent 55%), radial-gradient(circle at 8% 10%, rgba(243, 176, 59, 0.18), transparent 42%), radial-gradient(circle at 92% 18%, rgba(10, 107, 122, 0.16), transparent 46%), linear-gradient(120deg, #f6f9fc 0%, #e7eef5 60%, #f2f6fa 100%);
}


.login-hero {
    background: linear-gradient(135deg, rgba(206, 222, 237, 1) 0%, rgba(247, 249, 248, 1) 60%, rgba(240, 240, 240, 1) 100%);
    border-radius: 24px;
    padding: 48px 44px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #cedeed26;
}

.login-hero::after {
    content: "";
    position: absolute;
    inset: auto -20% -30% auto;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, #cedeed61, transparent 70%);
    opacity: 0.6;
}