body {
font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
margin: 0;
padding: 0;
height: 100vh;
background: linear-gradient(to bottom, #1e1f3f, #3b3d6f);
background-repeat: no-repeat;
background-size: cover;
color: white;
}

.page { display: none; padding: 20px; }
.active { display: block; }

h1 { font-size: 24px; margin-bottom: 30px; }

.button-card {
background: #f0f0ff;
color: #1e1f3f;
padding: 20px;
border-radius: 20px;
font-size: 20px;
font-weight: bold;
text-align: center;
margin: 15px 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: flex-start;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.button-card img {
width: 50px;
height: 50px;
margin-right: 15px;
}

.button-card:hover { background: #e0e0ff; }

/* Workout Page */
.top-bar {
display: flex;
align-items: center;
margin-bottom: 20px;
}

.back-button {
font-size: 50px;
margin-right: 15px;
margin-top: -10px;
cursor: pointer;
}

.circle-container {
position: relative;
width: 90%;
max-width: 250px;
margin: 20px auto;
padding: 10px;
box-sizing: border-box;
background: #2c2d5a;
border-radius: 30px;
}

.circle-number {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 48px;
font-weight: bold;
color: #fff;
}

.circle-number .goal {
position: absolute;
bottom: -30px;
font-size: 16px;
color: #ccc;
width: 100%;
text-align: center;
}

.greeting {
font-size: 38px;   /* Bigger greeting */
font-weight: bold;
} 

.subtitle {
font-size: 24px;   /* Keep original size */
font-weight: normal;
}

.record-list {
list-style: none;
padding: 0;
font-size: 20px;
margin: 10px 0 30px;
}

.record-list li {
background: #2c2d5a;
padding: 12px 16px;
border-radius: 12px;
margin-bottom: 10px;
color: #fff;
}

.clear-row {
display: flex;
justify-content: space-between;
gap: 10px;         /* space between the buttons */
margin-top: 20px;
}

.clear-btn {
flex: 1;           /* both grow equally */
background: #ff4d4d;
color: white;
border: none;
padding: 12px 10px;
border-radius: 12px;
cursor: pointer;
font-size: 16px;   /* smaller text */
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.clear-btn:active {
background: #cc0000;
}


svg { width: 100%; height: auto; transform: rotate(-90deg); }
.progress-bg { stroke: #555; stroke-width: 10; fill: none; }
.progress { stroke: #5ebd7b; stroke-width: 10; fill: none; stroke-linecap: round; transition: stroke-dashoffset 0.5s ease; }

.controls { margin-top: 20px; display: flex; flex-direction: column; align-items: center; }
.controls input { font-size: 16px; padding: 8px; width: 120px; text-align: center; border-radius: 5px; border: none; margin: 5px 0; }
.controls button { font-size: 18px; padding: 12px 25px; margin: 5px 0; border-radius: 10px; border: none; cursor: pointer; background: #5ebd7b; color: white; }
.controls button:active { background: #02ff4e; }