:root {
            /* ── Palette (mirrors layout.css for the standalone login page) ── */
            --primary-50:  #EEF0F7;
            --primary-100: #D9DDEB;
            --primary-200: #B3BBD6;
            --primary-300: #8D99C2;
            --primary-400: #5E6DA0;
            --primary-500: #3D4F9B;
            --primary-600: #2D3B7A;
            --primary-700: #212C5F;
            --primary-800: #18204A;
            --primary-900: #0F1535;

            --secondary-50:  #FFF9E0;
            --secondary-100: #FFF1B8;
            --secondary-200: #FFE680;
            --secondary-300: #FFD94D;
            --secondary-400: #FFC91B;
            --secondary-500: #E6B100;
            --secondary-600: #B88B00;
            --secondary-700: #8A6600;
            --secondary-800: #5C4400;
            --secondary-900: #2E2200;

            --neutral-50:  #F6F5F8;
            --neutral-100: #ECECF2;
            --neutral-200: #D9D9E4;
            --neutral-300: #C5C8D1;
            --neutral-400: #9A9DAB;
            --neutral-500: #6B7080;
            --neutral-600: #545968;
            --neutral-700: #3D4150;
            --neutral-800: #25282F;
            --neutral-900: #111217;

            --green-500: #0E9F6E;
            --red-50:    #FEF2F2;
            --red-100:   #FEE2E2;
            --red-200:   #FECACA;
            --red-300:   #FCA5A5;
            --red-400:   #F87171;
            --red-500:   #DC2626;
            --red-600:   #B91C1C;
            --red-700:   #991B1B;

            /* Legacy aliases used throughout the file */
            --blue-dark:   var(--primary-700);
            --blue-mid:    var(--primary-600);
            --blue-light:  var(--primary-500);
            --yellow-main: var(--secondary-400);
            --gray-soft:   var(--neutral-200);
        }

        @keyframes authSpinnerRotate {
            to { transform: rotate(360deg); }
        }

        .ss-item.pending .ti-loader-2,
        .btn-masuk.is-loading::before {
            animation: authSpinnerRotate .82s steps(12) infinite;
            aspect-ratio: 1;
            background: repeating-conic-gradient(
                from 0deg,
                var(--yellow-main) 0deg 12deg,
                transparent 12deg 30deg
            );
            border-radius: 50%;
            color: transparent !important;
            display: inline-block;
            flex: 0 0 auto;
            font-size: 0 !important;
            height: 1.15rem;
            line-height: 1;
            mask: radial-gradient(circle, transparent 0 38%, #000 41% 68%, transparent 71%);
            -webkit-mask: radial-gradient(circle, transparent 0 38%, #000 41% 68%, transparent 71%);
            transform-origin: center;
            vertical-align: -.18em;
            width: 1.15rem;
        }

        .ss-item.pending .ti-loader-2::before,
        .btn-masuk.is-loading::before {
            content: "" !important;
        }

        *, *::before, *::after { box-sizing: border-box; }

body {
            min-height: 100vh;
            background: var(--gray-soft);
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            overflow: hidden;
            padding: 24px;
}

.login-shell-row {
    min-height: calc(100vh - 48px);
}

        /* ──────────── LEFT PANEL ──────────── */
        .panel-left {
            background: linear-gradient(155deg, var(--blue-dark) 0%, var(--blue-mid) 55%, var(--blue-light) 100%);
            position: relative;
            overflow: hidden;
            min-height: calc(100vh - 48px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2.25rem 2rem;
            text-align: center;
            border-radius: 18px 0 0 18px;
        }

        .dot-grid {
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
            background-size: 26px 26px;
            pointer-events: none;
        }

        .blob { display: none; }
        .blob-1 { width: 380px; height: 380px; border-radius: 50%; background: rgba(255,255,255,.11); top: -130px; right: -110px; }
        .blob-2 { width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.09); bottom: -100px; left: -80px; }
        .blob-4 { width: 100px; height: 100px; background: rgba(255,255,255,.08); bottom: 100px; right: 60px; border-radius: 20px; transform: rotate(25deg); }

        .accent-ring {
            position: relative; z-index: 1;
            width: 96px; height: 96px;
            border-radius: 50%;
            border: 2.5px solid rgba(255,201,27,.35);
            background: rgba(255,201,27,.11);
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 1.4rem;
            font-size: 2.5rem;
            color: var(--yellow-main);
        }

        .brand-name {
            position: relative; z-index: 1;
            font-size: 3rem; font-weight: 600;
            letter-spacing: .02em; color: #fff; line-height: 1;
            text-shadow: 0 4px 28px rgba(0,0,0,.22);
        }

        .brand-divider {
            position: relative; z-index: 1;
            width: 56px; height: 4px;
            background: var(--yellow-main);
            border-radius: 2px;
            margin: 1.2rem auto 0;
        }

        /* ──────────── RIGHT PANEL ──────────── */
        .panel-right {
            background: #fff;
            min-height: calc(100vh - 48px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 1.75rem 2.5rem;
            border-radius: 0 18px 18px 0;
        }

        .form-card {
            width: 100%;
            max-width: 420px;
        }

        .form-title {
            font-size: 1.85rem; font-weight: 600;
            color: var(--blue-dark);
            margin: 0 0 1.5rem;
        }

        /* ── Server status bar ── */
        .ss-bar {
            display: flex;
            gap: .5rem;
            margin-bottom: 1.25rem;
            flex-wrap: wrap;
        }
        .ss-item {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            border-radius: 6px;
            padding: .3rem .85rem;
            font-size: .78rem;
            font-weight: 600;
            border: 1.5px solid;
        }
        .ss-item.up {
            background: rgba(14,159,110,.08);
            border-color: rgba(14,159,110,.25);
            color: var(--green-500);
        }
        .ss-item.pending {
            background: rgba(107,112,128,.08);
            border-color: rgba(107,112,128,.22);
            color: var(--neutral-500);
        }
        .ss-item.down {
            background: rgba(224,68,68,.07);
            border-color: rgba(224,68,68,.2);
            color: var(--red-500);
        }
        .ss-dot {
            width: 7px; height: 7px;
            border-radius: 50%;
            display: inline-block;
        }
        .ss-item.up   .ss-dot { background: var(--green-500); box-shadow: 0 0 0 2px rgba(14,159,110,.25); }
        .ss-item.pending .ss-dot { background: var(--neutral-400); box-shadow: 0 0 0 2px rgba(107,112,128,.18); }
        .ss-item.down .ss-dot { background: var(--red-500); }

        /* Alert */
        .alert-pem {
            border-radius: 8px;
            padding: .8rem 1rem;
            margin-bottom: 1.25rem;
            display: flex;
            align-items: flex-start;
            gap: .55rem;
            font-size: .875rem;
        }
        .alert-danger { background: var(--red-50); border: 1px solid var(--red-200); color: var(--red-700); }
        .alert-warn   { background: var(--secondary-50); border: 1px solid var(--secondary-200); color: var(--secondary-600); }
        .alert-pem i  { margin-top: .05rem; flex-shrink: 0; }

        /* Field */
        .field-group { margin-bottom: 1.2rem; }
        .field-label {
            display: block;
            font-size: .82rem; font-weight: 600;
            color: var(--blue-dark);
            margin-bottom: .45rem;
            letter-spacing: .02em;
        }
        .field-wrap { position: relative; }
        .field-icon-l {
            position: absolute; left: 1rem; top: 50%;
            transform: translateY(-50%);
            font-size: 1.1rem; color: var(--primary-300);
            pointer-events: none; z-index: 2;
        }
        .field-icon-r {
            position: absolute; right: .85rem; top: 50%;
            transform: translateY(-50%);
            font-size: 1.1rem; color: var(--primary-300);
            background: transparent; border: none;
            cursor: pointer; padding: 0; z-index: 2;
            display: flex; align-items: center;
        }
        .field-icon-r:hover { color: var(--blue-dark); }

        .remember-row {
            display: flex;
            align-items: center;
            gap: .65rem;
            margin: -.25rem 0 1.2rem;
            color: var(--neutral-600);
            font-size: .88rem;
            font-weight: 600;
            cursor: pointer;
            user-select: none;
        }

        .remember-row input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .remember-box {
            width: 20px;
            height: 20px;
            border: 1.5px solid var(--neutral-300);
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background: #fff;
            transition: background-color .16s ease, border-color .16s ease;
        }

        .remember-box i {
            font-size: .9rem;
            opacity: 0;
        }

        .remember-row input:checked + .remember-box {
            border-color: var(--blue-mid);
            background: var(--blue-mid);
        }

        .remember-row input:checked + .remember-box i {
            opacity: 1;
        }

        .remember-row input:focus-visible + .remember-box {
            outline: 3px solid rgba(61, 79, 155, .22);
            outline-offset: 2px;
        }

        .remember-row input:disabled + .remember-box,
        .remember-row input:disabled ~ .remember-text {
            opacity: .55;
            cursor: not-allowed;
        }

        .field-input {
            width: 100%; height: 50px;
            border: 1px solid var(--neutral-100);
            border-radius: 8px;
            background: var(--neutral-50);
            padding: 0 2.8rem;
            font-size: .93rem;
            color: var(--blue-dark);
            outline: none;
            transition: border-color .2s, box-shadow .2s, background .2s;
        }
        .field-input::placeholder { color: var(--primary-200); }
        .field-input:focus {
            border-color: var(--blue-dark);
            background: #fff;
            box-shadow: 0 0 0 4px rgba(33,44,95,.07);
        }
        .field-input.is-error { border-color: var(--red-500); background: var(--red-50); }
        .field-input:disabled {
            opacity: .55; cursor: not-allowed;
        }

        .field-hint {
            font-size: .74rem; color: var(--primary-200);
            margin-top: .3rem;
        }

        /* Submit */
        .btn-masuk {
            width: 100%; height: 50px;
            background: var(--blue-dark);
            color: #fff;
            font-size: .95rem; font-weight: 600;
            letter-spacing: .04em;
            border: none; border-radius: 8px;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center; gap: .5rem;
            margin-top: .75rem;
            transition: background .2s, box-shadow .2s, transform .1s;
        }
        .btn-masuk:hover:not(:disabled) {
            background: var(--blue-mid);
            box-shadow: 0 8px 24px rgba(33,44,95,.28);
        }
        .btn-masuk:active:not(:disabled) { transform: scale(.98); }
        .btn-masuk:disabled {
            background: var(--primary-300); cursor: not-allowed;
        }

        .footer-copy {
            font-size: .74rem; color: var(--primary-200);
            text-align: center; margin-top: 2rem;
        }

        /* Theme toggle button */
        .theme-toggle {
            position: fixed;
            top: 22px;
            right: 26px;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1px solid rgba(33,44,95,.12);
            background: #fff;
            color: var(--blue-dark);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 100;
            box-shadow: 0 4px 14px rgba(33,44,95,.12);
            transition: background .15s ease, color .15s ease, border-color .15s ease;
        }
        .theme-toggle:hover { background: var(--blue-dark); color: #fff; }
        .theme-toggle i { font-size: 1.15rem; }
        .theme-icon-light { display: inline-flex; }
        .theme-icon-dark  { display: none; }
        [data-theme="dark"] .theme-icon-light { display: none; }
        [data-theme="dark"] .theme-icon-dark  { display: inline-flex; }

        /* ── Dark mode ───────────────────────────────────────────── */
        [data-theme="dark"] {
            --gray-soft: var(--neutral-900);
        }
        [data-theme="dark"] body { background: var(--neutral-900); }
        [data-theme="dark"] .panel-right { background: #1A1D25; }
        [data-theme="dark"] .form-title { color: #E2E8F8; }
        [data-theme="dark"] .field-label { color: #B8C4DE; }
        [data-theme="dark"] .field-input {
            background: #222633;
            border-color: #303542;
            color: #E2E8F8;
        }
        [data-theme="dark"] .field-input::placeholder { color: #6B7A9F; }
        [data-theme="dark"] .field-input:focus {
            background: #1A1D25;
            border-color: var(--yellow-main);
            box-shadow: 0 0 0 4px rgba(255,201,27,.12);
        }
        [data-theme="dark"] .field-icon-l,
        [data-theme="dark"] .field-icon-r { color: #6B7A9F; }
        [data-theme="dark"] .field-icon-r:hover { color: var(--yellow-main); }
        [data-theme="dark"] .field-hint { color: #6B7A9F; }
        [data-theme="dark"] .footer-copy { color: #6B7A9F; }
        [data-theme="dark"] .alert-danger {
            background: rgba(220,38,38,.12);
            border-color: rgba(220,38,38,.35);
            color: var(--red-300);
        }
        [data-theme="dark"] .alert-warn {
            background: rgba(217,119,6,.12);
            border-color: rgba(217,119,6,.38);
            color: var(--amber-300);
        }
        [data-theme="dark"] .theme-toggle {
            background: #222633;
            color: var(--secondary-300);
            border-color: #303542;
        }
        [data-theme="dark"] .theme-toggle:hover { background: var(--yellow-main); color: #1A1D25; }

        /* Responsive */
        @media (max-width: 991.98px) {
            body { overflow: auto; padding: 0; }
            .panel-left  { display: none !important; }
            .panel-right {
                background: var(--gray-soft);
                padding: 2rem 1.25rem;
                min-height: 100vh;
                border-radius: 0;
            }
            .form-card {
                background: #fff;
                border-radius: 8px;
                padding: 2rem 1.75rem;
                box-shadow: 0 4px 32px rgba(33,44,95,.09);
            }
            [data-theme="dark"] .form-card {
                background: #1A1D25;
                box-shadow: 0 4px 32px rgba(0,0,0,.4);
            }
        }