/* SUMITRO Bootstrap compatibility additions */
.text-bg-success{color:#fff!important;background-color:rgba(25,135,84,1)!important}
.text-bg-secondary{color:#fff!important;background-color:rgba(108,117,125,1)!important}
.text-bg-dark{color:#fff!important;background-color:rgba(33,37,41,1)!important}
.border-opacity-25{--bs-border-opacity:.25}
.bg-opacity-10{--bs-bg-opacity:.1}
.bg-opacity-25{--bs-bg-opacity:.25}
.bg-opacity-50{--bs-bg-opacity:.5}
.bg-opacity-75{--bs-bg-opacity:.75}
.rounded-pill{border-radius:50rem!important}

body {
            min-height: 100vh;
            margin: 0;
            background:
                radial-gradient(circle at 10% 15%, rgba(59,130,246,.14), transparent 25%),
                radial-gradient(circle at 90% 85%, rgba(37,99,235,.11), transparent 28%),
                #f4f7fb;
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                         "Segoe UI", sans-serif;
            color: #172033;
        }

        .login-shell {
            min-height: 100vh;
            display: grid;
            grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr);
        }

        .login-visual {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(circle at 20% 20%, rgba(80,140,255,.24), transparent 25%),
                linear-gradient(145deg, #07182d 0%, #092957 62%, #0b3670 100%);
            color: #fff;
            padding: 58px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .login-visual::after {
            content: "";
            position: absolute;
            width: 450px;
            height: 450px;
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 50%;
            right: -150px;
            bottom: -140px;
            box-shadow:
                0 0 0 70px rgba(255,255,255,.025),
                0 0 0 140px rgba(255,255,255,.018);
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 14px;
            font-size: 1.25rem;
            font-weight: 800;
            position: relative;
            z-index: 2;
        }

        .brand-logo {
            width: 46px;
            height: 46px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, #4f8cff, #2563eb);
            box-shadow: 0 10px 26px rgba(20,83,190,.4);
        }

        .visual-copy {
            max-width: 600px;
            position: relative;
            z-index: 2;
        }

        .visual-copy h1 {
            font-size: clamp(2.3rem, 4vw, 4.3rem);
            line-height: 1.03;
            letter-spacing: -.055em;
            font-weight: 850;
            margin-bottom: 20px;
        }

        .visual-copy p {
            max-width: 520px;
            color: rgba(229,238,250,.72);
            font-size: 1.02rem;
            line-height: 1.7;
        }

        .feature-line {
            display: flex;
            gap: 18px;
            flex-wrap: wrap;
            margin-top: 30px;
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: rgba(239,246,255,.84);
            font-size: .84rem;
        }

        .login-panel {
            display: grid;
            place-items: center;
            padding: 32px;
        }

        .login-card {
            width: min(100%, 430px);
            background: #fff;
            border: 1px solid #e6ebf2;
            border-radius: 22px;
            padding: 36px;
            box-shadow: 0 24px 70px rgba(30, 55, 90, .12);
        }

        .mobile-brand {
            display: none;
            align-items: center;
            gap: 12px;
            margin-bottom: 28px;
            font-weight: 800;
        }

        .mobile-brand .brand-logo {
            width: 40px;
            height: 40px;
            color: #fff;
        }

        .login-title {
            font-size: 1.65rem;
            font-weight: 850;
            letter-spacing: -.04em;
            margin-bottom: 5px;
        }

        .login-subtitle {
            color: #8491a4;
            margin-bottom: 28px;
        }

        .form-label {
            font-weight: 700;
            color: #445169;
            font-size: .84rem;
        }

        .input-group-text,
        .form-control {
            border-color: #dce3ec;
            min-height: 48px;
        }

        .input-group-text {
            background: #f8fafc;
            color: #94a3b8;
            border-radius: 11px 0 0 11px;
        }

        .form-control {
            border-radius: 0 11px 11px 0;
        }

        .form-control:focus {
            border-color: #8eb2f9;
            box-shadow: 0 0 0 .2rem rgba(37,99,235,.1);
        }

        .btn-login {
            min-height: 49px;
            border: 0;
            border-radius: 11px;
            background: linear-gradient(135deg, #2f70ee, #1e58cf);
            color: #fff;
            font-weight: 750;
            box-shadow: 0 9px 24px rgba(37,99,235,.22);
        }

        .btn-login:hover {
            color: #fff;
            background: linear-gradient(135deg, #2563eb, #194caf);
        }

        .login-footer {
            text-align: center;
            margin-top: 25px;
            color: #a0aaba;
            font-size: .73rem;
        }

        .alert { border-radius: 11px; }

        @media (max-width: 991.98px) {
            .login-shell { grid-template-columns: 1fr; }
            .login-visual { display: none; }
            .mobile-brand { display: flex; }
            .login-panel { padding: 22px; }
        }

        @media (max-width: 575.98px) {
            .login-panel { padding: 14px; }
            .login-card {
                border-radius: 18px;
                padding: 27px 22px;
            }
        }