*{box-sizing:border-box;margin:0;padding:0;}

body{
  margin:0;
  padding:40px 20px;
  font-family:Arial,sans-serif;
  background:linear-gradient(180deg,#F5F1EA,#EFE8DE);
  color:#333;
  min-height:100vh;
}

.container{
  max-width:760px;
  margin:auto;
  padding:35px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-radius:36px;
  box-shadow:0 15px 50px rgba(0,0,0,.08);
}

.creator{
  text-align:center;
  font-size:14px;
  margin-bottom:15px;
  color:#777;
}

.creatorLink{
  color:#5E9C9B;
  font-weight:bold;
  text-decoration:none;
}

#topBar{
  display:flex;
  justify-content:space-between;
  padding-bottom:20px;
  margin-bottom:25px;
  border-bottom:1px solid rgba(0,0,0,.06);
  align-items:center;
  font-size:14px;
  color:#888;
}

#liveClock{
  font-size:18px;
  font-weight:700;
  color:#333;
}

header{
  text-align:center;
  margin-bottom:30px;
}

h1{
  font-size:clamp(36px,7vw,54px);
  margin:0;
  font-weight:900;
  letter-spacing:-1px;
}

.heroText{
  font-size:17px;
  color:#666;
  margin-top:8px;
}

textarea{
  width:100%;
  height:170px;
  padding:22px;
  box-sizing:border-box;
  border:none;
  border-radius:28px;
  resize:none;
  background:#e9e1d6;
  font-family:Arial,sans-serif;
  font-size:16px;
  color:#333;
  outline:none;
  line-height:1.6;
}

select,input[type="number"]{
  width:100%;
  padding:16px;
  box-sizing:border-box;
  border:none;
  border-radius:18px;
  background:#e9e1d6;
  margin-top:12px;
  font-family:Arial,sans-serif;
  font-size:16px;
  color:#333;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
}

#customTime{display:none;}

#customTimeNote{
  display:none;
  font-size:12px;
  color:#777;
  margin-top:8px;
  padding-left:4px;
}

.section{margin-top:42px;}

.sectionTitle{
  display:block;
  font-weight:700;
  margin-bottom:18px;
}

.optionCard{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px;
  background:#e9e1d6;
  border-radius:22px;
  margin-bottom:12px;
  cursor:pointer;
  transition:.2s;
}

.optionCard:hover{background:#e0d8cd;}

.optionCard:has(input:checked){
  background:#d4e8d4;
  outline:2px solid #7EB48F;
}

.optionCard input[type="radio"]{
  width:16px;
  height:16px;
  margin-top:4px;
  flex-shrink:0;
  accent-color:#5E9C9B;
}

.optionTitle{font-weight:700;margin-bottom:4px;}
.optionText{font-size:14px;color:#666;}

button{
  padding:16px;
  width:100%;
  border:none;
  border-radius:18px;
  margin-top:20px;
  cursor:pointer;
  font-weight:700;
  font-size:16px;
  font-family:Arial,sans-serif;
  transition:.3s;
}

button:hover{transform:translateY(-2px);}

#prioritizeBtn{
  background:linear-gradient(135deg,#5E9C9B,#7FA8C5);
  color:white;
}

#startBtn{
  background:linear-gradient(135deg,#7EB48F,#9CB99C);
  color:white;
}

#addTimeBtn{
  background:#e9e1d6;
  color:#333;
  flex:1;
}

#finishBtn{
  background:#D6B36A;
  color:white;
  flex:1;
}

.buttonRow{
  display:flex;
  gap:10px;
  margin-top:20px;
}

.buttonRow button{margin-top:0;}

#results{
  display:none;
  margin-top:35px;
}

#results h2{
  font-size:22px;
  margin-bottom:20px;
}

.task{
  background:#e9e1d6;
  padding:18px;
  border-radius:22px;
  margin-bottom:15px;
  transition:.3s;
}

.task.completed{
  opacity:.6;
  background:#d8f0dc;
}

.task label{
  display:flex;
  align-items:center;
  width:100%;
  gap:16px;
  cursor:pointer;
  min-height:28px;
}

.task span{
  font-size:17px;
  flex:1;
  text-align:left;
  line-height:1.4;
}

.task .check{
  width:20px!important;
  height:20px!important;
  min-width:20px;
  flex:0 0 20px;
  cursor:pointer;
  accent-color:#7EB48F;
  margin-left:auto;
}

.taskMessage{
  display:none;
  margin-top:15px;
  padding:16px;
  background:#f4f4f4;
  border-radius:18px;
  font-size:16px;
  line-height:1.5;
  color:#555;
}

#taskList h3{
  font-size:14px;
  font-weight:700;
  letter-spacing:.5px;
  color:#888;
  text-transform:uppercase;
  margin:24px 0 10px;
}

#taskList h3:first-child{margin-top:0;}

#timerSection{
  margin-top:32px;
  padding-top:28px;
  border-top:1px solid rgba(0,0,0,.07);
}

#timer{
  font-size:65px;
  text-align:center;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-2px;
  min-height:76px;
}

#startHint{
  text-align:center;
  margin-top:10px;
  color:#777;
  transition:.3s;
  font-size:15px;
}

#startHint.focusMode{
  font-size:20px!important;
  font-weight:800!important;
  color:#5E9C9B;
}

#finalMessage{
  text-align:center;
  margin-top:16px;
  font-size:16px;
  color:#888;
  min-height:0;
  display:none;
}

footer{
  margin-top:35px;
  text-align:center;
  font-size:13px;
  color:#888;
  line-height:1.6;
}