/* assets/css/auth.css */
html {
    overflow-y: auto;
}

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

body {
    margin: 0;
    font-family: 'Nunito', sans-serif;
    background: radial-gradient(circle at center, #1e293b 0%, #090d16 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    padding: 20px;
    position: relative;
}

/* Efek Cahaya Aurora / Mesh Background Dinamis */
body::before, body::after {
    content: '';
    position: fixed;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    z-index: 0;
    filter: blur(100px);
    opacity: 0.6;
    animation: floatBlob 10s infinite alternate ease-in-out;
    will-change: transform;
    pointer-events: none;
}

body::before {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    top: 5%;
    left: 10%;
}

body::after {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    bottom: 5%;
    right: 10%;
    animation-delay: -5s;
}

@keyframes floatBlob {
    0% { transform: translateY(0px) scale(1); }
    100% { transform: translateY(40px) scale(1.15); }
}

.flash-alert {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 25px;
    border-radius: 14px;
    color: #fff;
    font-weight: 600;
    z-index: 9999;
    backdrop-filter: blur(12px);
    background: rgba(15, 23, 42, 0.85);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}
.flash-alert.danger { background-color: rgba(239, 68, 68, 0.9); }
.flash-alert.success { background-color: rgba(34, 197, 94, 0.9); }
.flash-alert.warning { background-color: rgba(245, 158, 11, 0.9); }

@keyframes pageEntrance {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Glassmorphism Container Utama */
.auth-wrapper {
    display: flex;
    width: 950px;
    max-width: 100%;
    min-height: 550px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 36px;
    box-shadow: 
        0 30px 60px -15px rgba(0, 0, 0, 0.4), 
        0 15px 30px -10px rgba(37, 99, 235, 0.15), 
        inset 0 2px 4px rgba(255, 255, 255, 1); 
    overflow: hidden;
    position: relative;
    z-index: 1;
    animation: pageEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Panel Brand / Ilustrasi */
.auth-brand {
    flex: 0 0 50%;
    width: 50%;
    background: linear-gradient(145deg, rgba(241, 245, 249, 0.9), rgba(226, 232, 240, 0.7));
    backdrop-filter: blur(15px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 35px;
    position: relative;
    border-right: 1px solid rgba(203, 213, 225, 0.5);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

.auth-brand img {
    width: 100%;
    max-width: 390px;
    height: auto;
    object-fit: contain;
    border-radius: 24px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.12));
}

/* Panel Form */
.auth-form {
    flex: 0 0 50%;
    width: 50%;
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

.auth-wrapper.animating .auth-brand,
.auth-wrapper.animating .auth-form {
    opacity: 0.2;
}

.auth-wrapper.register-mode .auth-brand {
    transform: translateX(100%);
}

.auth-wrapper.register-mode .auth-form {
    transform: translateX(-100%);
}

/* Header Identity */
.auth-header-identity {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 16px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(203, 213, 225, 0.6);
    width: 100%;
}

.auth-header-logo {
    width: 68px;
    height: 68px;
    object-fit: contain;
    flex-shrink: 0;
    margin-bottom: 0 !important;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.08));
}

.auth-header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-form h2 {
    font-size: 16px;
    font-weight: 800;
    color: #1e3a8a;
    margin: 0 0 3px 0;
    line-height: 1.25;
    text-transform: uppercase;
    text-align: left;
}

.auth-form .subtitle {
    font-size: 14px;
    font-weight: 700;
    color: #2563eb;
    margin: 0;
    line-height: 1.25;
    text-transform: uppercase;
    text-align: left;
}

.live-clock {
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    margin-top: 4px;
    letter-spacing: 0.3px;
}

/* Input Group Style */
.input-icon-group {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 50px;
    padding: 6px 18px;
    margin-bottom: 16px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.input-icon-group:focus-within {
    border-color: #2563eb;
    background: #ffffff;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02), 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.input-icon-group .field-icon {
    color: #475569;
    margin-right: 12px;
    font-size: 18px;
}

.input-icon-group input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    padding: 12px 0;
    font-size: 14px;
    color: #0f172a;
    font-weight: 600;
}

.input-icon-group input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.password-wrapper { position: relative; }
.password-wrapper .toggle-eye {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #475569;
    cursor: pointer;
}

.forgot-password {
    text-align: right;
    margin-bottom: 25px;
}

.forgot-password a {
    color: #2563eb;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.forgot-password a:hover {
    text-decoration: underline;
}

/* Transisi Kondisional Form Register */
#registerExtraFields {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#registerExtraFields.show {
    opacity: 1;
    max-height: 300px;
}

#regSubmitBtn {
    display: none;
    transition: all 0.3s ease;
}

#regSubmitBtn.show {
    display: flex;
}

/* Tombol Bulat dengan Efek Timbul (Pop-up) Jelas saat Hover */
.auth-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 10px;
}

.auth-buttons button, .auth-buttons a {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 50%;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background-color 0.2s ease;
    font-size: 18px;
    border: none;
    text-align: center;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.auth-buttons button:hover, .auth-buttons a:hover {
    transform: translateY(-6px) scale(1.08); /* Tombol terangkat jelas dan membesar */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.22); /* Bayangan melebar nyata */
}

.auth-buttons button:active, 
.auth-buttons a:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.btn-login {
    background: #2563eb;
    color: white;
}
.btn-login:hover {
    background: #1d4ed8;
}

.btn-register {
    background: #059669;
    color: #ffffff;
}
.btn-register:hover {
    background: #047857;
}

.btn-switch {
    background: #f1f5f9;
    color: #0369a1;
    border: 1px solid #cbd5e1 !important;
}
.btn-switch:hover {
    background: #e2e8f0;
}

.btn-google {
    background: #ffffff;
    color: #ea4335;
    border: 1px solid #e2e8f0 !important;
}
.btn-google:hover {
    background: #f8fafc;
}

.btn-fingerprint {
    background: #ffffff;
    color: #4f46e5;
    border: 1px solid #e2e8f0 !important;
}
.btn-fingerprint:hover {
    background: #f8fafc;
}

/* ==========================================
   RESPONSIVE DESIGN (TABLET & MOBILE)
   ========================================== */
@media (max-width: 992px) {
    .auth-wrapper {
        flex-direction: column;
        width: 92%;
        max-width: 420px;
        min-height: auto;
        border-radius: 24px;
    }

    .auth-wrapper.register-mode .auth-brand {
        transform: none !important;
    }
    .auth-wrapper.register-mode .auth-form {
        transform: none !important;
    }

    .auth-brand {
        flex: 1 1 auto;
        width: 100%;
        padding: 18px;
        border-right: none;
        border-bottom: 1px solid rgba(203, 213, 225, 0.5);
    }

    .auth-brand img {
        max-width: 150px;
        height: auto;
    }

    .auth-form {
        flex: 1 1 auto;
        width: 100%;
        padding: 26px 22px !important;
    }

    .auth-header-identity {
        margin-bottom: 20px;
        padding-bottom: 15px;
        gap: 14px;
    }

    .auth-header-logo {
        width: 52px;
        height: 52px;
    }

    .auth-form h2 {
        font-size: 14px;
    }
    .auth-form .subtitle {
        font-size: 12px;
    }

    .input-icon-group {
        padding: 4px 14px;
        margin-bottom: 14px;
        border-radius: 30px;
    }

    .input-icon-group input {
        padding: 10px 0;
        font-size: 14px;
    }

    .input-icon-group .field-icon {
        font-size: 16px;
        margin-right: 10px;
    }

    .forgot-password {
        margin-bottom: 20px;
    }

    .forgot-password a {
        font-size: 13px;
    }

    .auth-buttons button, .auth-buttons a {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        font-size: 16px;
        border-radius: 50%;
    }
}
/* ══════════════════════════════════════════════════════════
   PATTERN LOCK — tambahan untuk halaman login
   ══════════════════════════════════════════════════════════ */

/* Pastikan panel login bisa scroll di mobile saat form manual muncul */
.auth-panel-pane {
    overflow-y: auto;
}

/* Tombol submit manual (tersembunyi by default, muncul setelah pola cocok) */
.btn-login:not([style*="display:none"]) {
    animation: fadeUp .4s ease both;
}

/* Responsive: pada mobile canvas jadi lebih kecil */
@media (max-width: 480px) {
    .pattern-canvas-wrap,
    #patternCanvas {
        width: 190px !important;
        height: 190px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   PATTERN LOCK — halaman Profil / Settings
   ══════════════════════════════════════════════════════════ */
.pattern-set-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.pattern-set-step {
    font-size: 13px;
    font-weight: 700;
    color: #2563eb;
    text-align: center;
}
.pattern-set-hint {
    font-size: 12px;
    color: #64748b;
    text-align: center;
}
.pattern-set-canvas-wrap {
    width: 200px;
    height: 200px;
}
.pattern-set-canvas-wrap canvas {
    display: block;
    width: 200px;
    height: 200px;
    touch-action: none;
    user-select: none;
    cursor: crosshair;
}
.pattern-set-status {
    font-size: 12px;
    font-weight: 700;
    min-height: 18px;
    text-align: center;
}
.pattern-set-status.success { color: #059669; }
.pattern-set-status.error   { color: #dc2626; }
.pattern-set-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}
.pattern-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
}
.pattern-indicator.set     { background:#f0fdf4; color:#15803d; }
.pattern-indicator.not-set { background:#fef2f2; color:#b91c1c; }

/* ========================================================================
   LOGIN PAGE — glass layout inspired by the supplied visual reference.
   Scoped to body.login-page so the standalone register page is untouched.
   Authentication behavior remains in login.php; this section is visual only.
   ======================================================================== */
body.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(18px, 3.2vw, 48px);
    overflow: auto;
    color: #0f172a;
    background:
        linear-gradient(120deg, rgba(6, 17, 42, .42), rgba(13, 35, 64, .12) 46%, rgba(3, 12, 29, .34)),
        url('../img/bg-login.png') center center / cover no-repeat scroll;
    isolation: isolate;
}

body.login-page::before,
body.login-page::after {
    content: '';
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(2px);
    opacity: .32;
    animation: loginAmbientFloat 12s ease-in-out infinite alternate;
}

body.login-page::before {
    width: min(34vw, 520px);
    aspect-ratio: 1;
    top: -16vw;
    left: 24%;
    background: radial-gradient(circle, rgba(255,255,255,.3), rgba(255,255,255,0) 70%);
}

body.login-page::after {
    width: min(29vw, 430px);
    aspect-ratio: 1;
    right: -8vw;
    bottom: -11vw;
    background: radial-gradient(circle, rgba(78, 153, 218, .24), rgba(78,153,218,0) 72%);
    animation-delay: -5s;
}

@keyframes loginAmbientFloat {
    from { transform: translate3d(0, -10px, 0) scale(.98); }
    to   { transform: translate3d(18px, 18px, 0) scale(1.05); }
}


/* Palette follows bg-login.png: deep blue + bright blue + warm orange. */
body.login-page {
    --login-blue-deep: #123c8c;
    --login-blue: #2563eb;
    --login-blue-soft: #5b9df9;
    --login-orange: #ff8f1f;
}

body.login-page .pattern-nip-wrap,
body.login-page .input-icon-group {
    transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .28s ease, background-color .28s ease;
}

body.login-page .input-icon-group .field-icon,
body.login-page .password-wrapper .toggle-eye {
    color: var(--login-blue-deep);
    transition: color .22s ease, transform .22s cubic-bezier(.22,1,.36,1);
}

body.login-page .input-icon-group:focus-within .field-icon,
body.login-page .pattern-nip-wrap:focus-within i {
    color: var(--login-orange);
    transform: scale(1.06);
}

body.login-page .auth-wrapper {
    width: min(1080px, calc(100vw - 64px));
    max-width: 1080px;
    min-height: min(700px, calc(100dvh - 64px));
    height: min(700px, calc(100dvh - 64px));
    max-height: 760px;
    margin: auto;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.56);
    background: rgba(238, 244, 250, .28);
    box-shadow:
        0 34px 90px rgba(2, 12, 30, .38),
        0 8px 26px rgba(2, 12, 30, .18),
        inset 0 1px 0 rgba(255,255,255,.72);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    backdrop-filter: blur(24px) saturate(120%);
    overflow: hidden;
}

body.login-page .auth-wrapper::before,
body.login-page .auth-wrapper::after {
    content: '';
    position: absolute;
    z-index: 3;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
}

body.login-page .auth-wrapper::before {
    width: 230px;
    height: 230px;
    left: -145px;
    bottom: -80px;
}

body.login-page .auth-wrapper::after {
    width: 260px;
    height: 260px;
    left: 18%;
    top: -154px;
}

body.login-page .auth-brand {
    flex: 0 0 50%;
    width: 50%;
    padding: 0;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.17);
    background: rgba(4, 24, 46, .36);
    overflow: hidden;
    isolation: isolate;
}

body.login-page .auth-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(3,20,43,.16), rgba(4,27,50,.52)),
        radial-gradient(circle at 54% 20%, rgba(255,255,255,.12), transparent 38%);
}

body.login-page .auth-brand::after {
    content: '';
    position: absolute;
    z-index: 2;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    right: -85px;
    top: 35%;
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 0 0 34px rgba(255,255,255,.025);
}

body.login-page .auth-brand .auth-illustration {
    position: absolute;
    inset: -3%;
    z-index: 0;
    width: 106%;
    height: 106%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    filter: saturate(.82) brightness(.62) blur(1.8px);
    transform: scale(1.04);
    transition: opacity .45s ease, transform .8s cubic-bezier(.2,.8,.2,1), filter .45s ease;
}

body.login-page .auth-wrapper.animating .auth-brand .auth-illustration {
    transform: scale(1.09);
}

body.login-page .auth-brand-content {
    position: relative;
    z-index: 4;
    width: min(76%, 360px);
    margin: auto;
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 16px rgba(0,0,0,.32);
    animation: brandContentIn .9s cubic-bezier(.16,1,.3,1) .08s both;
}

@keyframes brandContentIn {
    from { opacity: 0; transform: translateY(24px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

body.login-page .auth-brand-logo-wrap {
    width: 92px;
    height: 92px;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
    border-radius: 26px;
    border: 1px solid rgba(255, 210, 96, .6);
    background: rgba(255,255,255,.07);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 14px 30px rgba(0,0,0,.12);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

body.login-page .auth-brand-logo {
    position: static;
    width: 62px;
    height: 62px;
    max-width: 62px;
    object-fit: contain;
    border-radius: 0;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.2));
}

body.login-page .auth-brand-region {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.92);
}

body.login-page .auth-brand h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(22px, 2.1vw, 30px);
    line-height: 1.18;
    font-weight: 900;
    text-wrap: balance;
}

body.login-page .auth-brand-divider {
    display: block;
    width: 52px;
    height: 3px;
    margin: 28px auto 24px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f9c84b, #fff1a4);
    box-shadow: 0 0 18px rgba(249,200,75,.38);
}

body.login-page .auth-brand-app-name {
    margin: 0;
    color: rgba(255,255,255,.91);
    font-size: 15px;
    line-height: 1.5;
    font-weight: 700;
}

body.login-page .auth-form {
    flex: 0 0 50%;
    width: 50%;
    padding: clamp(28px, 3.2vw, 48px) clamp(34px, 4vw, 58px);
    background:
        linear-gradient(145deg, rgba(255,255,255,.90), rgba(247,250,255,.82));
    -webkit-backdrop-filter: blur(28px) saturate(112%);
    backdrop-filter: blur(28px) saturate(112%);
    overflow: hidden;
}

body.login-page .auth-panel-pane {
    justify-content: center;
    padding: 0 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(100,116,139,.32) transparent;
}

body.login-page .auth-panel-pane::-webkit-scrollbar { width: 5px; }
body.login-page .auth-panel-pane::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(100,116,139,.28);
}

body.login-page .auth-header-identity {
    display: block;
    margin: 0 0 22px;
    padding: 0 0 21px;
    border: 0;
    border-bottom: 1px solid rgba(71, 85, 105, .22);
    text-align: center;
}

/* Institution identity lives on the brand pane on this login layout. */
body.login-page .auth-header-identity > .auth-header-logo,
body.login-page .auth-header-identity .auth-header-text > h2,
body.login-page .auth-header-identity .auth-header-text > .subtitle {
    display: none;
}

body.login-page .auth-header-text {
    display: block;
}

body.login-page .live-clock {
    margin: 0;
    color: #080f1b;
    text-align: center;
    letter-spacing: normal;
}

body.login-page .live-clock-time,
body.login-page .live-clock-date {
    display: block;
}

body.login-page .live-clock-time {
    font-size: clamp(38px, 4.1vw, 58px);
    line-height: 1;
    font-weight: 400;
    letter-spacing: .015em;
    font-variant-numeric: tabular-nums;
}

body.login-page .live-clock-date {
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    color: #1f2937;
    text-transform: capitalize;
}

body.login-page .pattern-section {
    gap: 9px;
}

body.login-page .pattern-nip-wrap,
body.login-page .input-icon-group {
    border: 1px solid rgba(27,78,161,.14);
    background: rgba(255,255,255,.78);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.58),
        0 7px 18px rgba(30, 55, 75, .05);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

body.login-page .pattern-nip-wrap {
    min-height: 50px;
    padding: 4px 16px;
    border-radius: 999px;
}

body.login-page .pattern-nip-wrap:focus-within,
body.login-page .input-icon-group:focus-within {
    border-color: rgba(28,92,210,.56);
    background: rgba(255,255,255,.96);
    box-shadow: 0 0 0 4px rgba(37,99,235,.10), 0 10px 28px rgba(18,60,140,.10), inset 0 1px 0 rgba(255,255,255,.92);
    transform: translateY(-1px);
}

body.login-page .pattern-nip-wrap i {
    color: #1547a3;
}

body.login-page .pattern-nip-wrap input {
    color: #152230;
    font-size: 14px;
}

body.login-page .pattern-nip-wrap input::placeholder {
    color: #687888;
}

body.login-page .pattern-hint {
    margin: 8px 0 0;
    color: #111827;
    font-size: 13px;
    font-weight: 700;
}

body.login-page .pattern-canvas-wrap {
    width: 218px;
    height: 218px;
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(250,252,255,.82));
    border: 1px solid rgba(255,255,255,.95);
    box-shadow: 0 18px 45px rgba(18,60,140,.10), inset 0 1px 0 rgba(255,255,255,1);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
}

body.login-page #patternCanvas {
    width: 218px;
    height: 218px;
}

body.login-page .pattern-status {
    margin: -2px 0 0;
    min-height: 19px;
    font-size: 12px;
}

body.login-page .auth-buttons {
    margin-top: 8px;
    gap: 12px;
}

body.login-page .auth-buttons button,
body.login-page .auth-buttons a {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    border: 1px solid rgba(21,71,163,.13) !important;
    background: rgba(255,255,255,.72);
    color: #1547a3;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 20px rgba(18,60,140,.10);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    backdrop-filter: blur(14px) saturate(135%);
    transition: transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s cubic-bezier(.22,1,.36,1), background-color .25s ease, border-color .25s ease, color .25s ease;
}

body.login-page .auth-buttons button:hover,
body.login-page .auth-buttons a:hover {
    transform: translateY(-3px) scale(1.045);
    background: rgba(255,255,255,.96);
    border-color: rgba(255,159,28,.34) !important;
    color: #0f3f94;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 16px 34px rgba(18,60,140,.16), 0 0 0 1px rgba(255,159,28,.06);
}

body.login-page .auth-buttons button:active,
body.login-page .auth-buttons a:active {
    transform: translateY(0) scale(.97);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 5px 12px rgba(18,60,140,.10);
    transition-duration: .12s;
}

body.login-page .btn-fingerprint {
    color: #1547a3;
}

body.login-page .btn-switch {
    color: #ff8f1f;
}

body.login-page .flash-alert {
    top: 18px;
    max-width: min(92vw, 560px);
    border: 1px solid rgba(255,255,255,.24);
}

/* Registration pane inherits the same glass language without changing its flow. */
body.login-page .auth-panel-pane:nth-child(2) form {
    width: 100%;
}

body.login-page .auth-panel-pane:nth-child(2) .input-icon-group {
    margin-bottom: 12px;
    border-radius: 999px;
    padding-left: 18px;
    padding-right: 18px;
    transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .28s ease, background-color .28s ease;
}

body.login-page .auth-panel-pane:nth-child(2) .input-icon-group .field-icon {
    color: #1547a3;
}

body.login-page .auth-panel-pane:nth-child(2) .input-icon-group:nth-of-type(even) .field-icon {
    color: #ff8f1f;
}

body.login-page .auth-panel-pane:nth-child(2) .btn-verify-nip {
    border-radius: 999px;
    min-height: 48px;
    border: 1px solid rgba(255,255,255,.26);
    background: linear-gradient(135deg, #174aa6 0%, #2563eb 58%, #2d74f2 100%);
    box-shadow: 0 10px 26px rgba(21,71,163,.22), inset 0 1px 0 rgba(255,255,255,.22);
    transition: transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s cubic-bezier(.22,1,.36,1), filter .25s ease;
}

body.login-page .auth-panel-pane:nth-child(2) .btn-verify-nip:hover {
    transform: translateY(-2px) scale(1.012);
    filter: brightness(1.035) saturate(1.04);
    box-shadow: 0 16px 34px rgba(21,71,163,.28), 0 4px 12px rgba(255,143,31,.12), inset 0 1px 0 rgba(255,255,255,.28);
}

body.login-page .auth-panel-pane:nth-child(2) .btn-verify-nip:active {
    transform: scale(.985);
    box-shadow: 0 6px 15px rgba(21,71,163,.20), inset 0 1px 0 rgba(255,255,255,.20);
    transition-duration: .12s;
}

body.login-page .auth-panel-pane:nth-child(2) .btn-verify-nip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(37,99,235,.16), 0 14px 30px rgba(21,71,163,.24);
}

body.login-page #regPanelPatternCanvas {
    background: rgba(255,255,255,.25) !important;
    border: 1px solid rgba(255,255,255,.54);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.54);
}

/* Tablet landscape / smaller notebooks */
@media (max-width: 1080px) {
    body.login-page {
        padding: 22px;
    }

    body.login-page .auth-wrapper {
        width: min(940px, calc(100vw - 44px));
        height: min(650px, calc(100dvh - 44px));
        min-height: 610px;
        border-radius: 26px;
    }

    body.login-page .auth-form {
        padding: 30px 34px;
    }

    body.login-page .auth-brand-content {
        width: 78%;
    }

    body.login-page .auth-brand-logo-wrap {
        width: 80px;
        height: 80px;
        margin-bottom: 18px;
    }

    body.login-page .auth-brand-logo {
        width: 54px;
        height: 54px;
    }
}

/* Tablet portrait: preserve both-pane feel but stack it cleanly. */
@media (max-width: 820px) {
    body.login-page {
        align-items: flex-start;
        padding: 20px;
        background-attachment: scroll;
    }

    body.login-page .auth-wrapper {
        flex-direction: column;
        width: min(620px, calc(100vw - 40px));
        max-width: 620px;
        height: auto;
        min-height: 0;
        max-height: none;
        margin: auto;
        border-radius: 26px;
        overflow: hidden;
    }

    body.login-page .auth-brand,
    body.login-page .auth-form {
        width: 100%;
        flex: none;
        transform: none !important;
    }

    body.login-page .auth-brand {
        min-height: 245px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.2);
    }

    body.login-page .auth-brand .auth-illustration {
        object-position: center 48%;
    }

    body.login-page .auth-brand-content {
        width: 86%;
        padding: 28px 0;
    }

    body.login-page .auth-brand-logo-wrap {
        width: 64px;
        height: 64px;
        margin-bottom: 12px;
        border-radius: 18px;
    }

    body.login-page .auth-brand-logo {
        width: 44px;
        height: 44px;
    }

    body.login-page .auth-brand-region {
        margin-bottom: 5px;
        font-size: 10px;
    }

    body.login-page .auth-brand h1 {
        font-size: clamp(19px, 4vw, 25px);
    }

    body.login-page .auth-brand-divider {
        margin: 14px auto 12px;
    }

    body.login-page .auth-brand-app-name {
        font-size: 12px;
    }

    body.login-page .auth-form {
        min-height: 500px;
        padding: 28px clamp(24px, 7vw, 48px) 32px;
    }

    body.login-page .auth-wrapper.animating .auth-brand,
    body.login-page .auth-wrapper.animating .auth-form {
        opacity: 1;
    }

    /* ── FIX: Hapus efek blur yang menyebabkan resolusi pecah di tablet/ponsel ── */

    /* Sembunyikan blob aurora latar (body::before / body::after dari auth.css global) */
    body::before,
    body::after {
        display: none !important;
    }

    /* Sembunyikan ambient blobs khusus login-page */
    body.login-page::before,
    body.login-page::after {
        display: none !important;
    }

    /* Auth-wrapper: hapus backdrop-filter — penyebab utama pixelation di mobile/tablet.
       Ganti dengan background solid semi-transparan agar tetap readable. */
    body.login-page .auth-wrapper {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: rgba(215, 230, 248, .92) !important;
    }

    /* Auth-form panel: hapus backdrop-filter */
    body.login-page .auth-form {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(247,250,255,.94)) !important;
    }

    /* Input field & pattern NIP: hapus backdrop-filter */
    body.login-page .pattern-nip-wrap,
    body.login-page .input-icon-group {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: rgba(255,255,255,.92) !important;
    }

    /* Pattern canvas: hapus backdrop-filter */
    body.login-page .pattern-canvas-wrap {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(250,252,255,.95)) !important;
    }

    /* Tombol auth (fingerprint, QR, dll): hapus backdrop-filter */
    body.login-page .auth-buttons button,
    body.login-page .auth-buttons a {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: rgba(255,255,255,.88) !important;
    }

    /* Ilustrasi brand panel: hapus blur(1.8px) dari filter, pertahankan saturate+brightness */
    body.login-page .auth-brand .auth-illustration {
        filter: saturate(.82) brightness(.66) !important;
        will-change: auto !important;
    }

    /* Logo wrap: hapus backdrop-filter */
    body.login-page .auth-brand-logo-wrap {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: rgba(255, 255, 255, .14) !important;
    }
}

/* Phones */
@media (max-width: 520px) {
    body.login-page {
        display: block;
        padding: 12px;
    }

    body.login-page .auth-wrapper {
        width: 100%;
        border-radius: 22px;
    }

    body.login-page .auth-wrapper::before,
    body.login-page .auth-wrapper::after,
    body.login-page .auth-brand::after {
        opacity: .65;
    }

    body.login-page .auth-brand {
        min-height: 190px;
    }

    body.login-page .auth-brand-content {
        padding: 21px 0;
    }

    body.login-page .auth-brand-logo-wrap {
        width: 54px;
        height: 54px;
        margin-bottom: 9px;
        border-radius: 15px;
    }

    body.login-page .auth-brand-logo {
        width: 38px;
        height: 38px;
    }

    body.login-page .auth-brand-region {
        font-size: 9px;
        letter-spacing: .11em;
    }

    body.login-page .auth-brand h1 {
        font-size: 17px;
        line-height: 1.2;
    }

    body.login-page .auth-brand-divider {
        width: 42px;
        height: 2px;
        margin: 10px auto 8px;
    }

    body.login-page .auth-brand-app-name {
        font-size: 11px;
    }

    body.login-page .auth-form {
        min-height: 490px;
        padding: 22px 18px 26px !important;
    }

    body.login-page .auth-header-identity {
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    body.login-page .live-clock-time {
        font-size: 36px;
    }

    body.login-page .live-clock-date {
        margin-top: 5px;
        font-size: 11px;
    }

    body.login-page .pattern-nip-wrap {
        min-height: 45px;
    }

    body.login-page .pattern-canvas-wrap,
    body.login-page #patternCanvas {
        width: 184px !important;
        height: 184px !important;
    }

    body.login-page .auth-buttons button,
    body.login-page .auth-buttons a {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }
}

@media (max-height: 700px) and (min-width: 821px) {
    body.login-page {
        padding-block: 16px;
    }

    body.login-page .auth-wrapper {
        min-height: 0;
        height: calc(100dvh - 32px);
    }

    body.login-page .auth-form {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    body.login-page .auth-header-identity {
        margin-bottom: 12px;
        padding-bottom: 13px;
    }

    body.login-page .live-clock-time {
        font-size: 42px;
    }

    body.login-page .pattern-canvas-wrap,
    body.login-page #patternCanvas {
        width: 190px;
        height: 190px;
    }

    body.login-page .auth-brand-logo-wrap {
        width: 70px;
        height: 70px;
        margin-bottom: 14px;
    }

    body.login-page .auth-brand-logo {
        width: 48px;
        height: 48px;
    }

    body.login-page .auth-brand-divider {
        margin-top: 18px;
        margin-bottom: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.login-page::before,
    body.login-page::after,
    body.login-page .auth-brand-content {
        animation: none !important;
    }
}


/* ==========================================================================\n   Final auth polish: lighter depth, consistent icons, comfortable spacing\n   ========================================================================== */
body.login-page .auth-wrapper {
    box-shadow: 0 16px 42px rgba(2, 12, 30, .18), 0 2px 10px rgba(2, 12, 30, .08), inset 0 1px 0 rgba(255,255,255,.68);
}
body.login-page .auth-brand-logo-wrap {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.08);
}
body.login-page .pattern-nip-wrap,
body.login-page .input-icon-group {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 3px 10px rgba(30,55,75,.035);
}
body.login-page .pattern-nip-wrap:focus-within,
body.login-page .input-icon-group:focus-within {
    box-shadow: 0 0 0 3px rgba(37,99,235,.09), 0 5px 14px rgba(18,60,140,.055), inset 0 1px 0 rgba(255,255,255,.9);
}
body.login-page .pattern-canvas-wrap {
    box-shadow: 0 7px 20px rgba(18,60,140,.055), inset 0 1px 0 rgba(255,255,255,.96);
}
body.login-page .auth-buttons button,
body.login-page .auth-buttons a {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 3px 10px rgba(18,60,140,.06);
    color: #1757a6 !important;
}
body.login-page .auth-buttons button i,
body.login-page .auth-buttons a i,
body.login-page .btn-fingerprint,
body.login-page .btn-switch,
body.login-page .btn-register {
    color: #1757a6 !important;
}
body.login-page .auth-buttons button:hover,
body.login-page .auth-buttons a:hover {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 7px 18px rgba(18,60,140,.09);
    color: #124b96 !important;
}
body.login-page .auth-buttons button:active,
body.login-page .auth-buttons a:active {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 7px rgba(18,60,140,.06);
}
body.login-page .auth-panel-pane:nth-child(2) .input-icon-group .field-icon,
body.login-page .auth-panel-pane:nth-child(2) .input-icon-group:nth-of-type(even) .field-icon,
body.login-page .pattern-nip-wrap i,
body.login-page .toggle-eye i {
    color: #1757a6 !important;
}
body.login-page .auth-panel-pane:nth-child(2) .btn-verify-nip {
    margin-top: 4px;
    margin-bottom: 20px;
    box-shadow: 0 5px 14px rgba(21,71,163,.13), inset 0 1px 0 rgba(255,255,255,.18);
}
body.login-page .auth-panel-pane:nth-child(2) .btn-verify-nip:hover {
    box-shadow: 0 8px 18px rgba(21,71,163,.16), inset 0 1px 0 rgba(255,255,255,.22);
}
body.login-page .auth-panel-pane:nth-child(2) .btn-verify-nip:active {
    box-shadow: 0 3px 9px rgba(21,71,163,.11), inset 0 1px 0 rgba(255,255,255,.16);
}
body.login-page .nip-verification-message {
    min-height: 18px;
    margin: 8px 8px 15px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}
body.login-page #regPanelPatternCanvas {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.48);
}

/* Apple/iOS-inspired SweetAlert used only by authentication flows. */
.swal2-popup.swal-auth-ios {
    width: min(92vw, 390px) !important;
    padding: 26px 24px 22px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255,255,255,.82) !important;
    background: rgba(248,250,252,.94) !important;
    -webkit-backdrop-filter: blur(28px) saturate(145%) !important;
    backdrop-filter: blur(28px) saturate(145%) !important;
    box-shadow: 0 18px 50px rgba(15,23,42,.16), 0 2px 10px rgba(15,23,42,.06) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif !important;
}
.swal2-popup.swal-auth-ios .swal2-icon,
.swal2-popup.swal-auth-ios .swal-auth-ios-icon {
    display: flex !important;
    margin: 0 auto 14px !important;
    width: 58px !important;
    height: 58px !important;
    border-width: 2px !important;
    box-shadow: none !important;
}
.swal2-popup.swal-auth-ios .swal-auth-ios-title {
    margin: 0 !important;
    padding: 0 !important;
    color: #111827 !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
}
.swal2-popup.swal-auth-ios .swal-auth-ios-text,
.swal2-popup.swal-auth-ios .swal2-html-container {
    margin: 9px 0 0 !important;
    padding: 0 4px !important;
    color: #5b6472 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
}
.swal2-popup.swal-auth-ios .swal-auth-ios-actions,
.swal2-popup.swal-auth-ios .swal2-actions {
    width: 100% !important;
    margin: 20px 0 0 !important;
    padding: 0 !important;
}
.swal2-popup.swal-auth-ios .swal-auth-ios-confirm {
    min-width: 118px;
    min-height: 44px;
    padding: 10px 22px;
    border: 0;
    border-radius: 999px;
    background: #0a84ff;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(10,132,255,.18);
    transition: transform .2s cubic-bezier(.22,1,.36,1), background-color .2s ease, box-shadow .2s ease;
}
.swal2-popup.swal-auth-ios .swal-auth-ios-confirm:hover {
    transform: translateY(-1px);
    background: #0077ed;
    box-shadow: 0 6px 16px rgba(10,132,255,.22);
}
.swal2-popup.swal-auth-ios .swal-auth-ios-confirm:active {
    transform: scale(.98);
    box-shadow: 0 2px 7px rgba(10,132,255,.15);
}
.swal-auth-ios-show { animation: authIosAlertIn .28s cubic-bezier(.2,.9,.25,1.15) both !important; }
.swal-auth-ios-hide { animation: authIosAlertOut .20s ease both !important; }
@keyframes authIosAlertIn { from { opacity:0; transform:translateY(9px) scale(.965); } to { opacity:1; transform:none; } }
@keyframes authIosAlertOut { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(5px) scale(.985); } }

/* ==========================================================================\n   Visual refinement v2: softer depth, richer hover, unique icon colors,\n   tablet-landscape compaction. Presentation only; no auth logic changes.\n   ========================================================================== */
body.login-page button,
body.login-page a,
body.login-page .input-icon-group,
body.login-page .pattern-nip-wrap {
    -webkit-tap-highlight-color: transparent;
}

/* 1) Softer depth everywhere: remove stacked/heavy shadows. */
body.login-page .auth-wrapper {
    box-shadow: 0 12px 34px rgba(2, 12, 30, .13), 0 1px 3px rgba(2, 12, 30, .05), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
body.login-page .auth-brand-logo-wrap,
body.login-page .pattern-canvas-wrap,
body.login-page .pattern-nip-wrap,
body.login-page .input-icon-group,
body.login-page #regPanelPatternCanvas {
    box-shadow: 0 2px 8px rgba(18,60,140,.035), inset 0 1px 0 rgba(255,255,255,.72) !important;
}
body.login-page .pattern-nip-wrap:focus-within,
body.login-page .input-icon-group:focus-within {
    box-shadow: 0 0 0 3px rgba(37,99,235,.07), inset 0 1px 0 rgba(255,255,255,.88) !important;
}

/* 2) More obvious but still Apple-like hover states. */
@media (hover:hover) and (pointer:fine) {
    body.login-page .pattern-nip-wrap:hover,
    body.login-page .input-icon-group:hover {
        transform: translateY(-1px);
        border-color: rgba(37,99,235,.34);
        background: rgba(255,255,255,.96);
    }
    body.login-page .auth-buttons button:hover,
    body.login-page .auth-buttons a:hover {
        transform: translateY(-3px) scale(1.055);
        background: rgba(255,255,255,.98);
        border-color: rgba(255,255,255,.98);
        box-shadow: 0 7px 18px rgba(15,23,42,.08) !important;
    }
    body.login-page .btn-verify-nip:hover {
        transform: translateY(-2px) scale(1.01);
        filter: saturate(1.05) brightness(1.025);
        box-shadow: 0 6px 14px rgba(21,71,163,.11) !important;
    }
    body.login-page .toggle-eye:hover {
        transform: translateY(-50%) scale(1.08);
        background: rgba(255,255,255,.8);
    }
}

/* 3) No rectangular click/focus shadow. Keep only shape-following focus treatment. */
body.login-page button,
body.login-page a,
body.login-page .auth-buttons button,
body.login-page .auth-buttons a,
body.login-page .btn-verify-nip,
body.login-page .toggle-eye {
    outline: none !important;
}
body.login-page .auth-buttons button,
body.login-page .auth-buttons a {
    border-radius: 999px !important;
    box-shadow: none !important;
}
body.login-page .auth-buttons button:focus,
body.login-page .auth-buttons button:focus-visible,
body.login-page .auth-buttons a:focus,
body.login-page .auth-buttons a:focus-visible,
body.login-page .auth-buttons button:active,
body.login-page .auth-buttons a:active {
    outline: none !important;
    box-shadow: none !important;
}
body.login-page .auth-buttons button:active,
body.login-page .auth-buttons a:active {
    transform: scale(.95);
}
body.login-page .btn-verify-nip:focus,
body.login-page .btn-verify-nip:focus-visible,
body.login-page .btn-verify-nip:active {
    outline: none !important;
    box-shadow: none !important;
}
body.login-page .btn-verify-nip:active {
    transform: scale(.985);
}
body.login-page .toggle-eye:focus,
body.login-page .toggle-eye:focus-visible,
body.login-page .toggle-eye:active {
    outline: none !important;
    box-shadow: none !important;
}

/* 4) Every action and field icon gets its own semantic accent color. */
body.login-page .pattern-nip-wrap > i { color:#0A84FF !important; } /* identifier blue */
body.login-page .auth-panel-pane:nth-child(2) .input-icon-group:nth-of-type(1) .field-icon { color:#5E5CE6 !important; } /* NIP indigo */
body.login-page #registerExtraFields > .input-icon-group:nth-child(1) .field-icon { color:#AF52DE !important; } /* username purple */
body.login-page #registerExtraFields > .input-icon-group:nth-child(2) .field-icon { color:#FF9F0A !important; } /* email amber */
body.login-page #registerExtraFields > .password-wrapper:nth-child(3) .field-icon { color:#30B0C7 !important; } /* password cyan */
body.login-page #registerExtraFields > .password-wrapper:nth-child(4) .field-icon { color:#FF375F !important; } /* confirm pink */
body.login-page #registerExtraFields > .password-wrapper:nth-child(3) .toggle-eye i { color:#34C759 !important; }
body.login-page #registerExtraFields > .password-wrapper:nth-child(4) .toggle-eye i { color:#FF6482 !important; }

body.login-page #biometricLoginBtn i { color:#0A84FF !important; }
body.login-page #toRegisterBtn i { color:#FF9F0A !important; }
body.login-page #toLoginBtn i { color:#30B0C7 !important; }
body.login-page #regToPatternBtn i { color:#AF52DE !important; }
body.login-page #regBackToStep2Btn i { color:#5E5CE6 !important; }
body.login-page #regSubmitBtn i { color:#34C759 !important; }

/* Preserve each icon color on hover instead of recoloring the whole button. */
body.login-page .auth-buttons button:hover i,
body.login-page .auth-buttons a:hover i { filter: saturate(1.12) brightness(.94); }

/* Stronger point feedback on both mouse hover and touched/selected points. */
body.login-page .pattern-canvas-wrap,
body.login-page #regPanelPatternCanvas { transition: transform .22s ease, border-color .22s ease, background .22s ease; }
@media (hover:hover) and (pointer:fine) {
    body.login-page .pattern-canvas-wrap:hover,
    body.login-page #regPanelPatternCanvas:hover {
        transform: scale(1.012);
        border-color: rgba(10,132,255,.22);
    }
}

/* 5) Tablet landscape: compact vertically so the card does not run long. */
@media (min-width: 821px) and (max-width: 1180px) and (orientation: landscape) {
    body.login-page {
        padding: 14px 20px;
        align-items: center;
    }
    body.login-page .auth-wrapper {
        width: min(930px, calc(100vw - 40px));
        height: min(580px, calc(100dvh - 28px));
        min-height: 0 !important;
        max-height: calc(100dvh - 28px);
        border-radius: 24px;
    }
    body.login-page .auth-form {
        padding: 20px 30px !important;
        overflow-y: auto;
        scrollbar-width: none;
    }
    body.login-page .auth-form::-webkit-scrollbar { display:none; }
    body.login-page .auth-header-identity {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }
    body.login-page .live-clock-time { font-size: 38px; line-height: 1; }
    body.login-page .live-clock-date { margin-top: 4px; font-size: 10px; }
    body.login-page .pattern-section { gap: 6px; }
    body.login-page .pattern-nip-wrap,
    body.login-page .input-icon-group {
        min-height: 42px;
        margin-bottom: 10px;
    }
    body.login-page .pattern-nip-wrap input,
    body.login-page .input-icon-group input { padding-top: 9px; padding-bottom: 9px; }
    body.login-page .pattern-hint { margin: 4px 0 6px; }
    body.login-page .pattern-canvas-wrap,
    body.login-page #patternCanvas {
        width: 176px !important;
        height: 176px !important;
    }
    body.login-page .auth-buttons { margin-top: 8px !important; gap: 14px; }
    body.login-page .auth-buttons button,
    body.login-page .auth-buttons a {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }
    body.login-page .auth-brand-content { padding-block: 16px; }
    body.login-page .auth-brand-logo-wrap {
        width: 64px;
        height: 64px;
        margin-bottom: 10px;
    }
    body.login-page .auth-brand-logo { width: 44px; height: 44px; }
    body.login-page .auth-brand-divider { margin: 12px auto 10px; }
    body.login-page .nip-verification-message { margin: 5px 8px 9px; min-height: 14px; }
    body.login-page .auth-panel-pane:nth-child(2) .btn-verify-nip { margin-top: 2px; margin-bottom: 12px; }
}

/* ==========================================================================
   Cinematic app-entry bumper + registration spacing polish
   Pure presentation layer; authentication logic remains untouched.
   ========================================================================== */

/* NIP -> verification button: keep the relationship visually tight. */
body.login-page .auth-panel-pane:nth-child(2) .input-icon-group:first-of-type {
    margin-bottom: 6px !important;
}
body.login-page .nip-verification-message {
    min-height: 0 !important;
    margin: 2px 10px 7px !important;
    line-height: 1.35 !important;
}
body.login-page .nip-verification-message:empty {
    display: none;
}
body.login-page .auth-panel-pane:nth-child(2) .btn-verify-nip {
    margin-top: 4px !important;
    margin-bottom: 14px !important;
}

/* The intro is enabled by a tiny head script only once per tab/session. */
.cinematic-intro { display: none; }
html.auth-intro-pending .cinematic-intro {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background: #061225;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Nunito", system-ui, sans-serif;
    /* Limit repaint scope only within this element */
    contain: layout paint;
    /* Promote intro as its own GPU layer immediately */
    transform: translateZ(0);
}
body.cinematic-intro-active { overflow: hidden !important; }
html.auth-intro-pending body.login-page .auth-wrapper {
    opacity: 0;
    transform: scale(.985) translateY(10px);
}
body.login-page .auth-wrapper {
    transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
body.cinematic-intro-reveal .auth-wrapper {
    opacity: 1 !important;
    transform: none !important;
}

.cinematic-intro__bg,
.cinematic-intro__depth,
.cinematic-intro__aurora,
.cinematic-intro__beam,
.cinematic-intro__grain,
.cinematic-intro__vignette {
    position: absolute;
    inset: -4%;
    pointer-events: none;
}
.cinematic-intro__bg {
    z-index: -9;
    background: url('../img/bg-login.webp') center center / cover no-repeat,
                url('../img/bg-login.png') center center / cover no-repeat;
    filter: saturate(1.08) contrast(1.04) brightness(.72);
    transform: scale(1.13);
    animation: cinematicCameraPush 5.4s cubic-bezier(.2,.72,.18,1) both;
    will-change: transform, filter;
}
.cinematic-intro__depth--one {
    z-index: -8;
    background:
        linear-gradient(110deg, rgba(3,12,29,.72) 0%, rgba(3,12,29,.08) 38%, rgba(3,12,29,.44) 100%),
        radial-gradient(circle at 50% 44%, transparent 0 18%, rgba(2,8,23,.22) 58%, rgba(2,8,23,.64) 100%);
    animation: cinematicDepthBreath 4.6s ease-in-out both;
}
.cinematic-intro__depth--two {
    z-index: -7;
    inset: -15%;
    background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.10), transparent 28%);
    filter: blur(38px);
    animation: cinematicDepthDrift 4.8s ease-out both;
    will-change: transform, opacity;
}
.cinematic-intro__aurora {
    z-index: -6;
    width: 52vw;
    height: 52vw;
    min-width: 420px;
    min-height: 420px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .22;
    mix-blend-mode: screen;
    will-change: transform;
}
.cinematic-intro__aurora--blue {
    inset: -18vw auto auto -12vw;
    background: #23a9ff;
    animation: cinematicAuroraBlue 6s ease-in-out infinite alternate;
}
.cinematic-intro__aurora--amber {
    inset: auto -17vw -20vw auto;
    background: #ff8a32;
    opacity: .16;
    animation: cinematicAuroraAmber 6.6s ease-in-out infinite alternate;
}
.cinematic-intro__beam {
    z-index: -5;
    inset: -30% -60%;
    background: linear-gradient(112deg, transparent 42%, rgba(255,255,255,.03) 47%, rgba(255,255,255,.28) 50%, rgba(100,197,255,.08) 53%, transparent 58%);
    transform: translateX(-34%) rotate(-4deg);
    animation: cinematicLightSweep 3.4s 1s cubic-bezier(.2,.75,.3,1) both;
}
.cinematic-intro__grain {
    z-index: 20;
    inset: 0;
    opacity: .12;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.28) 0 .6px, transparent .7px),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,.20) 0 .55px, transparent .65px);
    background-size: 7px 7px, 9px 9px;
    mix-blend-mode: soft-light;
    animation: cinematicGrain .22s steps(2) infinite;
}
.cinematic-intro__vignette {
    z-index: 19;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(1,7,18,.42), transparent 22%, transparent 72%, rgba(1,7,18,.62)),
        radial-gradient(ellipse at center, transparent 32%, rgba(1,7,18,.24) 68%, rgba(1,7,18,.72) 115%);
}

.cinematic-intro__particles {
    position: absolute;
    inset: 0;
    z-index: -3;
    pointer-events: none;
}
.cinematic-intro__particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.72);
    box-shadow: 0 0 18px rgba(111,201,255,.85);
    opacity: 0;
    animation: cinematicParticle 4.5s ease-in-out infinite;
}
.cinematic-intro__particles span:nth-child(1) { left:12%; top:72%; animation-delay:.2s; }
.cinematic-intro__particles span:nth-child(2) { left:25%; top:22%; animation-delay:1.1s; transform:scale(.7); }
.cinematic-intro__particles span:nth-child(3) { left:72%; top:18%; animation-delay:.65s; transform:scale(.55); }
.cinematic-intro__particles span:nth-child(4) { left:83%; top:68%; animation-delay:1.7s; transform:scale(.9); }
.cinematic-intro__particles span:nth-child(5) { left:61%; top:82%; animation-delay:2.3s; transform:scale(.6); }
.cinematic-intro__particles span:nth-child(6) { left:39%; top:76%; animation-delay:2.9s; transform:scale(.45); }

.cinematic-intro__stage {
    position: relative;
    z-index: 3;
    width: min(900px, 88vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: translateY(-1vh);
}
.cinematic-intro__mark {
    position: relative;
    width: clamp(100px, 9vw, 138px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 32%;
    background: linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.08));
    border: 1px solid rgba(255,255,255,.34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.52), 0 20px 60px rgba(1,7,18,.28);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
    backdrop-filter: blur(24px) saturate(135%);
    opacity: 0;
    transform: scale(.55) rotate(-8deg);
    animation: cinematicMarkReveal .95s .34s cubic-bezier(.16,1,.3,1) forwards;
    will-change: transform, opacity;
}
.cinematic-intro__logo {
    width: 66%;
    height: 66%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.18));
}
.cinematic-intro__fallback-logo {
    font-size: clamp(44px, 5vw, 70px);
    color: #ffd06a;
}
.cinematic-intro__ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(170,220,255,.34);
    opacity: 0;
}
.cinematic-intro__ring--outer {
    inset: -26px;
    animation: cinematicRingPulse 2.2s .7s ease-out infinite;
}
.cinematic-intro__ring--inner {
    inset: -12px;
    border-color: rgba(255,181,83,.30);
    animation: cinematicRingPulse 2.2s 1.05s ease-out infinite;
}
.cinematic-intro__copy { margin-top: clamp(24px, 3vh, 38px); }
.cinematic-intro__region,
.cinematic-intro__title,
.cinematic-intro__app,
.cinematic-intro__divider {
    opacity: 0;
}
.cinematic-intro__region {
    margin: 0 0 9px;
    color: rgba(232,243,255,.86);
    font-size: clamp(10px, 1vw, 13px);
    font-weight: 800;
    letter-spacing: .28em;
    text-transform: uppercase;
    animation: cinematicTextUp .7s .95s cubic-bezier(.22,1,.36,1) forwards;
}
.cinematic-intro__title {
    max-width: 900px;
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 4vw, 58px);
    line-height: 1.06;
    font-weight: 780;
    letter-spacing: -.035em;
    text-wrap: balance;
    text-shadow: 0 8px 30px rgba(0,0,0,.20);
    animation: cinematicTextUp .82s 1.14s cubic-bezier(.22,1,.36,1) forwards;
}
.cinematic-intro__divider {
    display: block;
    width: 0;
    height: 2px;
    margin: clamp(16px,2.2vh,24px) auto 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #43b5ff, #fff4ca 52%, #ff9d4d);
    box-shadow: 0 0 18px rgba(255,184,91,.35);
    animation: cinematicDivider 1s 1.52s cubic-bezier(.16,1,.3,1) forwards;
}
.cinematic-intro__app {
    margin: 0;
    color: rgba(235,244,255,.84);
    font-size: clamp(13px, 1.4vw, 18px);
    font-weight: 600;
    letter-spacing: .04em;
    animation: cinematicTextUp .72s 1.64s cubic-bezier(.22,1,.36,1) forwards;
}
.cinematic-intro__progress {
    width: min(280px, 52vw);
    height: 2px;
    margin-top: clamp(30px, 5vh, 52px);
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    opacity: 0;
    animation: cinematicFade .4s 1.95s ease forwards;
}
.cinematic-intro__progress span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1ba2ff, #a8dcff 48%, #ff9d4d);
    transform-origin: left center;
    transform: scaleX(0);
    box-shadow: 0 0 18px rgba(68,180,255,.55);
    animation: cinematicProgress 2.15s 2.02s cubic-bezier(.24,.78,.24,1) forwards;
}
.cinematic-intro__skip {
    position: absolute;
    right: clamp(18px, 3vw, 44px);
    bottom: clamp(18px, 3vw, 40px);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(5,16,36,.24);
    color: rgba(255,255,255,.72);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    opacity: 0;
    transform: translateY(6px);
    animation: cinematicSkipIn .5s 2.1s ease forwards;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s cubic-bezier(.22,1,.36,1);
}
.cinematic-intro__skip:hover {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.34);
    transform: translateY(-1px);
}
.cinematic-intro__skip:focus-visible {
    outline: 2px solid rgba(126,203,255,.9);
    outline-offset: 3px;
}

.cinematic-intro--leaving {
    animation: cinematicExit .92s cubic-bezier(.22,.75,.22,1) forwards;
}
.cinematic-intro--leaving .cinematic-intro__stage {
    animation: cinematicStageExit .82s cubic-bezier(.22,.75,.22,1) forwards;
}
.cinematic-intro--leaving .cinematic-intro__bg {
    animation: cinematicBgExit .92s cubic-bezier(.22,.75,.22,1) forwards;
}
.cinematic-intro--skip { animation: cinematicExit .24s ease forwards; }

@keyframes cinematicCameraPush {
    0% { transform: scale(1.13); filter:saturate(.9) contrast(1.05) brightness(.54); }
    100% { transform: scale(1.035); filter:saturate(1.1) contrast(1.03) brightness(.72); }
}
@keyframes cinematicDepthBreath { from { opacity:.82; } to { opacity:1; } }
@keyframes cinematicDepthDrift { from { transform:translate3d(-4%,2%,0) scale(.9); opacity:0; } to { transform:translate3d(3%,-1%,0) scale(1.1); opacity:1; } }
@keyframes cinematicAuroraBlue { from { transform:translate3d(-4%,0,0) scale(.9); } to { transform:translate3d(14%,8%,0) scale(1.12); } }
@keyframes cinematicAuroraAmber { from { transform:translate3d(0,4%,0) scale(.88); } to { transform:translate3d(-12%,-8%,0) scale(1.08); } }
@keyframes cinematicLightSweep { 0% { transform:translateX(-35%) rotate(-4deg); opacity:0; } 18% { opacity:1; } 100% { transform:translateX(34%) rotate(-4deg); opacity:0; } }
@keyframes cinematicGrain { 0% { transform:translate(0,0); } 25% { transform:translate(-1%,1%); } 50% { transform:translate(1%,-1%); } 75% { transform:translate(1%,1%); } 100% { transform:translate(0,0); } }
@keyframes cinematicParticle { 0%,100% { opacity:0; transform:translateY(18px) scale(.5); } 42% { opacity:.9; } 70% { opacity:.3; transform:translateY(-34px) scale(1); } }
@keyframes cinematicMarkReveal { 0% { opacity:0; transform:scale(.55) rotate(-8deg); } 70% { opacity:1; transform:scale(1.04) rotate(.5deg); } 100% { opacity:1; transform:scale(1) rotate(0); } }
@keyframes cinematicRingPulse { 0% { opacity:0; transform:scale(.75); } 25% { opacity:.42; } 100% { opacity:0; transform:scale(1.35); } }
@keyframes cinematicTextUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes cinematicDivider { 0% { opacity:0; width:0; } 100% { opacity:1; width:min(118px,24vw); } }
@keyframes cinematicFade { to { opacity:1; } }
@keyframes cinematicProgress { to { transform:scaleX(1); } }
@keyframes cinematicSkipIn { to { opacity:1; transform:none; } }
@keyframes cinematicExit { 0% { opacity:1; } 100% { opacity:0; visibility:hidden; } }
@keyframes cinematicStageExit { to { opacity:0; transform:translateY(-12px) scale(1.035); } }
@keyframes cinematicBgExit { to { transform:scale(1); filter:saturate(1.12) brightness(.9); } }

/* Tablet: preserve the cinematic feel but keep branding within the shorter viewport. */
@media (min-width: 600px) and (max-width: 1180px) {
    .cinematic-intro__stage { width:min(720px, 82vw); }
    .cinematic-intro__mark { width:clamp(92px, 11vw, 118px); }
    .cinematic-intro__title { font-size:clamp(28px, 4.8vw, 48px); }
}
@media (min-width: 700px) and (max-width: 1180px) and (orientation: landscape) {
    .cinematic-intro__stage { transform:translateY(-2vh); }
    .cinematic-intro__mark { width:88px; border-radius:26%; }
    .cinematic-intro__copy { margin-top:18px; }
    .cinematic-intro__region { margin-bottom:6px; }
    .cinematic-intro__title { font-size:clamp(25px, 3.7vw, 39px); }
    .cinematic-intro__divider { margin-top:13px; margin-bottom:10px; }
    .cinematic-intro__progress { margin-top:22px; }
}

/* Phone: use a taller composition and calmer light effects. */
@media (max-width: 599px) {
    .cinematic-intro__bg { background-position: center center; }
    .cinematic-intro__stage { width:86vw; transform:translateY(-3vh); }
    .cinematic-intro__mark { width:92px; border-radius:28%; }
    .cinematic-intro__copy { margin-top:28px; }
    .cinematic-intro__region { font-size:9px; letter-spacing:.22em; margin-bottom:8px; }
    .cinematic-intro__title { font-size:clamp(26px, 8.2vw, 38px); line-height:1.08; }
    .cinematic-intro__app { font-size:12px; line-height:1.5; }
    .cinematic-intro__progress { width:48vw; margin-top:38px; }
    .cinematic-intro__skip { right:16px; bottom:max(16px, env(safe-area-inset-bottom)); padding:9px 13px; }

    /* Aurora: drastically smaller blur radius on phone — visual difference negligible */
    .cinematic-intro__aurora { filter:blur(18px) !important; opacity:.14 !important; }

    /* Remove mix-blend-mode — prevents GPU hardware overlay on mobile */
    .cinematic-intro__aurora,
    .cinematic-intro__aurora--blue,
    .cinematic-intro__aurora--amber { mix-blend-mode: normal !important; }

    /* Remove backdrop-filter on animated mark — causes layer thrashing on phone */
    .cinematic-intro__mark {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) !important;
    }

    /* Remove backdrop-filter on skip button */
    .cinematic-intro__skip {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: rgba(3, 10, 28, .78) !important;
    }

    /* Depth layer two: no blur needed on small screens */
    .cinematic-intro__depth--two { filter: none !important; opacity:.5 !important; }

    /* Grain: disable the .22s looping animation — triggers repaint 5x/sec */
    .cinematic-intro__grain { animation: none !important; mix-blend-mode: normal !important; opacity:.04 !important; }

    /* Pause ambient body blobs while intro is active */
    body.cinematic-intro-active::before,
    body.cinematic-intro-active::after { animation: none !important; }

    /* ── FIX Phone: matikan layer GPU terberat pada cinematic intro ── */

    /* Bg intro: hentikan animasi camera-push & will-change agar tidak buat layer raksasa */
    .cinematic-intro__bg {
        animation: none !important;
        will-change: auto !important;
        transform: scale(1.04) !important;
        filter: saturate(1.06) contrast(1.02) brightness(.72) !important;
    }

    /* Depth-two: sudah di-handle (filter: none), sembunyikan juga */
    .cinematic-intro__depth--two { display: none !important; }

    /* Aurora: sembunyikan sepenuhnya (blur 18px + animasi masih berat di HP entry-level) */
    .cinematic-intro__aurora--blue,
    .cinematic-intro__aurora--amber { display: none !important; }

    /* Beam: light-sweep adalah layer besar, hapus di HP */
    .cinematic-intro__beam { display: none !important; }

    /* Grain: sudah animation:none, kurangi opacity lebih jauh */
    .cinematic-intro__grain { display: none !important; }
}

/* Tablet (600–1023px touch): moderate optimizations */
@media (min-width: 600px) and (max-width: 1023px) and (hover: none) {
    /* Aurora: reduce blur for mobile GPU */
    .cinematic-intro__aurora { filter: blur(28px) !important; }
    .cinematic-intro__aurora { mix-blend-mode: normal !important; }

    /* Remove backdrop-filter on animated elements */
    .cinematic-intro__mark {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) !important;
    }
    .cinematic-intro__skip {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: rgba(3, 10, 28, .78) !important;
    }

    /* Grain: still visible but no looping repaint */
    .cinematic-intro__grain { animation: none !important; mix-blend-mode: normal !important; }

    /* Pause ambient blobs during intro */
    body.cinematic-intro-active::before,
    body.cinematic-intro-active::after { animation: none !important; }

    /* ── FIX Tablet: kurangi beban GPU layer cinematic intro ── */

    /* Hentikan camera-push animation (will-change:transform,filter mahal di tablet) */
    .cinematic-intro__bg {
        animation: none !important;
        will-change: auto !important;
        transform: scale(1.04) !important;
    }

    /* Kurangi aurora blur lebih jauh & nonaktifkan will-change */
    .cinematic-intro__aurora { will-change: auto !important; }
    .cinematic-intro__depth--two { will-change: auto !important; }
    .cinematic-intro__beam { display: none !important; }
}

@media (max-width: 380px), (max-height: 620px) {
    .cinematic-intro__mark { width:76px; }
    .cinematic-intro__copy { margin-top:18px; }
    .cinematic-intro__region { margin-bottom:5px; }
    .cinematic-intro__title { font-size:clamp(23px, 7.8vw, 32px); }
    .cinematic-intro__divider { margin-top:12px; margin-bottom:9px; }
    .cinematic-intro__progress { margin-top:22px; }
}

@media (prefers-reduced-motion: reduce) {
    .cinematic-intro *,
    .cinematic-intro *::before,
    .cinematic-intro *::after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .cinematic-intro__mark,
    .cinematic-intro__region,
    .cinematic-intro__title,
    .cinematic-intro__divider,
    .cinematic-intro__app,
    .cinematic-intro__progress,
    .cinematic-intro__skip { opacity:1 !important; transform:none !important; }
    .cinematic-intro__divider { width:min(118px,24vw) !important; }
    .cinematic-intro__progress span { transform:scaleX(1) !important; }
}


/* =========================================================
   Auth SweetAlert — plain iOS presentation
   No success/error glyph; typography and spacing carry state.
   ========================================================= */
.swal2-popup.swal-auth-ios .swal2-icon,
.swal2-popup.swal-auth-ios .swal-auth-ios-icon {
    display: none !important;
}

.swal2-popup.swal-auth-ios {
    padding-top: 1.55rem !important;
    padding-bottom: 1.25rem !important;
}

.swal2-popup.swal-auth-ios .swal-auth-ios-title,
.swal2-popup.swal-auth-ios .swal2-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.swal2-popup.swal-auth-ios .swal-auth-ios-text,
.swal2-popup.swal-auth-ios .swal2-html-container {
    margin-top: .5rem !important;
}

.swal2-popup.swal-auth-ios .swal-auth-ios-actions,
.swal2-popup.swal-auth-ios .swal2-actions {
    margin-top: 1.05rem !important;
}


/* SweetAlert2: progress/timer bar is intentionally hidden for all auth alerts. */
body.login-page .swal2-timer-progress-bar-container,
body.login-page .swal2-timer-progress-bar,
body.register-page .swal2-timer-progress-bar-container,
body.register-page .swal2-timer-progress-bar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}\n\n/* ==========================================================================
   Ambient login scene — additive only.
   IMPORTANT: this layer intentionally does NOT override body.login-page
   background or .auth-brand .auth-illustration. The original desktop
   background and card wallpaper framing remain exactly as authored above.
   ========================================================================== */
.login-ambient-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: .48;
}

.login-ambient-scene__gradient {
    position: absolute;
    inset: -18%;
    background:
        radial-gradient(circle at 18% 28%, rgba(23, 149, 190, .34), transparent 30%),
        radial-gradient(circle at 80% 22%, rgba(37, 99, 235, .32), transparent 34%),
        radial-gradient(circle at 72% 82%, rgba(255, 143, 31, .25), transparent 29%),
        linear-gradient(130deg, rgba(7, 31, 60, .10), rgba(18, 82, 124, .18), rgba(20, 66, 132, .18), rgba(255, 143, 31, .10));
    background-size: 160% 160%, 180% 180%, 170% 170%, 220% 220%;
    animation: loginAmbientGradientDrift 22s ease-in-out infinite alternate;
    transform: translateZ(0);
}

.login-ambient-scene__glow {
    position: absolute;
    width: min(34vw, 500px);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(34px);
    opacity: .26;
    animation: loginAmbientGlowFloat 18s cubic-bezier(.4,0,.2,1) infinite alternate;
}
.login-ambient-scene__glow--one {
    left: -8vw;
    top: 20%;
    background: rgba(24, 174, 190, .45);
}
.login-ambient-scene__glow--two {
    right: -10vw;
    bottom: 8%;
    background: rgba(255, 139, 42, .34);
    animation-delay: -8s;
}

.login-ambient-scene__icons { position: absolute; inset: 0; }
.login-ambient-scene .ambient-icon {
    position: absolute;
    display: block;
    font-size: clamp(16px, 1.7vw, 28px);
    opacity: .58;
    filter: drop-shadow(0 5px 12px rgba(0,0,0,.18));
    animation: loginAmbientIconFloat 15s ease-in-out infinite;
    will-change: transform;
}
.login-ambient-scene .ambient-icon--1  { left: 6%;  top: 18%; color:#5ee7f2; animation-duration:17s; transform:rotate(-18deg); }
.login-ambient-scene .ambient-icon--2  { left: 19%; top: 70%; color:#ffd66b; animation-duration:21s; animation-delay:-7s; }
.login-ambient-scene .ambient-icon--3  { left: 30%; top: 10%; color:#65a9ff; animation-duration:19s; animation-delay:-4s; }
.login-ambient-scene .ambient-icon--4  { left: 42%; top: 82%; color:#72f0be; animation-duration:23s; animation-delay:-10s; }
.login-ambient-scene .ambient-icon--5  { left: 57%; top: 14%; color:#d8ecff; animation-duration:20s; animation-delay:-2s; }
.login-ambient-scene .ambient-icon--6  { left: 68%; top: 69%; color:#72d8ff; animation-duration:18s; animation-delay:-11s; }
.login-ambient-scene .ambient-icon--7  { left: 79%; top: 25%; color:#ffbd6a; animation-duration:22s; animation-delay:-5s; }
.login-ambient-scene .ambient-icon--8  { left: 91%; top: 61%; color:#ffd44d; animation-duration:16s; animation-delay:-9s; }
.login-ambient-scene .ambient-icon--9  { left: 13%; top: 43%; color:#6cdff2; animation-duration:24s; animation-delay:-14s; transform:rotate(12deg); }
.login-ambient-scene .ambient-icon--10 { left: 86%; top: 88%; color:#ff9f43; animation-duration:20s; animation-delay:-3s; }

@keyframes loginAmbientGradientDrift {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1.01) rotate(0deg); background-position: 0% 20%, 100% 10%, 70% 100%, 0% 50%; }
    50%  { transform: translate3d(2%, 1.5%, 0) scale(1.04) rotate(.6deg); background-position: 35% 55%, 65% 45%, 30% 65%, 100% 50%; }
    100% { transform: translate3d(-1%, 2%, 0) scale(1.02) rotate(-.4deg); background-position: 70% 30%, 30% 70%, 80% 20%, 20% 50%; }
}

@keyframes loginAmbientGlowFloat {
    from { transform: translate3d(-12px, -8px, 0) scale(.96); }
    to   { transform: translate3d(28px, 24px, 0) scale(1.08); }
}

@keyframes loginAmbientIconFloat {
    0%,100% { translate: 0 0; rotate: 0deg; }
    25%     { translate: 8px -13px; rotate: 4deg; }
    55%     { translate: -7px -24px; rotate: -3deg; }
    78%     { translate: 10px -9px; rotate: 2deg; }
}

/* Tablet / phone: the ambient layer becomes the outer-page treatment.
   The card wallpaper itself stays on the original auth-illustration rules. */
@media (max-width: 992px) {
    .login-ambient-scene { opacity: .92; }
    .login-ambient-scene__gradient {
        background:
            radial-gradient(circle at 18% 20%, rgba(20, 142, 178, .58), transparent 34%),
            radial-gradient(circle at 82% 22%, rgba(37, 99, 235, .50), transparent 37%),
            radial-gradient(circle at 72% 82%, rgba(255, 143, 31, .34), transparent 34%),
            linear-gradient(145deg, #081e37 0%, #0d3558 42%, #123f70 72%, #173656 100%);
    }
    .login-ambient-scene .ambient-icon { opacity: .46; font-size: clamp(15px, 3vw, 23px); }
    .login-ambient-scene .ambient-icon--4,
    .login-ambient-scene .ambient-icon--7,
    .login-ambient-scene .ambient-icon--10 { display:none; }
}

@media (max-width: 560px) {
    .login-ambient-scene { opacity: .96; }
    .login-ambient-scene__glow { filter: blur(26px); opacity:.20; }
    .login-ambient-scene .ambient-icon { opacity:.38; }
    .login-ambient-scene .ambient-icon--3,
    .login-ambient-scene .ambient-icon--6,
    .login-ambient-scene .ambient-icon--8 { display:none; }
}

@media (prefers-reduced-motion: reduce) {
    .login-ambient-scene__gradient,
    .login-ambient-scene__glow,
    .login-ambient-scene .ambient-icon {
        animation: none !important;
    }
}


/* Desktop login centering guard.
   Ambient scene is fixed and removed from flex flow; auth card stays centered. */
@media (min-width: 993px) {
    body.login-page > .login-ambient-scene {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        flex: none !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }

    body.login-page > .auth-wrapper {
        position: relative !important;
        z-index: 1 !important;
        margin: auto !important;
        flex: 0 0 auto !important;
    }
}


/* ==========================================================================
   PHONE LOGIN BACKGROUND
   Use the dedicated portrait asset without cover-zoom or blur.
   This affects only the OUTER page background; the wallpaper inside the
   identity card remains governed by the existing auth-brand rules.
   ========================================================================== */

@media (max-width: 600px) {
    html {
        background-color: #0a2038 !important;
    }

    body.login-page {
        background-color: #0a2038 !important;
        background-image: url('../img/bg-ponsel.png') !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-size: contain !important;
        background-attachment: scroll !important;
        filter: none !important;
    }

    /* Do not soften or visually enlarge the dedicated phone wallpaper. */
    body.login-page::before,
    body.login-page::after {
        display: none !important;
        content: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: none !important;
        animation: none !important;
        opacity: 0 !important;
    }

    /* Keep the previously-added ambient scene from tinting/blurring the
       phone-specific wallpaper. The login card itself remains unchanged. */
    body.login-page > .login-ambient-scene {
        background: transparent !important;
        background-image: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.login-page > .login-ambient-scene::before,
    body.login-page > .login-ambient-scene::after,
    body.login-page > .login-ambient-scene .ambient-orb {
        display: none !important;
        content: none !important;
        filter: none !important;
    }
}


/* ==========================================================================
   FINAL BACKGROUND / AMBIENT ICON BEHAVIOUR
   1) Desktop + tablet keep their ORIGINAL wallpaper colours: no tint, blur,
      glass overlay or gradient layer is drawn over the page background.
   2) Phone uses bg-ponsel.png as the actual OUTER page background.
   3) Ambient icons float directly over the original wallpaper, with broader
      distribution and quicker but still smooth motion.
   ========================================================================== */

/* The scene is only a transparent positioning layer. */
body.login-page > .login-ambient-scene {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    opacity: 1 !important;
    background: transparent !important;
    background-image: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Absolutely no colour/tint/blur layer over desktop/tablet wallpaper. */
body.login-page .login-ambient-scene__gradient,
body.login-page .login-ambient-scene__glow,
body.login-page .login-ambient-scene__glow--one,
body.login-page .login-ambient-scene__glow--two {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
    filter: none !important;
    opacity: 0 !important;
    animation: none !important;
}

body.login-page > .auth-wrapper {
    position: relative !important;
    z-index: 2 !important;
}

/* More visible, more widely distributed icons, with no glass/tint behind them. */
body.login-page .login-ambient-scene__icons {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

body.login-page .login-ambient-scene .ambient-icon {
    position: absolute !important;
    display: block !important;
    font-size: clamp(15px, 1.45vw, 25px) !important;
    opacity: .78 !important;
    filter: drop-shadow(0 2px 5px rgba(4, 17, 40, .20)) !important;
    animation-name: loginAmbientIconFloatFast !important;
    animation-timing-function: cubic-bezier(.45,.05,.55,.95) !important;
    animation-iteration-count: infinite !important;
    animation-direction: alternate !important;
    will-change: transform !important;
}

/* Spread across the complete viewport. Faster than the previous 16–24s set. */
body.login-page .ambient-icon--1  { left: 3%;  top: 9%;  color:#54e4f0; animation-duration:8.2s !important; animation-delay:-2.1s !important; }
body.login-page .ambient-icon--2  { left: 10%; top: 31%; color:#ffd75f; animation-duration:9.6s !important; animation-delay:-5.2s !important; }
body.login-page .ambient-icon--3  { left: 17%; top: 73%; color:#67aaff; animation-duration:8.8s !important; animation-delay:-3.6s !important; }
body.login-page .ambient-icon--4  { left: 24%; top: 16%; color:#67efbd; animation-duration:10.2s !important; animation-delay:-7.1s !important; }
body.login-page .ambient-icon--5  { left: 31%; top: 89%; color:#d8ecff; animation-duration:7.9s !important; animation-delay:-4.4s !important; }
body.login-page .ambient-icon--6  { left: 38%; top: 43%; color:#5bd8ff; animation-duration:9.1s !important; animation-delay:-1.7s !important; }
body.login-page .ambient-icon--7  { left: 45%; top: 7%;  color:#ffbd67; animation-duration:8.5s !important; animation-delay:-6.4s !important; }
body.login-page .ambient-icon--8  { left: 52%; top: 76%; color:#ffd84a; animation-duration:10.5s !important; animation-delay:-2.9s !important; }
body.login-page .ambient-icon--9  { left: 59%; top: 26%; color:#64e2f0; animation-duration:8.7s !important; animation-delay:-5.8s !important; }
body.login-page .ambient-icon--10 { left: 66%; top: 93%; color:#ff9742; animation-duration:9.4s !important; animation-delay:-3.3s !important; }
body.login-page .ambient-icon--11 { left: 73%; top: 12%; color:#9ed4ff; animation-duration:7.8s !important; animation-delay:-4.9s !important; }
body.login-page .ambient-icon--12 { left: 80%; top: 49%; color:#73efcf; animation-duration:8.9s !important; animation-delay:-1.3s !important; font-size:10px !important; }
body.login-page .ambient-icon--13 { left: 87%; top: 78%; color:#ffaf5c; animation-duration:10.1s !important; animation-delay:-6.8s !important; }
body.login-page .ambient-icon--14 { left: 94%; top: 20%; color:#6bc8ff; animation-duration:8.3s !important; animation-delay:-2.4s !important; }
body.login-page .ambient-icon--15 { left: 7%;  top: 58%; color:#f8a4cf; animation-duration:9.7s !important; animation-delay:-7.5s !important; }
body.login-page .ambient-icon--16 { left: 14%; top: 91%; color:#7cdcff; animation-duration:8.1s !important; animation-delay:-3.7s !important; }
body.login-page .ambient-icon--17 { left: 28%; top: 53%; color:#ff8f88; animation-duration:9.0s !important; animation-delay:-5.5s !important; }
body.login-page .ambient-icon--18 { left: 41%; top: 92%; color:#ffd45e; animation-duration:10.4s !important; animation-delay:-2.0s !important; }
body.login-page .ambient-icon--19 { left: 55%; top: 56%; color:#bba8ff; animation-duration:8.6s !important; animation-delay:-6.2s !important; }
body.login-page .ambient-icon--20 { left: 64%; top: 6%;  color:#85ecff; animation-duration:7.7s !important; animation-delay:-4.1s !important; }
body.login-page .ambient-icon--21 { left: 76%; top: 66%; color:#67e5a9; animation-duration:9.8s !important; animation-delay:-1.9s !important; }
body.login-page .ambient-icon--22 { left: 84%; top: 38%; color:#ffc46b; animation-duration:8.4s !important; animation-delay:-5.9s !important; }
body.login-page .ambient-icon--23 { left: 91%; top: 91%; color:#52d7ff; animation-duration:9.3s !important; animation-delay:-3.0s !important; }
body.login-page .ambient-icon--24 { left: 48%; top: 37%; color:#fff0a8; animation-duration:7.6s !important; animation-delay:-6.9s !important; }

@keyframes loginAmbientIconFloatFast {
    0%   { transform: translate3d(-3px,  5px, 0) rotate(-7deg) scale(.94); }
    20%  { transform: translate3d( 9px,-14px, 0) rotate( 5deg) scale(1.02); }
    45%  { transform: translate3d(-8px,-26px, 0) rotate(-4deg) scale(.98); }
    70%  { transform: translate3d(14px,-12px, 0) rotate( 7deg) scale(1.05); }
    100% { transform: translate3d(-5px,  8px, 0) rotate(-5deg) scale(.96); }
}

/* TABLET: retain the exact original body background; only icons are added. */
@media (min-width: 601px) and (max-width: 1180px) {
    body.login-page .login-ambient-scene .ambient-icon {
        opacity: .72 !important;
        font-size: clamp(14px, 2.2vw, 22px) !important;
    }
}

/* PHONE: use the dedicated portrait wallpaper as the real page background.
   100% auto preserves the image's native ratio: no cover zoom, no blur. */
@media (max-width: 600px) {
    html {
        background: #0a2038 !important;
    }

    body.login-page {
        background-color: #0a2038 !important;
        background-image: url('../img/bg-ponsel.png') !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-size: 100% auto !important;
        background-attachment: scroll !important;
        filter: none !important;
    }

    /* Any legacy body aurora must not obscure the phone wallpaper. */
    body.login-page::before,
    body.login-page::after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
        background: none !important;
        background-image: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: none !important;
        animation: none !important;
    }

    /* Keep icons visible over bg-ponsel, without any coloured ambient layer. */
    body.login-page .login-ambient-scene .ambient-icon {
        opacity: .72 !important;
        font-size: clamp(13px, 4vw, 20px) !important;
    }

    /* On a narrow viewport, hide only a few icons to prevent collisions
       while still keeping the scene much denser than before. */
    body.login-page .ambient-icon--4,
    body.login-page .ambient-icon--8,
    body.login-page .ambient-icon--12,
    body.login-page .ambient-icon--18 {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.login-page .login-ambient-scene .ambient-icon {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ==========================================================================
   PHONE — FULL SCREEN MOBILE APP MODE
   The login UI becomes the application surface itself:
   no floating card, no outer margin, no border/radius/shadow.
   Sizes adapt to both viewport width and dynamic viewport height.
   ========================================================================== */

@media (max-width: 600px) {

    html,
    body.login-page {
        width: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #f7f9fc !important;
        overflow-x: hidden !important;
    }

    body.login-page {
        display: block !important;
        min-height: 100dvh !important;
        height: auto !important;
    }

    /* A full-screen app surface makes the page wallpaper/ambient layer
       unnecessary on phones. The visual identity remains in the top panel. */
    body.login-page > .login-ambient-scene {
        display: none !important;
    }

    body.login-page > .auth-wrapper {
        position: relative !important;
        z-index: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100vw !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 100dvh !important;
        height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;

        overflow: hidden !important;
        background: #f7f9fc !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    body.login-page > .auth-wrapper::before,
    body.login-page > .auth-wrapper::after {
        display: none !important;
        content: none !important;
    }

    /* --------------------------------------------------------------
       Identity / wallpaper header
       -------------------------------------------------------------- */
    body.login-page .auth-brand {
        position: relative !important;
        flex: 0 0 clamp(160px, 25dvh, 220px) !important;
        width: 100% !important;
        min-height: 0 !important;
        height: clamp(160px, 25dvh, 220px) !important;
        max-height: 220px !important;
        margin: 0 !important;

        border: 0 !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.18) !important;
        overflow: hidden !important;
        transform: none !important;
    }

    body.login-page .auth-brand .auth-illustration {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
        filter: saturate(.88) brightness(.63) !important;
        opacity: 1 !important;
    }

    body.login-page .auth-brand::before {
        display: block !important;
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        background: linear-gradient(
            180deg,
            rgba(5,17,39,.08) 0%,
            rgba(5,17,39,.14) 42%,
            rgba(5,17,39,.38) 100%
        ) !important;
        pointer-events: none !important;
    }

    body.login-page .auth-brand::after {
        display: none !important;
    }

    body.login-page .auth-brand-content {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        height: 100% !important;
        padding:
            max(12px, env(safe-area-inset-top))
            20px
            14px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    body.login-page .auth-brand-logo-wrap {
        width: clamp(44px, 12vw, 56px) !important;
        height: clamp(44px, 12vw, 56px) !important;
        margin: 0 0 clamp(5px, 1.1dvh, 9px) !important;
        border-radius: clamp(13px, 3.8vw, 17px) !important;
        box-shadow: none !important;
    }

    body.login-page .auth-brand-logo {
        width: clamp(31px, 8.2vw, 39px) !important;
        height: clamp(31px, 8.2vw, 39px) !important;
    }

    body.login-page .auth-brand-region {
        margin: 0 0 3px !important;
        font-size: clamp(8px, 2.35vw, 10px) !important;
        line-height: 1.2 !important;
        letter-spacing: .12em !important;
    }

    body.login-page .auth-brand h1 {
        max-width: 94vw !important;
        margin: 0 !important;
        font-size: clamp(16px, 4.8vw, 21px) !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    body.login-page .auth-brand-divider {
        width: clamp(38px, 11vw, 50px) !important;
        height: 2px !important;
        margin: clamp(6px, 1.2dvh, 10px) auto clamp(5px, 1dvh, 8px) !important;
    }

    body.login-page .auth-brand-app-name {
        margin: 0 !important;
        font-size: clamp(9px, 2.8vw, 12px) !important;
        line-height: 1.2 !important;
    }

    /* --------------------------------------------------------------
       Main app body / login panel
       -------------------------------------------------------------- */
    body.login-page .auth-form {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding:
            clamp(13px, 2.1dvh, 22px)
            clamp(18px, 6vw, 30px)
            max(clamp(14px, 2dvh, 22px), env(safe-area-inset-bottom)) !important;

        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #f7f9fc !important;
        transform: none !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.login-page .auth-panel-pane {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: visible !important;
        scrollbar-width: none !important;
    }

    body.login-page .auth-panel-pane::-webkit-scrollbar {
        display: none !important;
    }

    body.login-page .auth-header-identity {
        flex: 0 0 auto !important;
        margin: 0 0 clamp(10px, 1.8dvh, 16px) !important;
        padding: 0 0 clamp(10px, 1.7dvh, 15px) !important;
    }

    body.login-page .live-clock {
        margin: 0 !important;
    }

    body.login-page .live-clock-time {
        font-size: clamp(31px, 10.6vw, 47px) !important;
        line-height: .98 !important;
        font-weight: 400 !important;
        letter-spacing: -.035em !important;
    }

    body.login-page .live-clock-date {
        margin-top: clamp(3px, .7dvh, 6px) !important;
        font-size: clamp(9px, 2.75vw, 12px) !important;
        line-height: 1.25 !important;
    }

    body.login-page .pattern-section {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: clamp(7px, 1.25dvh, 11px) !important;
    }

    body.login-page .pattern-nip-wrap {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: clamp(44px, 6.5dvh, 51px) !important;
        height: clamp(44px, 6.5dvh, 51px) !important;
        margin: 0 !important;
        border-radius: 999px !important;
        box-shadow: 0 2px 8px rgba(20,49,95,.035) !important;
    }

    body.login-page .pattern-nip-wrap input {
        height: 100% !important;
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: clamp(45px, 12vw, 54px) !important;
        padding-right: 16px !important;
        font-size: clamp(14px, 4vw, 17px) !important;
        line-height: 1 !important;
    }

    body.login-page .pattern-nip-wrap > i {
        left: clamp(16px, 4.8vw, 21px) !important;
        font-size: clamp(16px, 4.6vw, 20px) !important;
    }

    body.login-page .pattern-hint {
        flex: 0 0 auto !important;
        margin: clamp(1px, .3dvh, 4px) 0 0 !important;
        font-size: clamp(12px, 3.5vw, 15px) !important;
        line-height: 1.25 !important;
    }

    /* Pattern is governed by the smaller of width and remaining-height.
       This avoids the oversized square seen on short phones. */
    body.login-page .pattern-canvas-wrap,
    body.login-page #patternCanvas {
        flex: 0 0 auto !important;
        width: clamp(150px, min(50vw, 25dvh), 210px) !important;
        height: clamp(150px, min(50vw, 25dvh), 210px) !important;
        max-width: 55vw !important;
        max-height: 27dvh !important;
        margin: 0 auto !important;
        border-radius: clamp(26px, 8vw, 38px) !important;
    }

    body.login-page .pattern-status {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        font-size: clamp(10px, 2.8vw, 12px) !important;
    }

    body.login-page .auth-buttons {
        flex: 0 0 auto !important;
        width: 100% !important;
        margin-top: clamp(4px, .9dvh, 9px) !important;
        gap: clamp(12px, 4vw, 18px) !important;
        justify-content: center !important;
    }

    body.login-page .auth-buttons button,
    body.login-page .auth-buttons a {
        width: clamp(45px, 13vw, 54px) !important;
        height: clamp(45px, 13vw, 54px) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        flex: 0 0 clamp(45px, 13vw, 54px) !important;
        border-radius: 50% !important;
        box-shadow: none !important;
    }

    body.login-page .auth-buttons button i,
    body.login-page .auth-buttons a i {
        font-size: clamp(17px, 5vw, 21px) !important;
    }

    /* --------------------------------------------------------------
       Very short phones: compact vertically without introducing a
       mini scrollbar inside the card. The whole app stays full-screen.
       -------------------------------------------------------------- */
    @media (max-height: 700px) {
        body.login-page .auth-brand {
            flex-basis: clamp(132px, 22dvh, 158px) !important;
            height: clamp(132px, 22dvh, 158px) !important;
        }

        body.login-page .auth-brand-logo-wrap {
            width: 42px !important;
            height: 42px !important;
            margin-bottom: 4px !important;
        }

        body.login-page .auth-brand-logo {
            width: 29px !important;
            height: 29px !important;
        }

        body.login-page .auth-brand-region {
            font-size: 8px !important;
        }

        body.login-page .auth-brand h1 {
            font-size: clamp(14px, 4.2vw, 17px) !important;
        }

        body.login-page .auth-brand-divider {
            margin: 5px auto 4px !important;
        }

        body.login-page .auth-brand-app-name {
            font-size: 9px !important;
        }

        body.login-page .auth-form {
            padding-top: 10px !important;
            padding-bottom: 10px !important;
        }

        body.login-page .auth-header-identity {
            margin-bottom: 8px !important;
            padding-bottom: 8px !important;
        }

        body.login-page .live-clock-time {
            font-size: clamp(28px, 9vw, 36px) !important;
        }

        body.login-page .live-clock-date {
            font-size: 9px !important;
        }

        body.login-page .pattern-section {
            gap: 5px !important;
        }

        body.login-page .pattern-nip-wrap {
            min-height: 41px !important;
            height: 41px !important;
        }

        body.login-page .pattern-hint {
            font-size: 11px !important;
        }

        body.login-page .pattern-canvas-wrap,
        body.login-page #patternCanvas {
            width: clamp(132px, min(43vw, 23dvh), 166px) !important;
            height: clamp(132px, min(43vw, 23dvh), 166px) !important;
            border-radius: 24px !important;
        }

        body.login-page .auth-buttons button,
        body.login-page .auth-buttons a {
            width: 43px !important;
            height: 43px !important;
            flex-basis: 43px !important;
        }
    }

    /* Wide phones / landscape phones: stay app-like, not card-like. */
    @media (orientation: landscape) and (max-height: 520px) {
        body.login-page > .auth-wrapper {
            flex-direction: row !important;
            height: 100dvh !important;
        }

        body.login-page .auth-brand {
            flex: 0 0 38vw !important;
            width: 38vw !important;
            height: 100dvh !important;
            max-height: none !important;
        }

        body.login-page .auth-form {
            flex: 1 1 auto !important;
            height: 100dvh !important;
            padding: 10px 18px !important;
        }

        body.login-page .auth-brand-content {
            padding: 10px 14px !important;
        }

        body.login-page .live-clock-time {
            font-size: clamp(27px, 5.6vw, 38px) !important;
        }

        body.login-page .pattern-canvas-wrap,
        body.login-page #patternCanvas {
            width: clamp(120px, 25dvh, 155px) !important;
            height: clamp(120px, 25dvh, 155px) !important;
        }
    }
}


/* ==========================================================================
   PHONE — ADAPTIVE PATTERN SIZE
   Use the available portrait viewport more efficiently. The pattern grows on
   tall phones, remains proportional to viewport width, and still contracts on
   short devices so the action buttons remain visible.
   ========================================================================== */

@media (max-width: 600px) and (orientation: portrait) {

    /* Give the pattern section a real flexible layout instead of leaving a
       large unused vertical gap under a fixed-size pattern. */
    body.login-page .pattern-section {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    /*
       Main sizing rule:
       - ~64vw makes good use of phone width.
       - ~31dvh lets tall phones grow the pattern significantly.
       - clamp keeps compact and very large phones under control.
    */
    body.login-page .pattern-canvas-wrap,
    body.login-page #patternCanvas {
        width: clamp(180px, min(64vw, 31dvh), 270px) !important;
        height: clamp(180px, min(64vw, 31dvh), 270px) !important;
        max-width: 68vw !important;
        max-height: 33dvh !important;
        flex: 0 0 auto !important;
        margin: 0 auto !important;
        border-radius: clamp(28px, 8.5vw, 42px) !important;
    }

    /* Slightly enlarge the touch points along with the pattern surface. */
    body.login-page .pattern-dot,
    body.login-page .pattern-node,
    body.login-page #patternCanvas .pattern-dot {
        transform-origin: center center !important;
    }

    /* Buttons stay close enough to the pattern instead of being pushed to the
       very bottom by unused flex space. */
    body.login-page .auth-buttons {
        margin-top: clamp(10px, 1.6dvh, 16px) !important;
        margin-bottom: 0 !important;
    }
}

/* Tall phones can afford an even larger pattern. */
@media (max-width: 600px) and (orientation: portrait) and (min-height: 800px) {
    body.login-page .pattern-canvas-wrap,
    body.login-page #patternCanvas {
        width: clamp(205px, min(68vw, 33dvh), 292px) !important;
        height: clamp(205px, min(68vw, 33dvh), 292px) !important;
        max-width: 72vw !important;
        max-height: 35dvh !important;
    }
}

/* Very tall phones: use the extra vertical space instead of leaving a large
   blank zone between pattern and action buttons. */
@media (max-width: 600px) and (orientation: portrait) and (min-height: 920px) {
    body.login-page .pattern-canvas-wrap,
    body.login-page #patternCanvas {
        width: clamp(220px, min(70vw, 34dvh), 310px) !important;
        height: clamp(220px, min(70vw, 34dvh), 310px) !important;
        max-width: 74vw !important;
        max-height: 36dvh !important;
    }
}

/* Short phones still contract safely so nothing is clipped. */
@media (max-width: 600px) and (orientation: portrait) and (max-height: 700px) {
    body.login-page .pattern-canvas-wrap,
    body.login-page #patternCanvas {
        width: clamp(145px, min(50vw, 25dvh), 185px) !important;
        height: clamp(145px, min(50vw, 25dvh), 185px) !important;
        max-width: 54vw !important;
        max-height: 27dvh !important;
        border-radius: 25px !important;
    }

    body.login-page .auth-buttons {
        margin-top: 7px !important;
    }
}


/* ==========================================================================
   PHONE — NO BLUR / NO BACKDROP FILTER
   Keep every visual layer sharp on small screens.
   ========================================================================== */

@media (max-width: 600px) {

    html,
    body.login-page,
    body.login-page *,
    body.login-page *::before,
    body.login-page *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.login-page,
    body.login-page::before,
    body.login-page::after,
    body.login-page .auth-wrapper,
    body.login-page .auth-wrapper::before,
    body.login-page .auth-wrapper::after,
    body.login-page .auth-brand,
    body.login-page .auth-brand::before,
    body.login-page .auth-brand::after,
    body.login-page .auth-brand .auth-illustration,
    body.login-page .auth-form,
    body.login-page .auth-panel-pane,
    body.login-page .pattern-canvas-wrap,
    body.login-page #patternCanvas,
    body.login-page .pattern-nip-wrap,
    body.login-page .auth-buttons button,
    body.login-page .auth-buttons a,
    body.login-page .login-ambient-scene,
    body.login-page .login-ambient-scene *,
    body.login-page .login-ambient-scene *::before,
    body.login-page .login-ambient-scene *::after {
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Keep the wallpaper sharp; only brightness/saturation would invoke a
       filter pipeline, so disable that too on phones. */
    body.login-page .auth-brand .auth-illustration {
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
        image-rendering: auto !important;
    }

    /* Any glow/orb/blur-only decorative layer is removed on phones. */
    body.login-page .login-ambient-scene__glow,
    body.login-page .login-ambient-scene__gradient,
    body.login-page .ambient-orb,
    body.login-page .ambient-glow,
    body.login-page .blur-orb,
    body.login-page .glass-blur {
        display: none !important;
        filter: none !important;
        opacity: 0 !important;
    }

    /* Prevent shadows from visually mimicking blur on very small screens. */
    body.login-page .auth-wrapper,
    body.login-page .auth-form,
    body.login-page .pattern-canvas-wrap,
    body.login-page #patternCanvas {
        box-shadow: none !important;
    }

    /* Keep controls crisp with only a very light solid border. */
    body.login-page .pattern-nip-wrap,
    body.login-page .auth-buttons button,
    body.login-page .auth-buttons a {
        box-shadow: none !important;
    }
}


/* ==========================================================================
   PHONE FINAL PRECISION LAYOUT
   Full height follows the real phone viewport. Elements use remaining space
   instead of fixed empty gaps. Buttons slightly larger.
   ========================================================================== */

@media (max-width: 600px) {

    html,
    body.login-page {
        width: 100% !important;
        min-height: 100dvh !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    body.login-page > .auth-wrapper {
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    body.login-page .auth-brand {
        flex: 0 0 clamp(145px, 24dvh, 210px) !important;
        height: clamp(145px, 24dvh, 210px) !important;
        max-height: 28dvh !important;
    }

    body.login-page .auth-form {
        flex: 1 1 auto !important;
        height: calc(100dvh - clamp(145px, 24dvh, 210px)) !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        padding:
            clamp(12px, 2dvh, 18px)
            clamp(16px, 5vw, 24px)
            max(12px, env(safe-area-inset-bottom)) !important;
        overflow: hidden !important;
    }

    body.login-page .auth-panel-pane {
        height: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body.login-page .auth-header-identity {
        flex: 0 0 auto !important;
    }

    body.login-page .pattern-section {
        flex: 1 1 auto !important;
        justify-content: center !important;
        gap: clamp(8px, 1.4dvh, 14px) !important;
        min-height: 0 !important;
    }

    body.login-page .pattern-canvas-wrap,
    body.login-page #patternCanvas {
        width: clamp(190px, 58vw, 260px) !important;
        height: clamp(190px, 58vw, 260px) !important;
        max-height: 32dvh !important;
        flex-shrink: 1 !important;
    }

    /* Bigger touch targets */
    body.login-page .auth-buttons {
        flex: 0 0 auto !important;
        margin-top: clamp(8px, 1.5dvh, 16px) !important;
        gap: clamp(16px, 5vw, 24px) !important;
    }

    body.login-page .auth-buttons button,
    body.login-page .auth-buttons a {
        width: clamp(54px, 15vw, 66px) !important;
        height: clamp(54px, 15vw, 66px) !important;
        flex-basis: clamp(54px, 15vw, 66px) !important;
    }

    body.login-page .auth-buttons button i,
    body.login-page .auth-buttons a i {
        font-size: clamp(21px, 6vw, 27px) !important;
    }

    /* Short phones */
    @media (max-height: 700px) {
        body.login-page .pattern-canvas-wrap,
        body.login-page #patternCanvas {
            width: clamp(150px, 50vw, 190px) !important;
            height: clamp(150px, 50vw, 190px) !important;
            max-height: 28dvh !important;
        }

        body.login-page .auth-buttons button,
        body.login-page .auth-buttons a {
            width: 50px !important;
            height: 50px !important;
            flex-basis: 50px !important;
        }
    }
}


/* ==========================================================================
   PHONE — STABLE NATIVE APP GRID
   Final mobile override. Removes the competing flex-growth behaviour from
   earlier phone rules and keeps clock → pattern → actions as one coherent
   block with consistent spacing.
   ========================================================================== */

@media (max-width: 600px) and (orientation: portrait) {

    html,
    body.login-page {
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.login-page > .auth-wrapper {
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-rows: clamp(170px, 25dvh, 220px) minmax(0, 1fr) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        background: #f7f9fc !important;
    }

    /* Identity image occupies the first grid row exactly. */
    body.login-page .auth-brand {
        grid-row: 1 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    body.login-page .auth-brand .auth-illustration {
        width: 100% !important;
        height: 100% !important;
        inset: 0 !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }

    /* Form occupies only the remaining viewport height. */
    body.login-page .auth-form {
        grid-row: 2 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding:
            clamp(14px, 2dvh, 20px)
            clamp(18px, 5.5vw, 28px)
            max(clamp(14px, 2dvh, 20px), env(safe-area-inset-bottom)) !important;
        display: block !important;
        overflow: hidden !important;
        background: #f7f9fc !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.login-page .auth-panels-container {
        height: 100% !important;
        min-height: 0 !important;
    }

    /* LOGIN pane only. Registration pane keeps its own scrolling behaviour. */
    body.login-page .auth-panel-pane:first-child {
        height: 100% !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-rows: auto auto auto !important;
        align-content: center !important;
        justify-items: stretch !important;
        row-gap: clamp(12px, 1.8dvh, 18px) !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body.login-page .auth-panel-pane:first-child .auth-header-identity {
        margin: 0 !important;
        padding: 0 0 clamp(8px, 1.2dvh, 12px) !important;
        flex: none !important;
    }

    body.login-page .auth-panel-pane:first-child .live-clock {
        margin: 0 !important;
    }

    body.login-page .auth-panel-pane:first-child .live-clock-time {
        font-size: clamp(34px, 10.5vw, 48px) !important;
        line-height: 1 !important;
        font-weight: 400 !important;
        letter-spacing: -.035em !important;
    }

    body.login-page .auth-panel-pane:first-child .live-clock-date {
        margin-top: 5px !important;
        font-size: clamp(10px, 2.8vw, 12px) !important;
        line-height: 1.25 !important;
    }

    /* No flex growth here. This is what removes the giant blank gaps. */
    body.login-page .auth-panel-pane:first-child .pattern-section {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        flex: none !important;
        display: grid !important;
        grid-template-rows: auto auto auto auto !important;
        justify-items: center !important;
        align-items: center !important;
        align-content: start !important;
        gap: clamp(8px, 1.25dvh, 12px) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.login-page .auth-panel-pane:first-child .pattern-nip-wrap {
        width: 100% !important;
        height: clamp(48px, 6.2dvh, 54px) !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 clamp(17px, 4.6vw, 22px) !important;
        border-radius: 999px !important;
        box-shadow: none !important;
    }

    body.login-page .auth-panel-pane:first-child .pattern-nip-wrap input {
        height: 100% !important;
        padding: 0 0 0 8px !important;
        font-size: clamp(15px, 4vw, 18px) !important;
    }

    body.login-page .auth-panel-pane:first-child .pattern-hint {
        margin: 0 !important;
        font-size: clamp(12px, 3.4vw, 15px) !important;
        line-height: 1.2 !important;
    }

    /*
       Keep CSS rendering close to the canvas' native 220px backing store.
       This avoids the soft/blurry appearance caused by aggressive scaling.
    */
    body.login-page .auth-panel-pane:first-child .pattern-canvas-wrap,
    body.login-page .auth-panel-pane:first-child #patternCanvas {
        width: clamp(200px, 56vw, 236px) !important;
        height: clamp(200px, 56vw, 236px) !important;
        max-width: none !important;
        max-height: none !important;
        flex: none !important;
        margin: 0 auto !important;
        border-radius: clamp(30px, 8vw, 38px) !important;
        box-shadow: none !important;
    }

    body.login-page .auth-panel-pane:first-child .pattern-status {
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        line-height: 1.15 !important;
    }

    body.login-page .auth-panel-pane:first-child .auth-buttons {
        width: 100% !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: clamp(18px, 5vw, 26px) !important;
    }

    body.login-page .auth-panel-pane:first-child .auth-buttons button,
    body.login-page .auth-panel-pane:first-child .auth-buttons a {
        width: clamp(56px, 15vw, 64px) !important;
        height: clamp(56px, 15vw, 64px) !important;
        min-width: 56px !important;
        min-height: 56px !important;
        flex: 0 0 auto !important;
        border-radius: 50% !important;
        box-shadow: none !important;
    }

    body.login-page .auth-panel-pane:first-child .auth-buttons i {
        font-size: clamp(21px, 5.8vw, 26px) !important;
    }
}

/* Compact phones: reduce all pieces together, never one section alone. */
@media (max-width: 600px) and (orientation: portrait) and (max-height: 720px) {
    body.login-page > .auth-wrapper {
        grid-template-rows: clamp(145px, 22dvh, 170px) minmax(0,1fr) !important;
    }

    body.login-page .auth-form {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    body.login-page .auth-panel-pane:first-child {
        row-gap: 8px !important;
    }

    body.login-page .auth-panel-pane:first-child .pattern-section {
        gap: 6px !important;
    }

    body.login-page .auth-panel-pane:first-child .live-clock-time {
        font-size: clamp(30px, 9vw, 38px) !important;
    }

    body.login-page .auth-panel-pane:first-child .pattern-nip-wrap {
        height: 44px !important;
        min-height: 44px !important;
    }

    body.login-page .auth-panel-pane:first-child .pattern-canvas-wrap,
    body.login-page .auth-panel-pane:first-child #patternCanvas {
        width: clamp(170px, 49vw, 200px) !important;
        height: clamp(170px, 49vw, 200px) !important;
    }

    body.login-page .auth-panel-pane:first-child .auth-buttons button,
    body.login-page .auth-panel-pane:first-child .auth-buttons a {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }
}


/* ==========================================================================
   PHONE — FINAL CLOCK / PATTERN / ACTION REFINEMENT
   ========================================================================== */

@media (max-width: 600px) and (orientation: portrait) {

    /* Move the login content upward: no vertical centering of the whole block. */
    body.login-page .auth-panel-pane:first-child {
        align-content: start !important;
        padding-top: 0 !important;
        row-gap: clamp(9px, 1.25dvh, 13px) !important;
    }

    body.login-page .auth-panel-pane:first-child .auth-header-identity {
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: clamp(7px, .9dvh, 10px) !important;
    }

    body.login-page .auth-form {
        padding-top: clamp(8px, 1.15dvh, 12px) !important;
    }

    /* Slightly larger pattern, but stay close to a sensible mobile size. */
    body.login-page .auth-panel-pane:first-child .pattern-canvas-wrap,
    body.login-page .auth-panel-pane:first-child #patternCanvas {
        width: clamp(218px, 61vw, 258px) !important;
        height: clamp(218px, 61vw, 258px) !important;
        border-radius: clamp(31px, 8.4vw, 40px) !important;
        image-rendering: auto !important;
    }

    /* Canvas wrapper itself remains crisp: no shadow/filter/backdrop blur. */
    body.login-page .auth-panel-pane:first-child .pattern-canvas-wrap {
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }

    body.login-page .auth-panel-pane:first-child #patternCanvas {
        filter: none !important;
        box-shadow: none !important;
    }

    /* Slightly larger touch actions. */
    body.login-page .auth-panel-pane:first-child .auth-buttons {
        gap: clamp(20px, 5.5vw, 28px) !important;
    }

    body.login-page .auth-panel-pane:first-child .auth-buttons button,
    body.login-page .auth-panel-pane:first-child .auth-buttons a {
        width: clamp(60px, 16vw, 68px) !important;
        height: clamp(60px, 16vw, 68px) !important;
        min-width: 60px !important;
        min-height: 60px !important;
    }

    body.login-page .auth-panel-pane:first-child .auth-buttons i {
        font-size: clamp(23px, 6.2vw, 28px) !important;
    }
}

/* Short phones: keep everything inside viewport while preserving sharp DPR canvas. */
@media (max-width: 600px) and (orientation: portrait) and (max-height: 720px) {
    body.login-page .auth-panel-pane:first-child .pattern-canvas-wrap,
    body.login-page .auth-panel-pane:first-child #patternCanvas {
        width: clamp(188px, 53vw, 214px) !important;
        height: clamp(188px, 53vw, 214px) !important;
    }

    body.login-page .auth-panel-pane:first-child .auth-buttons button,
    body.login-page .auth-panel-pane:first-child .auth-buttons a {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
    }
}

/* ==========================================================================
   AUTH IDENTITY — TOP-LEFT INSTITUTION BRANDING
   Institution logo, region, and institution name stay in the upper-left
   corner on both the login surface and the cinematic intro.
   ========================================================================== */

/* ---------- Login / register left branding panel ---------- */
body.login-page .auth-brand-content {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(24px, 2.4vw, 38px) !important;
    box-sizing: border-box !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    pointer-events: none;
}

body.login-page .auth-institution-identity {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(13px, 1.2vw, 18px) !important;
    width: min(92%, 540px) !important;
    margin: 0 !important;
    text-align: left !important;
}

body.login-page .auth-institution-copy {
    min-width: 0 !important;
    max-width: 430px !important;
}

body.login-page .auth-institution-identity .auth-brand-logo-wrap {
    flex: 0 0 auto !important;
    width: clamp(56px, 5vw, 70px) !important;
    height: clamp(56px, 5vw, 70px) !important;
    margin: 0 !important;
    border-radius: clamp(16px, 1.5vw, 20px) !important;
}

body.login-page .auth-institution-identity .auth-brand-logo {
    width: 72% !important;
    height: 72% !important;
    max-width: none !important;
}

body.login-page .auth-institution-identity .auth-brand-region {
    margin: 0 0 4px !important;
    font-size: clamp(9px, .78vw, 11px) !important;
    line-height: 1.2 !important;
    letter-spacing: .16em !important;
    text-align: left !important;
}

body.login-page .auth-institution-identity h1 {
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(18px, 1.55vw, 25px) !important;
    line-height: 1.14 !important;
    text-align: left !important;
    text-wrap: pretty !important;
}

body.login-page .auth-brand-app-block {
    width: min(76%, 360px) !important;
    margin: auto auto 0 !important;
    align-self: center !important;
    text-align: center !important;
    pointer-events: auto;
}

body.login-page .auth-brand-app-block .auth-brand-divider {
    margin: 0 auto 16px !important;
}

/* ---------- Cinematic intro ---------- */
.cinematic-intro__institution-identity {
    position: absolute;
    z-index: 24;
    top: max(clamp(22px, 3vw, 46px), env(safe-area-inset-top));
    left: max(clamp(22px, 3vw, 46px), env(safe-area-inset-left));
    width: min(70vw, 620px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(14px, 1.4vw, 20px);
    color: #fff;
    text-align: left;
    text-shadow: 0 4px 20px rgba(0,0,0,.34);
}

.cinematic-intro__institution-copy {
    min-width: 0;
    max-width: 500px;
}

.cinematic-intro__institution-identity .cinematic-intro__mark {
    flex: 0 0 auto;
    width: clamp(58px, 5vw, 76px);
    border-radius: 26%;
}

.cinematic-intro__institution-identity .cinematic-intro__ring--outer {
    inset: -14px;
}

.cinematic-intro__institution-identity .cinematic-intro__ring--inner {
    inset: -7px;
}

.cinematic-intro__institution-identity .cinematic-intro__region {
    margin: 0 0 4px;
    font-size: clamp(9px, .76vw, 11px);
    line-height: 1.2;
    letter-spacing: .18em;
    text-align: left;
}

.cinematic-intro__institution-identity .cinematic-intro__title {
    max-width: 500px;
    margin: 0;
    font-size: clamp(18px, 1.65vw, 27px);
    line-height: 1.12;
    letter-spacing: -.02em;
    text-align: left;
    text-wrap: pretty;
}

.cinematic-intro__copy--app {
    margin-top: 0;
}

.cinematic-intro__copy--app .cinematic-intro__divider {
    margin-top: 0;
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
    body.login-page .auth-brand-content {
        padding:
            max(14px, env(safe-area-inset-top))
            max(16px, env(safe-area-inset-right))
            12px
            max(16px, env(safe-area-inset-left)) !important;
    }

    body.login-page .auth-institution-identity {
        width: 94% !important;
        gap: 10px !important;
        align-items: center !important;
    }

    body.login-page .auth-institution-identity .auth-brand-logo-wrap {
        width: clamp(42px, 11vw, 50px) !important;
        height: clamp(42px, 11vw, 50px) !important;
        border-radius: 13px !important;
    }

    body.login-page .auth-institution-identity .auth-brand-logo {
        width: 72% !important;
        height: 72% !important;
    }

    body.login-page .auth-institution-identity .auth-brand-region {
        margin-bottom: 2px !important;
        font-size: clamp(7px, 2vw, 9px) !important;
        letter-spacing: .13em !important;
    }

    body.login-page .auth-institution-identity h1 {
        max-width: calc(100vw - 94px) !important;
        font-size: clamp(13px, 3.8vw, 17px) !important;
        line-height: 1.12 !important;
    }

    body.login-page .auth-brand-app-block {
        width: 100% !important;
        margin-top: auto !important;
        margin-bottom: 0 !important;
        text-align: left !important;
        align-self: stretch !important;
    }

    body.login-page .auth-brand-app-block .auth-brand-divider {
        width: 34px !important;
        margin: 0 0 7px !important;
    }

    body.login-page .auth-brand-app-block .auth-brand-app-logo-wrap {
        margin: 0 0 6px !important;
    }

    body.login-page .auth-brand-app-block .auth-brand-app-name {
        font-size: clamp(8px, 2.4vw, 10px) !important;
        text-align: left !important;
    }

    .cinematic-intro__institution-identity {
        top: max(16px, env(safe-area-inset-top));
        left: max(16px, env(safe-area-inset-left));
        width: calc(100vw - 32px);
        gap: 10px;
        align-items: center;
    }

    .cinematic-intro__institution-identity .cinematic-intro__mark {
        width: clamp(46px, 13vw, 56px) !important;
        border-radius: 24% !important;
    }

    .cinematic-intro__institution-identity .cinematic-intro__ring--outer {
        inset: -9px;
    }

    .cinematic-intro__institution-identity .cinematic-intro__ring--inner {
        inset: -5px;
    }

    .cinematic-intro__institution-identity .cinematic-intro__region {
        margin-bottom: 2px !important;
        font-size: clamp(7px, 2.1vw, 9px) !important;
        line-height: 1.15 !important;
        letter-spacing: .14em !important;
    }

    .cinematic-intro__institution-identity .cinematic-intro__title {
        max-width: calc(100vw - 92px) !important;
        font-size: clamp(14px, 4.2vw, 18px) !important;
        line-height: 1.12 !important;
        letter-spacing: -.01em !important;
    }

    .cinematic-intro__stage {
        width: 86vw !important;
        transform: translateY(2vh) !important;
    }

    .cinematic-intro__copy--app {
        margin-top: 0 !important;
    }
}

/* Very narrow phones: preserve a clean one-row identity without clipping. */
@media (max-width: 380px) {
    body.login-page .auth-institution-identity,
    .cinematic-intro__institution-identity {
        align-items: flex-start !important;
    }

    body.login-page .auth-institution-identity .auth-brand-logo-wrap {
        width: 40px !important;
        height: 40px !important;
    }

    .cinematic-intro__institution-identity .cinematic-intro__mark {
        width: 44px !important;
    }
}


/* ==========================================================================
   AUTH APP LOGO SHAPE + MOBILE OVERLAP FIX
   - Round the application logo so it no longer reads as a square block.
   - Keep the mobile login/intro layout from colliding with the top identity.
   ========================================================================== */

body.login-page .auth-brand-app-block {
    pointer-events: auto !important;
}

body.login-page .auth-brand-app-block .auth-brand-app-logo-wrap,
.cinematic-intro__app-logo-wrap {
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50% !important;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 10px 24px rgba(3, 8, 20, .18);
}

body.login-page .auth-brand-app-block .auth-brand-app-logo-wrap {
    width: clamp(88px, 9vw, 116px) !important;
    height: clamp(88px, 9vw, 116px) !important;
    margin: 0 auto 14px !important;
}

body.login-page .auth-brand-app-block .auth-brand-app-logo,
.cinematic-intro__app-logo {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
}

body.login-page .auth-brand-app-name {
    text-align: center !important;
}

.cinematic-intro__app-logo-wrap {
    width: clamp(102px, 10vw, 138px);
    height: clamp(102px, 10vw, 138px);
    margin: 0 auto 18px;
}

@media (max-width: 600px) {
    body.login-page .auth-brand-content {
        justify-content: space-between !important;
        padding:
            max(14px, env(safe-area-inset-top))
            max(16px, env(safe-area-inset-right))
            12px
            max(16px, env(safe-area-inset-left)) !important;
    }

    body.login-page .auth-institution-identity {
        width: 100% !important;
        max-width: 100% !important;
        gap: 10px !important;
    }

    body.login-page .auth-brand-app-block {
        width: 100% !important;
        margin: clamp(12px, 2.2vh, 18px) 0 0 !important;
        align-self: center !important;
        text-align: center !important;
    }

    body.login-page .auth-brand-app-block .auth-brand-divider {
        width: 44px !important;
        margin: 0 auto 8px !important;
    }

    body.login-page .auth-brand-app-block .auth-brand-app-logo-wrap {
        width: clamp(60px, 18vw, 78px) !important;
        height: clamp(60px, 18vw, 78px) !important;
        margin: 0 auto 8px !important;
    }

    body.login-page .auth-brand-app-name {
        font-size: clamp(11px, 3.1vw, 14px) !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    .cinematic-intro__stage {
        width: min(88vw, 520px) !important;
        padding-top: clamp(42px, 8vh, 78px) !important;
        transform: translateY(0) !important;
    }

    .cinematic-intro__app-logo-wrap {
        width: clamp(76px, 22vw, 92px) !important;
        height: clamp(76px, 22vw, 92px) !important;
        margin: 0 auto 10px !important;
    }
}

@media (max-width: 380px) {
    body.login-page .auth-brand-app-block .auth-brand-app-logo-wrap {
        width: 56px !important;
        height: 56px !important;
    }

    .cinematic-intro__app-logo-wrap {
        width: 72px !important;
        height: 72px !important;
    }
}


/* ==========================================================================
   AUTH LOGIN / INTRO REFINEMENT
   - Desktop: app branding stays centered inside the left card.
   - Mobile: header stack is lowered and centered to avoid collisions.
   - Intro: app name + tagline live inside a framed pair of lines.
   ========================================================================== */

body.login-page .auth-brand-content {
    justify-content: center !important;
    align-items: center !important;
}

body.login-page .auth-institution-identity {
    position: absolute !important;
    top: clamp(22px, 2.8vw, 40px) !important;
    left: clamp(22px, 2.6vw, 40px) !important;
    width: min(92%, 540px) !important;
}

body.login-page .auth-brand-app-block {
    width: min(82%, 460px) !important;
    margin: 0 auto !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    pointer-events: auto !important;
}

body.login-page .auth-brand-app-block .auth-brand-divider {
    width: clamp(52px, 5vw, 66px) !important;
    margin: 0 auto 16px !important;
}

body.login-page .auth-brand-app-block .auth-brand-app-logo-wrap {
    width: clamp(98px, 9vw, 122px) !important;
    height: clamp(98px, 9vw, 122px) !important;
    margin: 0 auto 16px !important;
}

body.login-page .auth-brand-app-name {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(22px, 2.45vw, 34px) !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    letter-spacing: -.02em !important;
    text-align: center !important;
    text-wrap: balance !important;
}

body.login-page .auth-brand-app-tagline {
    margin: 10px auto 0 !important;
    max-width: min(100%, 420px) !important;
    color: rgba(245, 248, 255, .94) !important;
    font-size: clamp(14px, 1.15vw, 18px) !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-wrap: pretty !important;
}

.cinematic-intro__copy--app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.cinematic-intro__app-frame {
    width: min(92vw, 860px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 2px 18px 4px;
    text-align: center;
}

.cinematic-intro__copy--app .cinematic-intro__divider {
    width: min(240px, 48vw);
    margin: 0 auto !important;
}

.cinematic-intro__copy--app .cinematic-intro__divider--bottom {
    margin-top: 6px !important;
}

.cinematic-intro__app {
    margin: 0;
    max-width: 900px;
    color: #ffffff;
    font-size: clamp(34px, 4.8vw, 66px);
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.cinematic-intro__tagline {
    margin: 0;
    max-width: min(88vw, 700px);
    color: rgba(236, 243, 255, .90);
    font-size: clamp(13px, 1.45vw, 19px);
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: .01em;
    opacity: 0;
    animation: cinematicTextUp .72s 1.78s cubic-bezier(.22,1,.36,1) forwards;
    text-wrap: pretty;
}

@media (max-width: 600px) {
    body.login-page .auth-brand-content {
        justify-content: flex-start !important;
        align-items: center !important;
        gap: clamp(10px, 1.8vh, 14px) !important;
        padding:
            max(16px, env(safe-area-inset-top))
            max(16px, env(safe-area-inset-right))
            14px
            max(16px, env(safe-area-inset-left)) !important;
    }

    body.login-page .auth-institution-identity {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        text-align: center !important;
    }

    body.login-page .auth-institution-copy {
        max-width: min(76vw, 290px) !important;
    }

    body.login-page .auth-institution-identity .auth-brand-region,
    body.login-page .auth-institution-identity h1 {
        text-align: left !important;
    }

    body.login-page .auth-brand-app-block {
        width: min(92%, 340px) !important;
        margin: clamp(10px, 1.8vh, 16px) auto 0 !important;
    }

    body.login-page .auth-brand-app-block .auth-brand-divider {
        width: 40px !important;
        margin: 0 auto 8px !important;
    }

    body.login-page .auth-brand-app-block .auth-brand-app-logo-wrap {
        width: clamp(58px, 16vw, 74px) !important;
        height: clamp(58px, 16vw, 74px) !important;
        margin: 0 auto 8px !important;
    }

    body.login-page .auth-brand-app-name {
        font-size: clamp(13px, 4vw, 18px) !important;
        line-height: 1.12 !important;
    }

    body.login-page .auth-brand-app-tagline {
        margin-top: 5px !important;
        max-width: min(92%, 250px) !important;
        font-size: clamp(9px, 2.6vw, 12px) !important;
        line-height: 1.3 !important;
    }

    .cinematic-intro__copy--app {
        gap: 12px;
    }

    .cinematic-intro__app-frame {
        width: min(90vw, 420px);
        gap: 7px;
        padding: 0 10px;
    }

    .cinematic-intro__copy--app .cinematic-intro__divider {
        width: min(150px, 44vw) !important;
    }

    .cinematic-intro__app {
        font-size: clamp(22px, 7.2vw, 34px) !important;
        line-height: 1.05 !important;
    }

    .cinematic-intro__tagline {
        max-width: min(82vw, 320px) !important;
        font-size: clamp(10px, 2.9vw, 13px) !important;
        line-height: 1.32 !important;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    body.login-page .auth-brand-content {
        padding-top: max(18px, env(safe-area-inset-top)) !important;
        justify-content: flex-start !important;
    }
}

@media (max-width: 380px) {
    body.login-page .auth-institution-copy {
        max-width: min(74vw, 250px) !important;
    }

    body.login-page .auth-brand-app-block .auth-brand-app-logo-wrap {
        width: 54px !important;
        height: 54px !important;
    }

    body.login-page .auth-brand-app-tagline {
        font-size: 9px !important;
    }

    .cinematic-intro__app {
        font-size: clamp(20px, 6.8vw, 28px) !important;
    }
}

/* ==========================================================================
   MOBILE LOGIN HEADER — EXTEND BRAND PANEL FOR APP NAME + TAGLINE
   The phone header needs enough vertical room for:
   institution identity -> app logo -> app name -> login tagline.
   ========================================================================== */
@media (max-width: 600px) and (orientation: portrait) {
    body.login-page > .auth-wrapper {
        grid-template-rows: clamp(270px, 31dvh, 315px) minmax(0, 1fr) !important;
    }

    body.login-page .auth-brand {
        min-height: clamp(270px, 31dvh, 315px) !important;
    }

    body.login-page .auth-brand-content {
        height: 100% !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 0 !important;
        padding:
            max(16px, env(safe-area-inset-top))
            max(14px, env(safe-area-inset-right))
            14px
            max(14px, env(safe-area-inset-left)) !important;
    }

    body.login-page .auth-institution-identity {
        flex: 0 0 auto !important;
        margin: 0 auto !important;
    }

    body.login-page .auth-brand-app-block {
        flex: 0 0 auto !important;
        width: min(94%, 350px) !important;
        margin: clamp(12px, 1.8dvh, 18px) auto 0 !important;
    }

    body.login-page .auth-brand-app-block .auth-brand-divider {
        display: none !important;
    }

    body.login-page .auth-brand-app-block .auth-brand-app-logo-wrap {
        width: clamp(62px, 17vw, 76px) !important;
        height: clamp(62px, 17vw, 76px) !important;
        margin: 0 auto 7px !important;
    }

    body.login-page .auth-brand-app-name {
        display: block !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        color: #fff !important;
        font-size: clamp(14px, 4.1vw, 18px) !important;
        line-height: 1.12 !important;
        font-weight: 900 !important;
        text-align: center !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.login-page .auth-brand-app-tagline {
        display: block !important;
        margin: 5px auto 0 !important;
        max-width: min(94%, 310px) !important;
        color: rgba(255,255,255,.94) !important;
        font-size: clamp(9px, 2.65vw, 12px) !important;
        line-height: 1.28 !important;
        font-weight: 650 !important;
        text-align: center !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.login-page .auth-form {
        height: 100% !important;
        min-height: 0 !important;
    }
}

/* Short phones still keep all branding visible, while preserving login room. */
@media (max-width: 600px) and (orientation: portrait) and (max-height: 720px) {
    body.login-page > .auth-wrapper {
        grid-template-rows: clamp(225px, 31dvh, 245px) minmax(0, 1fr) !important;
    }

    body.login-page .auth-brand {
        min-height: clamp(225px, 31dvh, 245px) !important;
    }

    body.login-page .auth-brand-content {
        padding-top: 10px !important;
        padding-bottom: 9px !important;
    }

    body.login-page .auth-brand-app-block {
        margin-top: 7px !important;
    }

    body.login-page .auth-brand-app-block .auth-brand-app-logo-wrap {
        width: 52px !important;
        height: 52px !important;
        margin-bottom: 5px !important;
    }

    body.login-page .auth-brand-app-name {
        font-size: 13px !important;
    }

    body.login-page .auth-brand-app-tagline {
        margin-top: 3px !important;
        font-size: 8.5px !important;
        line-height: 1.22 !important;
    }
}