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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f0f2f5;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
}

.app-wrapper { width: 100%; max-width: 580px; }

.app-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  padding: 32px;
}

.app-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
}

.app-header h1 { font-size: 26px; font-weight: 700; color: #1a1a2e; }

.task-count {
  font-size: 13px; color: #888;
  background: #f0f2f5; padding: 4px 10px; border-radius: 20px;
}

.add-form { display: flex; gap: 10px; margin-bottom: 28px; }

.add-input {
  flex: 1; padding: 11px 16px;
  border: 1.5px solid #e0e0e0; border-radius: 10px;
  font-size: 14px; outline: none; color: #1a1a2e;
  transition: border-color 0.2s;
}
.add-input:focus { border-color: #6c63ff; }

.add-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 18px; background: #6c63ff; color: #fff;
  border: none; border-radius: 10px; font-size: 14px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background 0.2s, transform 0.1s;
}
.add-btn:hover { background: #574fd6; }
.add-btn:active { transform: scale(0.97); }

.todo-list { display: flex; flex-direction: column; gap: 10px; }

.todo-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: #fafafa;
  border: 1.5px solid #f0f0f0; border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.todo-item:hover {
  border-color: #e0e0e0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.todo-item.completed { opacity: 0.55; }

.custom-checkbox { display: flex; cursor: pointer; flex-shrink: 0; }
.custom-checkbox input { display: none; }

.checkmark {
  width: 20px; height: 20px;
  border: 2px solid #d0d0d0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.custom-checkbox input:checked + .checkmark {
  background: #6c63ff; border-color: #6c63ff;
}
.custom-checkbox input:checked + .checkmark::after {
  content: '';
  width: 5px; height: 9px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg) translateY(-1px);
  display: block;
}

.todo-title { flex: 1; font-size: 14px; color: #2d2d2d; cursor: pointer; }
.completed .todo-title { text-decoration: line-through; color: #aaa; }

.rename-form { flex: 1; display: flex; gap: 6px; align-items: center; }

.rename-input {
  flex: 1; padding: 6px 10px;
  border: 1.5px solid #6c63ff; border-radius: 8px;
  font-size: 14px; outline: none; color: #1a1a2e;
}



.rename-save-btn {
  padding: 6px 12px; background: #6c63ff; color: #fff;
  border: none; border-radius: 8px; font-size: 13px; cursor: pointer;
}

.app-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
  gap: 4px;
}

.rename-cancel-btn {
  padding: 6px 12px; background: #f0f0f0; color: #555;
  border: none; border-radius: 8px; font-size: 13px; cursor: pointer;
}

.todo-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

.edit-btn, .delete-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  border: none; cursor: pointer; background: transparent;
  transition: background 0.15s; text-decoration: none;
}
.edit-btn { color: #6c63ff; }
.edit-btn:hover { background: #f0eeff; }
.delete-btn { color: #e74c3c; }
.delete-btn:hover { background: #fff0f0; }

.empty-state { text-align: center; padding: 40px 20px; color: #bbb; }
.empty-state p { margin-top: 12px; font-size: 14px; }