*{margin:0;padding:0;box-sizing:border-box;}
:root {
  --background: #000430;
  --text: #fff;
  --secondaryBackground: #171c48;
  --purple: #828dff;
  --teal: #24feee;
}
body{background-color:var(--background);color:var(--text);font-family:Arial,sans-serif;}
.container{max-width:600px;margin:50px auto;padding:20px;}

/* Header container */
.header-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
}
.header-container h1{margin-right:auto;}
.circle-container{position:relative;width:100px;height:100px;}
.circle-container svg{transform:rotate(-90deg);}
.circle-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:20px;font-weight:bold;color:var(--text);}
#toggleMode{background:none;border:none;color:var(--text);font-size:24px;cursor:pointer;}

#progressBarContainer{margin:20px 0;}
#progressBar{width:100%;height:10px;background-color:var(--secondaryBackground);border-radius:5px;}
#progress{width:0%;height:10px;border-radius:10px;background:linear-gradient(to right, #ff0000, #24feee);transition:0.5s;}

form{display:flex;gap:10px;margin-bottom:20px;}
input{flex:1;padding:15px;border-radius:10px;border:1px solid var(--purple);background:var(--secondaryBackground);color:var(--text);}
button{width:50px;height:50px;border-radius:50%;background-color:var(--purple);color:var(--text);font-size:30px;cursor:pointer;}

.Task-List{list-style:none;}
.task-card{display:flex;justify-content:space-between;align-items:center;background-color:var(--secondaryBackground);padding:15px;border-radius:15px;margin-bottom:15px;box-shadow:0 4px 8px rgba(0,0,0,0.2);transition:0.3s;}
.task-card.completed{opacity:0.6;}
.task-left{display:flex;align-items:center;gap:10px;}
.task-left p.done{text-decoration:line-through;color:#888;}
.task-right{display:flex;align-items:center;gap:10px;font-size:14px;}
.timer{font-family:monospace;background:#171c48;padding:3px 7px;border-radius:5px;}
.pomodoroInput {
    padding:3px 5px;
    border-radius:5px;
    border:1px solid var(--purple);
    background:var(--secondaryBackground);
    color:var(--text);
    font-size:14px;
    width:50px;
}
.ai-message{margin-top:20px;padding:10px;border-radius:10px;background:var(--purple);display:none;text-align:center;transition:0.3s;}

body.light{--background:#f2f2f2;--text:#000;--secondaryBackground:#ddd;--purple:#7b5cff;--teal:#00bcd4;}