*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background-color:#f0f4f8;padding:20px;font-family:Inter,sans-serif}.App{background-color:#fff;border-radius:12px;max-width:800px;margin:0 auto;padding:30px;transition:all .3s;box-shadow:0 4px 12px #0000001a}.App:hover{box-shadow:0 6px 18px #00000026}h1{color:#1f2937;text-align:center;letter-spacing:-.5px;margin-bottom:20px;font-size:2rem}h2{color:#374151;margin-bottom:15px;font-size:1.25rem}p{color:#6b7280;font-size:.9rem}ul{margin:0;padding:0;list-style:none}li{background-color:#f9fafb;border-radius:10px;justify-content:space-between;align-items:center;margin-bottom:15px;padding:20px;transition:transform .2s;display:flex;box-shadow:0 2px 8px #0000000d}li:hover{transform:translateY(-3px)}li h2{color:#111827;font-size:1.2rem}li p{color:#6b7280;font-size:.85rem}li.completed h2,li.completed p{color:#9ca3af;text-decoration:line-through}button{color:#fff;cursor:pointer;background-color:#3b82f6;border:none;border-radius:8px;padding:8px 16px;font-size:.9rem;transition:background-color .2s,transform .2s}button:hover{background-color:#2563eb;transform:scale(1.05)}button.delete{background-color:#ef4444;margin-left:10px}button.delete:hover{background-color:#dc2626}form{flex-direction:column;gap:20px;margin-top:20px;display:flex}input[type=text]{background-color:#f9fafb;border:1px solid #d1d5db;border-radius:8px;width:100%;padding:14px;font-size:1rem;transition:border-color .2s}input[type=text]:focus{border-color:#3b82f6;outline:none}button.add-task{background-color:#10b981;border-radius:8px;padding:14px;font-size:1rem}button.add-task:hover{background-color:#059669}.error-message{color:#ef4444;text-align:center;margin-top:20px;font-weight:700}@media (width<=768px){.App{padding:20px}li{flex-direction:column;align-items:flex-start}button{margin-top:10px}}