body { font-family: 'Segoe UI', sans-serif; background-color: #eef2f5; margin: 0; display: flex; justify-content: center; min-height: 100vh; }
.app-container { width: 100%; max-width: 420px; background: #fff; min-height: 100vh; position: relative; box-shadow: 0 0 20px rgba(0,0,0,0.05); display: flex; flex-direction: column; }

/* Header */
header { padding: 25px 20px; background: #fff; border-bottom: 1px solid #f0f0f0; }
h1 { margin: 0 0 5px 0; font-size: 26px; color: #2c3e50; }
.subtitle { color: #95a5a6; font-size: 14px; display: block; margin-bottom: 15px; }

/* Calendário */
.calendar-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; }
.day-card { min-width: 55px; height: 75px; background: #f8f9fa; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: #7f8c8d; border: 1px solid transparent; transition: 0.2s; }
.day-card.active { background: #2c3e50; color: #fff; box-shadow: 0 5px 15px rgba(44,62,80,0.3); }
.day-name { font-size: 11px; text-transform: uppercase; font-weight: 600; }
.day-number { font-size: 20px; font-weight: 700; margin-top: 4px; }

/* Lista */
.task-container { padding: 20px; flex: 1; padding-bottom: 100px; overflow-y: auto; }
.category-header { font-size: 12px; text-transform: uppercase; font-weight: 700; margin: 25px 0 10px 0; letter-spacing: 1px; display: flex; align-items: center; }
.category-dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; display: inline-block; }

.task-item { display: flex; align-items: center; background: #fff; padding: 15px 0; border-bottom: 1px solid #f9f9f9; }
.task-item.completed .task-text { text-decoration: line-through; color: #bdc3c7; }

/* Checkbox */
.custom-checkbox { width: 22px; height: 22px; border: 2px solid #e0e0e0; border-radius: 6px; margin-right: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.task-item.completed .custom-checkbox { background: #2c3e50; border-color: #2c3e50; }
.custom-checkbox::after { content: '✔'; color: #fff; font-size: 14px; display: none; }
.task-item.completed .custom-checkbox::after { display: block; }

.task-text { flex: 1; font-size: 16px; color: #34495e; }
.delete-btn { background: none; border: none; color: #e74c3c; font-size: 20px; cursor: pointer; padding: 0 10px; }

/* Botões e Form */
.fab { position: fixed; bottom: 30px; right: calc(50% - 180px); width: 60px; height: 60px; background: #2c3e50; border-radius: 50%; color: white; font-size: 30px; text-decoration: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(44,62,80,0.4); z-index: 99; }
@media (max-width: 450px) { .fab { right: 20px; } }

.form-group { margin-bottom: 20px; }
.form-group label { display: block; color: #7f8c8d; font-size: 14px; margin-bottom: 8px; font-weight: 600; }
.form-control { width: 100%; padding: 15px; border: 1px solid #e0e0e0; border-radius: 10px; font-size: 16px; background: #f9f9f9; box-sizing: border-box; outline: none; }
.btn-save { width: 100%; background: #2c3e50; color: white; padding: 15px; border: none; border-radius: 10px; font-size: 16px; font-weight: bold; cursor: pointer; }
.btn-back { display: inline-block; margin-bottom: 20px; text-decoration: none; color: #333; font-weight: bold; font-size: 18px;}
.link-action { font-size: 14px; color: #2196F3; text-decoration: none; margin-right: 15px; }
.link-danger { font-size: 14px; color: #e74c3c; text-decoration: none; }