:root {
    --login-navy: #071B2D;
    --login-emerald: #16A36A;
    --login-mint: #EFFAF5;
    --login-muted: #64788a;
}

body {
    color: var(--login-navy) !important;
    background:
        linear-gradient(180deg, rgba(239,250,245,.68), rgba(255,255,255,.95)),
        radial-gradient(circle at 12% 18%, rgba(22,163,106,.18), transparent 32%),
        radial-gradient(circle at 88% 12%, rgba(47,128,237,.13), transparent 30%) !important;
    overflow-x: hidden;
}

body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
}

body::before {
    width: 52vw;
    height: 28vh;
    left: -8vw;
    bottom: -8vh;
    opacity: .32;
    background:
        linear-gradient(90deg, transparent 0 8%, rgba(7,27,45,.18) 8% 11%, transparent 11% 15%, rgba(7,27,45,.13) 15% 21%, transparent 21% 26%, rgba(7,27,45,.2) 26% 30%, transparent 30%),
        linear-gradient(165deg, transparent 0 58%, rgba(22,163,106,.34) 58% 60%, transparent 60%);
    clip-path: polygon(0 50%, 7% 50%, 7% 24%, 15% 24%, 15% 43%, 22% 43%, 22% 10%, 31% 10%, 31% 33%, 38% 33%, 38% 16%, 46% 16%, 46% 39%, 55% 39%, 55% 4%, 64% 4%, 64% 30%, 75% 30%, 75% 18%, 84% 18%, 84% 45%, 100% 45%, 100% 100%, 0 100%);
}

body::after {
    width: 44vw;
    height: 34vh;
    right: -10vw;
    top: 4vh;
    border: 2px dashed rgba(22,163,106,.26);
    border-radius: 50%;
    transform: rotate(-12deg);
}

.login-shell {
    border: 1px solid rgba(255,255,255,.92) !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.68) !important;
    box-shadow: 0 30px 90px rgba(7,27,45,.14) !important;
    backdrop-filter: blur(24px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
}

.portal-context {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(239,250,245,.92), rgba(255,255,255,.52)),
        radial-gradient(circle at 20% 70%, rgba(22,163,106,.18), transparent 34%) !important;
    border-right: 1px solid rgba(7,27,45,.08) !important;
}

.portal-context::after {
    content: "";
    position: absolute;
    right: -84px;
    bottom: -92px;
    width: 260px;
    height: 260px;
    border: 22px solid rgba(22,163,106,.12);
    border-radius: 50%;
}

.brand-logo,
.form-icon {
    border-radius: 14px !important;
    background: rgba(255,255,255,.84) !important;
    box-shadow: 0 14px 30px rgba(7,27,45,.10) !important;
}

.brand strong,
.context-copy h1,
.title-area h2 { color: var(--login-navy); }
.brand span,
.context-copy p,
.context-foot,
.title-area p { color: var(--login-muted) !important; }

.context-label {
    border-radius: 999px !important;
    color: #0a7957 !important;
    background: rgba(210,244,228,.82) !important;
}

.access-row {
    border: 1px solid rgba(7,27,45,.08) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.68) !important;
}

.form-panel {
    background: rgba(255,255,255,.78) !important;
}

.form-group input {
    border-color: rgba(7,27,45,.14) !important;
    border-radius: 12px !important;
    background: #fff !important;
    min-height: 54px;
}

.login-btn {
    border-radius: 12px !important;
    background: linear-gradient(135deg, #0b8b65, #18c37d) !important;
    border-color: transparent !important;
}

.back-btn {
    border-color: rgba(7,27,45,.12) !important;
    border-radius: 12px !important;
    background: rgba(239,250,245,.72) !important;
}

.forgot-link { color: #087a5b !important; }
.notice { border-radius: 12px !important; }

@media (max-width: 820px) {
    .login-shell { border-radius: 20px !important; }
    .portal-context { border-right: 0 !important; border-bottom-color: rgba(7,27,45,.08) !important; }
}

@media (max-width: 460px) {
    .login-shell { border-radius: 0 !important; }
}