body{
background:#0d1117;
color:white;
padding:20px;
}

#customersList{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(420px,1fr));
gap:20px;
margin-top:20px;
}

.customer-card{
background:#161b22;
padding:20px;
border-radius:15px;
border-left:4px solid #FFD700;
transition:.3s;
}

.customer-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(255,215,0,.15);
}

.customer-card h3{
color:#FFD700;
margin-bottom:10px;
}

.customer-card p{
margin:8px 0;
}

.vip{
background:#FFD700;
color:black;
padding:6px 12px;
border-radius:20px;
display:inline-block;
font-weight:bold;
margin-top:10px;
}

#searchCustomer{
width:100%;
padding:15px;
background:#161b22;
color:white;
border:1px solid #333;
border-radius:12px;
margin-bottom:20px;
}

#searchCustomer:focus{
outline:none;
border:1px solid #FFD700;
box-shadow:0 0 10px rgba(255,215,0,.3);
}

.view-orders-btn{
width:100%;
margin-top:15px;
background:#FFD700;
color:black;
font-weight:bold;
border:none;
padding:12px;
border-radius:10px;
cursor:pointer;
}

.view-orders-btn:hover{
transform:translateY(-2px);
}

.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.85);
justify-content:center;
align-items:center;
z-index:9999;
padding:20px;
}

.modal-content{
background:#161b22;
padding:25px;
border-radius:20px;
width:100%;
max-width:700px;
max-height:80vh;
overflow-y:auto;
border:1px solid #FFD700;
}

.order-history-card{
background:#0d1117;
padding:15px;
border-radius:12px;
margin-bottom:12px;
border-left:4px solid #FFD700;
}

.order-history-card h3{
color:#FFD700;
margin-bottom:10px;
}

@media(max-width:768px){

#customersList{
grid-template-columns:1fr;
}

body{
padding:10px;
}

}

.top-customer{
border-left:4px solid #00CC66;
}

#topCustomerName{
font-size:22px;
font-weight:bold;
color:#FFD700;
}

#topCustomerSpent{
font-size:16px;
color:#00CC66;
}