*{
box-sizing:border-box;
font-family:Inter,Arial,sans-serif;
}

body{
margin:0;
background:#f5f8f6;
}

.login-page{
min-height:100vh;
display:grid;
grid-template-columns:60% 40%;
padding:18px;
gap:24px;
}

.visual-panel{
background:white;
border-radius:32px;
padding:10px;
overflow:hidden;
}

.puzzle{
height:100%;
display:grid;
grid-template-columns:repeat(4,1fr);
grid-template-rows:repeat(4,1fr);
gap:8px;
}

.tile{
border-radius:20px;
background-size:cover;
background-position:center;
min-height:100px;
}


.a{
grid-row:span 2;
background-image:url('https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?auto=format&fit=crop&w=900&q=80');
}

.b{
grid-column:span 2;
background-image:url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1200&q=80');
}

.c{
background-image:url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=900&q=80');
}

.d{
background-image:url('https://images.unsplash.com/photo-1538108149393-fbbd81895907?auto=format&fit=crop&w=900&q=80');
}

.e{
background-image:url('https://images.unsplash.com/photo-1505751172876-fa1923c5c528?auto=format&fit=crop&w=900&q=80');
}

.f{
background-image:url('https://images.unsplash.com/photo-1516841273335-e39b37888115?auto=format&fit=crop&w=900&q=80');
}

.g{
background-image:url('https://images.unsplash.com/photo-1584982751601-97dcc096659c?auto=format&fit=crop&w=900&q=80');
}

.h{
background-image:url('https://images.unsplash.com/photo-1551601651-2a8555f1a136?auto=format&fit=crop&w=900&q=80');
}

.i{
background-image:url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=900&q=80');
}

.j{
background-image:url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=900&q=80');
}

.k{
background-image:url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=900&q=80');
}

.l{
background-image:url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=900&q=80');
}


.stat{
padding:28px;
color:white;
display:flex;
justify-content:center;
flex-direction:column;
}

.stat strong{
font-size:48px;
}

.stat span{
font-size:14px;
line-height:1.5;
margin-top:12px;
}

.orange{
background:#f15b3a;
}

.green{
background:#20b879;
}


.login-panel{
background:white;
border-radius:32px;
display:flex;
align-items:center;
justify-content:center;
padding:40px;
}

.form{
width:360px;
}

.brand{
font-weight:700;
font-size:22px;
margin-bottom:60px;
color:#111827;
}

.brand span{
color:var(--primary);
}

h1{
font-size:28px;
text-align:center;
font-weight:500;
}

h1 strong{
color:var(--primary);
}

p{
text-align:center;
font-size:14px;
color:var(--muted);
line-height:1.6;
margin-bottom:30px;
}

label{
display:block;
font-size:13px;
margin:15px 0 8px;
}

input{
width:100%;
height:46px;
border:1px solid #e5e7eb;
border-radius:10px;
padding:0 14px;
}

.forgot{
display:block;
text-align:right;
font-size:12px;
color:var(--primary);
margin:12px 0;
}

button{
width:100%;
height:46px;
border-radius:10px;
cursor:pointer;
}

.login{
background:var(--primary);
border:0;
color:white;
}

.google{
background:white;
border:1px solid #e5e7eb;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}

.google-icon{
width:18px;
height:18px;
flex-shrink:0;
}

.or{
display:flex;
align-items:center;
gap:12px;
margin:20px 0;
color:#9ca3af;
font-size:12px;
}

.or:before,.or:after{
content:"";
height:1px;
background:#e5e7eb;
flex:1;
}


/* Responsive */

@media(max-width:1100px){

.login-page{
grid-template-columns:1fr;
}

.visual-panel{
height:500px;
}

.login-panel{
padding:30px;
}

}


@media(max-width:600px){

.login-page{
padding:12px;
}

.visual-panel{
height:360px;
border-radius:24px;
}

.puzzle{
gap:5px;
}

.tile{
border-radius:14px;
}

.login-panel{
padding:20px 10px;
}

.form{
width:100%;
}

.brand{
margin-bottom:35px;
}

h1{
font-size:24px;
}

.stat{
padding:16px;
}

.stat strong{
font-size:32px;
}

.stat span{
font-size:11px;
}

}

/* NextHospital Brand Icon */
.brand{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}

.brand-icon{
    width:42px;
    height:42px;
    object-fit:contain;
    display:block;
}

/* Responsive icon scaling */
@media(max-width:1100px){
    .brand-icon{
        width:38px;
        height:38px;
    }
}

@media(max-width:600px){
    .brand-icon{
        width:34px;
        height:34px;
    }
}