*{margin:0;padding:0;box-sizing:border-box}body.dark{background-color:#0f172a;color:#e5e7eb}.header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background-color:#f1f1f1}.header button{padding:.5rem 1rem;border-radius:8px;border:1px solid #ccc;cursor:pointer;background-color:#2563eb;color:#fff;font-weight:600;transition:transform .1s ease,background-color .3s ease}.header button:hover{background-color:#1d4ed8}.header button:active{transform:scale(.95)}.task-input{display:flex;justify-content:center;gap:1.4rem;align-items:center;margin-block:2.5rem;flex-wrap:wrap}.task-input input{padding:1rem .8rem;width:60%;max-width:400px;font-size:1.2rem;border-radius:10px;box-shadow:0 4px 8px #0000001a;border:1px solid #ccc;transition:box-shadow .3s ease,border .3s ease}body.dark .task-input input{box-shadow:0 4px 8px #201e25b3;border:1px solid #444;background-color:#1f2937;color:#e5e7eb}.task-btn{padding:.8rem 2rem;font-size:1.2rem;border-radius:50px;cursor:pointer;border:1px solid #ccc;background-color:#2563eb;color:#fff;font-weight:600;transition:transform .1s ease,background-color .3s ease}.task-btn:hover{background-color:#1d4ed8}.task-btn:active{transform:scale(.95)}.task-titles,.task-row{display:grid;grid-template-columns:1fr 3fr 1fr;align-items:center;text-align:center}.task-titles{width:80%;margin:0 auto 10px;font-weight:700;padding:.5rem 0;border-bottom:2px solid #ccc}.task-list{list-style:none;padding:0;margin:0 auto;width:80%}.task-row{padding:10px 0;border-bottom:1px solid #ccc;transition:background-color .3s ease}.task-row button{border-radius:20px;background-color:#ef4444;color:#fff;border:none;padding:.3rem .8rem;cursor:pointer;transition:background-color .3s ease}.task-row button:hover{background-color:#b91c1c}body.dark .task-row{border-color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:#f5f5f5}.nav{display:flex;gap:1.5rem}.nav-link{text-decoration:none;font-weight:600;color:#555;padding-bottom:4px;transition:color .3s ease,border-bottom .3s ease}.nav-link:hover{color:#2563eb}.nav-link.active{color:#2563eb;border-bottom:3px solid #2563eb}body.dark .header{background:#111827}body.dark .nav-link{color:#d1d5db}body.dark .nav-link.active{color:#60a5fa;border-bottom-color:#60a5fa}.stats{text-align:center;margin-block:3rem}.stats h2{padding-bottom:1rem;font-size:2rem}.stats p{padding-bottom:.8rem;font-size:1.2rem}.stats{text-align:center;margin-top:3rem}.stats h2{font-size:2.5rem;margin-bottom:2rem;font-weight:700}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.stat-card{background:#fff;padding:2rem 1.5rem;border-radius:16px;box-shadow:0 10px 20px #0000001a;transition:transform .2s ease,box-shadow .2s ease}.stat-card:hover{transform:translateY(-6px);box-shadow:0 16px 30px #00000026}.stat-card h3{font-size:1.3rem;margin-bottom:1rem;color:#374151}.stat-card p{font-size:3rem;font-weight:800;color:#2563eb}.stat-card.completed p{color:#16a34a}.stat-card.remaining p{color:#dc2626}body.dark .stat-card{background:#1f2937;box-shadow:0 10px 20px #00000080}body.dark .stat-card h3{color:#d1d5db}body.dark .stat-card p{color:#60a5fa}body.dark .stat-card.completed p{color:#22c55e}body.dark .stat-card.remaining p{color:#f87171}@media(max-width:768px){.header{flex-direction:column;gap:1rem;text-align:center}.task-input{flex-direction:column;gap:.8rem}.task-input input{width:90%}.task-titles,.task-row{grid-template-columns:1fr 3fr 1fr;font-size:.9rem}.nav{justify-content:center;gap:1rem}.stats-grid{grid-template-columns:1fr}.stat-card p{font-size:2.5rem}.stats h2{font-size:2rem}}@media(max-width:480px){.task-titles,.task-row{grid-template-columns:1fr 2fr 1fr;font-size:.8rem}.task-btn{font-size:1rem;padding:.5rem 1.2rem}}