*{
box-sizing:border-box;
}


body{

margin:0;

min-height:100vh;

font-family:
"Segoe UI",
Arial;

background:#111;

color:white;

}



.container{

max-width:900px;

margin:auto;

padding:40px 20px;

}



h1{

text-align:center;

}



.subtitle{

text-align:center;

color:#bbb;

}



.card{

margin-top:30px;

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

padding:30px;

border-radius:16px;

}



label{

display:block;

margin-top:15px;

margin-bottom:6px;

font-weight:bold;

}



input{

width:100%;

padding:12px;

border-radius:10px;

border:none;

font-size:16px;

}



.button-group{

display:flex;

gap:10px;

margin-top:25px;

}



button{

flex:1;

padding:12px;

border:none;

border-radius:10px;

background:#ffcc33;

font-weight:bold;

cursor:pointer;

}



button:hover{

transform:translateY(-2px);

}



table{

width:100%;

margin-top:20px;

border-collapse:collapse;

}



th,td{

padding:12px;

border-bottom:1px solid #555;

text-align:center;

}



.history-card{

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

padding:15px;

border-radius:12px;

margin-top:15px;

}



.history-buttons{

display:flex;

gap:10px;

}



.delete-btn{

background:#e74c3c;

color:white;

}



@media(max-width:600px){


.container{

padding:25px 15px;

}


h1{

font-size:25px;

}


.button-group{

flex-direction:column;

}


table{

font-size:12px;

}

}