body{
  background-color:#ffffff;
  font-family:"Noto Sans Thai",sans-serif;
  margin:0;padding:0;
  transition:background-color .3s,color .3s
}
.container{
  max-width:700px;background:#fff;
  margin:16px auto;padding:30px 40px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  border-radius:12px
}
.theme-toggle{display:flex;justify-content:flex-end;margin-bottom:20px}
label{display:block;margin-top:15px;color:#444;font-weight:500}
input,textarea{
  width:100%;padding:10px 12px;margin-top:5px;
  border:1px solid #ccc;border-radius:6px;font-size:1em;box-sizing:border-box
}
textarea{resize:vertical;height:140px}
button{
  margin-top:20px;padding:10px 20px;font-size:1em;
  background:#007bff;color:#fff;border:none;border-radius:6px;cursor:pointer;
  transition:background-color .3s
}
button:hover{background:#0056b3}
.checkbox-group{display:flex;align-items:center;gap:8px;margin:15px 0 10px}
.checkbox-group input{width:auto;accent-color:#007bff}
ul#taskList{list-style:disc inside;padding-left:0}
ul#taskList li{margin:6px 0}
ul#taskList button{margin-left:6px;padding:2px 10px;font-size:.85em}

/* Dark‑mode */
body.dark-mode{background:#121212;color:#e0e0e0}
body.dark-mode .container{background:#1e1e1e;box-shadow:none}
body.dark-mode input,body.dark-mode textarea{
  background:#2c2c2c;color:#fff;border:1px solid #555
}
body.dark-mode button{background:#2196f3}
body.dark-mode button:hover{background:#0d8ae0}
body.dark-mode label,body.dark-mode .checkbox-group label{color:#ddd}