body{
margin:0;
font-family:Arial;
text-align:center;
background:linear-gradient(#020111,#191621,#020111);
color:white;
}

.med-app{
max-width:420px;
margin:auto;
padding:20px;
}

.med-card{
background:rgba(255,255,255,0.08);
padding:20px;
border-radius:12px;
}

.med-hidden{ display:none; }

.med-tapala{
width:90px;
margin:10px auto;
display:block;
}

.med-circle{
width:180px;
height:180px;
margin:20px auto;
border-radius:50%;
background:radial-gradient(circle,#8a7bff,#5a4dcc);
display:flex;
align-items:center;
justify-content:center;
transition:transform 3s ease;
box-shadow:0 0 30px rgba(255,255,255,0.3);
}

.med-om{ width:80px; }

.med-progress{
width:100%;
height:8px;
background:rgba(255,255,255,0.2);
border-radius:6px;
margin-top:10px;
}

#medBar{
height:100%;
width:0%;
background:#00e5ff;
border-radius:6px;
}

.med-btn{
padding:12px 20px;
border:none;
border-radius:8px;
margin-top:10px;
cursor:pointer;
color:white;
}

.med-start{ background:#ff9800; }
.med-stop{ background:#e91e63; }
.med-home{ background:#4caf50; text-decoration:none; display:inline-block; }
.med-share{ background:#2196f3; }

.med-btn:hover{
opacity:0.85;
}