*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Inter,sans-serif;
}

body{
    margin:0;
    background:#f4f8fc;
    color:#24324a;
}

.container{

max-width:1650px;
margin:auto;

background:rgba(255,255,255,.22);

border:1px solid rgba(255,255,255,.45);

backdrop-filter:blur(18px);

border-radius:18px;


padding:90px;
box-shadow:0 20px 40px rgba(0,0,0,.08);

}

h1{

font-size:48px;

font-weight:700;

margin-bottom:25px;

color:#24324a;

}

.search-box{

display:flex;

gap:15px;

margin-bottom:25px;

}

input{

flex:1;

height:60px;

padding:0 20px;

font-size:20px;

border-radius:14px;

border:1px solid rgba(0,0,0,.08);

background:white;

transition:.25s;

}

input:focus{

outline:none;

border-color:#4b8df8;

box-shadow:0 0 0 4px rgba(75,141,248,.15);

}

button{

width:160px;

border:none;

border-radius:14px;

background:#4b8df8;

color:white;

font-size:18px;

font-weight:600;

cursor:pointer;

transition:.25s;

}

button:hover{

background:#3579f5;

transform:translateY(-2px);

}

.patient-card{

background:white;

border-left:6px solid #4b8df8;

border-radius:14px;

padding:22px;

margin-bottom:25px;

box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.patient-card strong{

color:#24324a;

}

.not-found{

font-size:18px;

color:#dc2626;

margin-bottom:20px;

}

table{

width:100%;

border-collapse:collapse;

background:white;

border-radius:16px;

overflow:hidden;

box-shadow:0 8px 25px rgba(0,0,0,.05);

}

th{

background:#edf4ff;

color:#24324a;

font-size:17px;

font-weight:700;

padding:18px;

text-align:left;

}

td{

padding:18px;

border-bottom:1px solid #edf1f6;

font-size:16px;

}

tbody tr:hover{

background:#f8fbff;

transition:.2s;

}

.patient-result{

background:white;

padding:18px;

margin-bottom:12px;

border-radius:12px;

cursor:pointer;

border:1px solid #e5e7eb;

transition:.2s;

}

.patient-result:hover{

background:#edf4ff;

border-color:#4b8df8;

transform:translateX(5px);

}

body{
    zoom: 80%;
}

.input-wrapper{
    position:relative;
    flex:1;
}

.input-wrapper input{
    width:100%;
    padding-right:45px;
}

#clearInput{
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    font-size:18px;
    color:#999;
    cursor:pointer;
    user-select:none;
    display:none;
}

#clearInput:hover{
    color:#e53935;
}

@media (max-width:768px){

.container{
    padding:20px;
    border-radius:0;
}

h1{
    font-size:34px;
    margin-bottom:20px;
}

.search-box{
    flex-direction:column;
}

button{
    width:100%;
    height:55px;
}

table{
    font-size:14px;
}

th,
td{
    padding:12px 8px;
}

}