/* Admin Login — auth pages only (no admin-ui.css here) */
.auth-page * { margin: 0; padding: 0; box-sizing: border-box; }
.auth-page {
    font-family: 'Inter', sans-serif;
    height: 100vh;
    overflow: hidden;
    background: #F0F2F8;
}

.login-wrapper { display: flex; height: 100vh; }

.left-panel {
    flex: 0 0 45%;
    background: linear-gradient(145deg, #1A1F5E 0%, #252B7A 50%, #1A1F5E 100%);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    position: relative; overflow: hidden; padding: 3rem;
}
.left-panel::before {
    content: ''; position: absolute; top: -80px; right: -80px;
    width: 300px; height: 300px; border-radius: 50%;
    background: rgba(0,201,167,.08);
}
.left-panel::after {
    content: ''; position: absolute; bottom: -100px; left: -60px;
    width: 350px; height: 350px; border-radius: 50%;
    background: rgba(0,201,167,.05);
}
.left-dots { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dot {
    position: absolute; border-radius: 50%;
    background: rgba(0,201,167,.15);
    animation: floatDot 6s ease-in-out infinite;
}
.left-dots .dot-1 { width:12px; height:12px; top:15%; left:12%; animation-delay:0s; }
.left-dots .dot-2 { width:8px; height:8px; top:55%; left:75%; animation-delay:1.5s; }
.left-dots .dot-3 { width:16px; height:16px; top:75%; left:25%; animation-delay:3s; }
.left-dots .dot-4 { width:10px; height:10px; top:35%; left:85%; animation-delay:2s; }
@keyframes floatDot {
    0%, 100% { transform: translateY(0) scale(1); opacity: .6; }
    50% { transform: translateY(-18px) scale(1.1); opacity: 1; }
}
.brand-logo {
    width: 100%;
    max-width: 280px;
    min-height: 72px;
    max-height: 110px;
    padding: .85rem 1.25rem;
    border-radius: 18px;
    background: rgba(255,255,255,.12);
    border: 2px solid rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.brand-logo img {
    max-width: 100%;
    max-height: 88px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.left-title { color: #fff; font-size: 2rem; font-weight: 800; text-align: center; position: relative; z-index: 1; line-height: 1.2; }
.left-sub { color: rgba(255,255,255,.65); font-size: .95rem; text-align: center; margin-top: .75rem; position: relative; z-index: 1; }
.left-features { margin-top: 2.5rem; position: relative; z-index: 1; width: 100%; max-width: 320px; }
.feature-item {
    display: flex; align-items: center; gap: .85rem;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px; padding: .75rem 1rem; margin-bottom: .75rem;
    color: rgba(255,255,255,.85); font-size: .84rem;
}
.feature-icon {
    width: 34px; height: 34px; border-radius: 9px;
    background: rgba(0,201,167,.2); color: #00C9A7;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; flex-shrink: 0;
}

.right-panel {
    flex: 1; background: #fff;
    display: flex; align-items: center; justify-content: center;
    padding: 2.5rem; overflow-y: auto;
}
.login-box { width: 100%; max-width: 400px; }
.login-title { font-size: 1.6rem; font-weight: 800; color: #1A1F5E; margin-bottom: .4rem; }
.login-sub { color: #8892A4; font-size: .85rem; margin-bottom: 2rem; }

.auth-page .form-label { font-weight: 600; font-size: .82rem; color: #444; margin-bottom: .4rem; }
.auth-page .form-control {
    border: 1.5px solid #E4E8F0; border-radius: 10px;
    padding: .62rem 1rem; font-size: .88rem;
    background: #FAFBFF; transition: all .2s;
}
.auth-page .form-control:focus {
    border-color: #00C9A7; box-shadow: 0 0 0 3px rgba(0,201,167,.12);
    background: #fff; outline: none;
}
.auth-page .input-group .form-control { border-radius: 10px 0 0 10px; }
.auth-page .input-group-text {
    border: 1.5px solid #E4E8F0; border-left: none;
    border-radius: 0 10px 10px 0; background: #F0F2F8;
    cursor: pointer; transition: all .2s;
}
.auth-page .input-group:focus-within .input-group-text { border-color: #00C9A7; }
.auth-page .input-group-text:hover { background: #e0f7f4; color: #00C9A7; }
.password-toggle-icon { color: #8892A4; font-size: .85rem; }
.auth-page .input-group-text:hover .password-toggle-icon { color: #00C9A7; }

.login-form-panel { display: block; width: 100%; }

.btn-login {
    background: linear-gradient(135deg, #1A1F5E, #252B7A);
    border: none; border-radius: 10px; padding: .7rem;
    font-size: .9rem; font-weight: 700; color: #fff;
    width: 100%; transition: all .25s;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,31,94,.3); color: #fff; }
.btn-login:disabled { opacity: .7; transform: none; }

.forgot-link { color: #00C9A7; text-decoration: none; font-weight: 600; font-size: .82rem; }
.forgot-link:hover { color: #00a88a; text-decoration: underline; }

.otp-icon-wrap {
    width: 64px; height: 64px; background: rgba(0,201,167,.12); border-radius: 16px;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;
}
.otp-icon-wrap i { font-size: 1.6rem; color: #00C9A7; }
.otp-input { font-size: 1.6rem; letter-spacing: 10px; text-align: center; font-weight: 700; color: #1A1F5E; }
.btn-back-login {
    border: 1.5px solid #E4E8F0; border-radius: 10px; color: #8892A4;
    font-size: .85rem; padding: .6rem; background: #fff; width: 100%;
}

@media (max-width: 768px) {
    .login-wrapper { flex-direction: column; overflow: auto; height: auto; min-height: 100vh; }
    .left-panel { flex: 0 0 auto; padding: 2rem 1.5rem; min-height: 220px; }
    .left-features { display: none; }
    .left-title { font-size: 1.5rem; }
    .right-panel { padding: 2rem 1.5rem; }
}