*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}.root{display:flex;justify-content:center;align-items:center;min-height:100vh}.container{width:100%;max-width:900px}.header{text-align:center;color:#fff;margin-bottom:40px;animation:slideDown .6s ease-out}.header h1{font-size:3em;font-weight:700;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.subtitle{font-size:1.1em;opacity:.9}.content{display:flex;flex-direction:column;gap:30px}.stats-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:20px}.stat-card{background:#fff;border-radius:12px;padding:25px;box-shadow:0 4px 15px #0000001a;text-align:center;transition:transform .3s ease,box-shadow .3s ease}.stat-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px #00000026}.stat-card.completed{border-left:5px solid #10b981}.stat-card.pending{border-left:5px solid #f59e0b}.stat-label{display:block;font-size:.9em;color:#6b7280;font-weight:500;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.stat-number{display:block;font-size:2.5em;font-weight:700;color:#667eea}.todo-list{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 15px #0000001a;animation:fadeIn .6s ease-out}.todo-item{display:flex;align-items:center;padding:20px;border-bottom:1px solid #e5e7eb;transition:all .3s ease;gap:15px}.todo-item:last-child{border-bottom:none}.todo-item:hover{transform:translate(5px);background-color:#f9fafb}.todo-checkbox{width:20px;height:20px;cursor:pointer;accent-color:#667eea;flex-shrink:0}.todo-content{flex:1;display:flex;flex-direction:column;gap:5px}.todo-id{font-size:.75em;color:#9ca3af;font-weight:600;text-transform:uppercase}.todo-text{font-size:1em;color:#1f2937;line-height:1.5;word-break:break-word}.todo-item.completed .todo-text{text-decoration:line-through;color:#9ca3af}.todo-status{padding:6px 12px;border-radius:20px;font-size:.85em;font-weight:600;white-space:nowrap;flex-shrink:0}.todo-status.done{background-color:#d1fae5;color:#047857}.todo-status.pending{background-color:#fee2e2;color:#991b1b}.loading{text-align:center;color:#fff;font-size:1.2em;animation:pulse 1.5s infinite}.error{text-align:center;color:#fee2e2;background:#f003;padding:20px;border-radius:12px;font-size:1.1em}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}@media (max-width: 768px){.header h1{font-size:2em}.stats-container{grid-template-columns:1fr}.todo-item{flex-direction:column;align-items:flex-start}.todo-status{align-self:flex-end}}