body 
{ font-family: system-ui, Arial, Helvetica, sans-serif; background: #f4f6f8; color: #222; margin: 0; padding: 20px; }
.container 
{ max-width: 900px; margin: 0 auto; }
h1 
{ margin: 0 0 16px 0; }
.form-section, .list-section 
{ background: #fff; padding: 16px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); margin-bottom: 16px; }
label 
{ display: block; margin-bottom: 8px; }
input
[type=text], textarea, input[type=date], select { width: 100%; padding: 8px; margin-top: 4px; box-sizing: border-box; }
textarea 
{ min-height: 80px; }
.buttons 
{ margin-top: 8px; }
button 
{ padding: 8px 12px; border-radius: 6px; border: none; cursor: pointer; }
button.secondary 
{ background: #eee; color: #333; }
button#submit-btn 
{ background: #0b72ff; color: white; }
.message
 { margin-top: 10px; min-height: 22px; }
.message.info
 { color: #0b72ff; }
.message.success 
{ color: #0a8a00; }
.message.error 
{ color: #c61b00; }
.task 
{ display: flex; justify-content: space-between; align-items: flex-start; padding: 12px; border-bottom: 1px solid #eee; }
.task h3 
{ margin: 0 0 6px 0; }
.task p 
{ margin: 0 0 6px 0; }
.task-actions button
 { margin-left: 6px; }
.badge
 { background: #e6ffed; color: #057a3b; padding: 3px 8px; border-radius: 12px; font-size: 12px; margin-left: 8px; }
.meta 
{ font-size: 12px; color: #666; }