/* STREAMING_CHUNK:Initializing Aurora Glass Login Engine... */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

body {
font-family: 'Inter', sans-serif !important;
margin: 0;
padding: 0;
min-height: 100vh;
background-color: #f1f5f9;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}

/* Hide the old jquery.backstretch completely */
.backstretch { display: none !important; }

/* =========================================================

ANIMATED AURORA BACKGROUND (FUTURISTIC ORBS)
========================================================= */
.aurora-bg {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: -1;
background: #eef2ff;
overflow: hidden;
}

.aurora-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.6;
animation: floatOrb 15s infinite alternate ease-in-out;
}

.aurora-orb-1 { width: 60vw; height: 60vw; background: #4f46e5; top: -20%; left: -10%; }
.aurora-orb-2 { width: 50vw; height: 50vw; background: #06b6d4; bottom: -20%; right: -10%; animation-delay: -5s; }
.aurora-orb-3 { width: 40vw; height: 40vw; background: #ec4899; top: 30%; left: 30%; animation-delay: -10s; opacity: 0.4; }

@keyframes floatOrb {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(5%, 10%) scale(1.1); }
}

/* =========================================================
2. MAIN GLASS PANEL LAYOUT
========================================================= */
.supreme-login-wrapper {
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
padding: 40px 20px;
}

.supreme-glass-panel {
display: flex;
width: 100%;
max-width: 1200px;
min-height: 700px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(40px) saturate(200%);
-webkit-backdrop-filter: blur(40px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 40px;
box-shadow: 0 40px 100px rgba(15, 23, 42, 0.1), inset 0 2px 0 rgba(255, 255, 255, 0.8);
overflow: hidden;
animation: popIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes popIn {
0% { opacity: 0; transform: scale(0.95) translateY(30px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* LEFT SIDE: Form Area */
.supreme-form-section {
flex: 0 0 50%;
padding: 60px;
display: flex;
flex-direction: column;
justify-content: center;
background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4));
}

/* STREAMING_CHUNK:Styling Inputs and Form Elements... */
.form-top-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
}

.form-top-header img { max-height: 55px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.05)); }
.form-top-header i { font-size: 32px; color: #4f46e5; background: #eef2ff; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 20px; box-shadow: 0 10px 20px rgba(79, 70, 229, 0.15); }

.login-title {
font-size: 32px;
font-weight: 900;
color: #0f172a;
letter-spacing: -0.03em;
margin-bottom: 30px;
}

.supreme-input-group { margin-bottom: 24px; position: relative; }

.supreme-input-group input {
width: 100%;
height: 60px !important;
background: #ffffff !important;
border: 2px solid transparent !important;
border-radius: 16px !important;
padding: 0 24px !important;
font-size: 16px !important;
font-weight: 600 !important;
color: #0f172a !important;
box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.supreme-input-group input:focus {
border-color: #4f46e5 !important;
box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.15), 0 10px 30px rgba(79, 70, 229, 0.1) !important;
outline: none !important;
}

.supreme-input-group input::placeholder { color: #94a3b8 !important; font-weight: 500; }

.supreme-btn {
width: 100%;
height: 60px;
background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
border: none !important;
border-radius: 16px !important;
color: #ffffff !important;
font-size: 18px !important;
font-weight: 800 !important;
letter-spacing: 0.05em;
box-shadow: 0 15px 35px rgba(79, 70, 229, 0.3) !important;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
cursor: pointer;
margin-top: 10px;
}

.supreme-btn:hover {
transform: translateY(-4px);
box-shadow: 0 20px 45px rgba(79, 70, 229, 0.4) !important;
}

.forgot-link {
display: inline-block;
text-align: center;
width: 100%;
margin-top: 24px;
color: #64748b;
font-weight: 700;
text-decoration: none !important;
transition: color 0.3s ease;
}
.forgot-link:hover { color: #4f46e5; }
.forgot-link i { margin-right: 6px; }

/* STREAMING_CHUNK:Building the Premium ABDM Certification Card... */
.abdm-premium-card {
background: #ffffff;
border-radius: 24px;
padding: 24px;
margin-top: 40px;
border: 1px solid rgba(229, 231, 235, 0.8);
box-shadow: 0 15px 40px rgba(15, 23, 42, 0.04);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
overflow: hidden;
}

.abdm-premium-card::after {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 4px;
background: linear-gradient(90deg, #10b981, #0ea5e9, #4f46e5);
}

.abdm-logo { max-height: 45px; margin-bottom: 12px; }

.abdm-authority-text {
font-size: 10px;
font-weight: 900;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 4px;
}

.abdm-main-title {
font-size: 16px;
font-weight: 900;
color: #0f172a;
letter-spacing: -0.02em;
margin-bottom: 16px;
}

.abdm-badges-row {
display: flex;
gap: 10px;
justify-content: center;
margin-bottom: 12px;
}

.abdm-badge {
background: linear-gradient(135deg, #10b981, #059669);
color: #ffffff;
font-size: 11px;
font-weight: 800;
padding: 6px 12px;
border-radius: 8px;
box-shadow: 0 6px 15px rgba(16, 185, 129, 0.3);
letter-spacing: 0.05em;
border: 1px solid rgba(255,255,255,0.4);
}

.abdm-hfr-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
color: #3b82f6;
background: #eff6ff;
padding: 6px 14px;
border-radius: 20px;
}
.abdm-hfr-status i { color: #10b981; }

/* STREAMING_CHUNK:Right Side Notice HUD Styling... */
.supreme-notice-section {
flex: 0 0 50%;
background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
padding: 60px;
color: #ffffff;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}

/* Tech grid overlay for right side */
.supreme-notice-section::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
z-index: 0;
}

.notice-container {
position: relative;
z-index: 1;
height: 100%;
max-height: 600px;
overflow-y: auto;
padding-right: 20px;
}
.notice-container::-webkit-scrollbar { width: 6px; }
.notice-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }

.notice-main-title {
font-size: 28px;
font-weight: 900;
color: #ffffff;
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 12px;
}
.notice-main-title i { color: #0ea5e9; }

.notice-item {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
padding: 24px;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.notice-item:hover {
background: rgba(255, 255, 255, 0.06);
transform: translateX(5px);
border-color: rgba(255, 255, 255, 0.15);
}

.notice-item h4 {
font-size: 18px;
font-weight: 800;
color: #38bdf8;
margin-bottom: 10px;
margin-top: 0;
}

.notice-item p {
font-size: 14px;
line-height: 1.6;
color: #cbd5e1;
margin-bottom: 0;
}

.notice-item a.more {
color: #10b981;
font-weight: 800;
text-decoration: none;
margin-left: 5px;
}
.notice-item a.more:hover { text-decoration: underline; }

/* Responsive adjustments */
@media (max-width: 991px) {
.supreme-glass-panel { flex-direction: column; width: 95%; height: auto; min-height: auto; }
.supreme-form-section, .supreme-notice-section { flex: 1 1 100%; padding: 40px; }
.abdm-badges-row { flex-wrap: wrap; }
}
@media (max-width: 767px) {
.supreme-form-section, .supreme-notice-section { padding: 30px 20px; }
.login-title { font-size: 24px; }
}