:root { 
  --bg:#f5f5f7; 
  --panel:#fff; 
  --text:#111; 
  --muted:#555; 
  --accent:#2563eb;
  --radius:12px; 
  --shadow:0 6px 16px rgba(0,0,0,.08); 
  font-family: system-ui, sans-serif; 
}
body { 
  margin:0; 
  background:var(--bg); 
  color:var(--text); 
  min-height:100vh; 
  display:flex;
  flex-direction:column; 
}
.loader { 
  position:fixed; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%; 
  background:rgba(255,255,255,.8); 
  display:flex; 
  justify-content:center; 
  align-items:center; 
  z-index:1000; 
  opacity: 0;
}
header { 
  background:var(--panel);
  box-shadow:var(--shadow); 
  position:sticky; 
  top:0;
  z-index:10; 
}
nav { 
  display:flex; 
  gap:6px; 
  max-width:900px; 
  margin:0 auto; 
  padding:10px; 
}
nav button { 
  flex:1; 
  padding:10px; 
  border:none; 
  background:transparent; 
  cursor:pointer;
  border-radius:var(--radius); 
  font-weight:600; 
}
nav button.active { 
  background:var(--accent); 
  color:#fff; 
}
main { 
  flex:1; 
  max-width:900px; 
  width:100%; 
  margin:20px auto; 
  padding:0 10px; 
}
section { 
  display:none; 
  background:var(--panel); 
  border-radius:var(--radius);
  padding:20px; 
  box-shadow:var(--shadow); 
}
section.active { 
  display:block; 
}
/* Todo */
#todoForm { 
  display:flex; 
  gap:10px; 
  margin-bottom:14px; 
}
#todoForm input { 
  flex:1; 
  padding:8px 10px; 
  border-radius:8px; 
  border:1px solid #ccc; 
}
#todoForm button { 
  padding:8px 14px; 
  border:none; 
  background:var(--accent); 
  color:#fff; 
  border-radius:8px; 
  cursor:pointer; 
}
#todoList { 
  list-style:none; 
  padding:0; 
  margin:0; 
  display:grid; 
  gap:10px; 
}
#todoList li { 
  background:#f0f4ff; 
  padding:10px 14px; 
  border-radius:8px; 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
}
#todoList button { 
  border:none; 
  background:#ef4444; 
  color:#fff; 
  border-radius:6px; 
  cursor:pointer; 
  padding:4px 8px; 
}

/* Notes */
#noteForm { 
  display:flex; 
  gap:10px; 
  margin-bottom:14px; 
}
#noteForm textarea { 
  flex:1; 
  padding:10px; 
  border-radius:8px; 
  border:1px solid #ccc; 
  resize:vertical; 
}
#noteForm button { 
  padding:8px 14px; 
  border:none; 
  background:var(--accent); 
  color:#fff; 
  border-radius:8px; 
  cursor:pointer; 
}
#noteList { 
  display:grid; 
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); 
  gap:10px; 
}
.note { 
  background:#fff9c4; 
  padding:10px; 
  border-radius:8px; 
  position:relative; 
  box-shadow: var(--shadow); 
}
.note button { 
  position:absolute; 
  top:6px; 
  right:6px; 
  border:none; 
  background:#ef4444; 
  color:#fff; 
  border-radius:6px; 
  cursor:pointer; 
  padding:2px 6px; 
  font-size:.8rem; 
}

/* Timer */
#timerDisplay { 
  font-size:2rem; 
  text-align:center; 
  margin:20px 0; 
}
#timerSetForm {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  align-items: flex-end;
}
.timerSetGroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
#timerSetForm .timerInput {
  width: 50px;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid #ccc;
  text-align: center;
}
#timerSetForm label {
  margin-bottom: 2px;
  font-size: 0.95rem;
  color: var(--muted);
}
#timerSetForm button {
  padding: 6px 14px;
  border: none;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  align-self: center;
}
#timerSetForm input { 
  width: 50px; 
}
#timerSetForm input[type="number"]::-webkit-inner-spin-button, #timerSetForm input[type="number"]::-webkit-outer-spin-button 
{ 
  -webkit-appearance: none; 
  margin: 0; 
}
#timerSetForm input[type="number"]::-webkit-inner-spin-button,
#timerSetForm input[type="number"]::-webkit-outer-spin-button 
{ 
  -webkit-appearance: none; 
  margin: 0; 
}
#timerSetForm input[type="number"]::-webkit-inner-spin-button,
#timerSetForm input[type="number"]::-webkit-outer-spin-button 
{ 
  -webkit-appearance: none; 
  margin: 0; 
}
#timerControls { 
  display:flex; 
  justify-content:center; 
  gap:10px; 
}
#timerControls button { 
  padding:10px 14px; 
  border:none; 
  border-radius:8px; 
  cursor:pointer; 
  background:var(--accent); 
  color:#fff; 
  font-weight:600; 
}
#timerControls button.secondary {
   background:#ef4444; 
  }
/* Stopwatch */
#stopwatchDisplay { 
  font-size:2rem; 
  text-align:center; 
  margin:20px 0; 
}
#stopwatch h2{ 
  text-align: center; 
}
#stopwatchControls { 
  display:flex; 
  justify-content:center; 
  gap:10px; 
}
#stopwatchControls button { 
  padding:10px 14px; 
  border:none; 
  border-radius:8px; 
  cursor:pointer; 
  background:var(--accent); 
  color:#fff; 
  font-weight:600; 
}
#stopwatchControls button.secondary {
  background:#ef4444; 
}