.app{max-width:620px;margin:0 auto;padding:2rem 1rem 4rem;min-height:100vh}.header{text-align:center;margin-bottom:2rem}.header-top{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:.5rem}.header h1{font-size:2rem;font-weight:800;background:linear-gradient(135deg,#818cf8,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:#64748b;font-size:.9rem}.status-badge{font-size:.75rem;padding:.25rem .625rem;border-radius:999px;font-weight:600;letter-spacing:.02em}.status-badge.online{background:#22c55e26;color:#22c55e;border:1px solid rgba(34,197,94,.3)}.status-badge.offline{background:#ef444426;color:#ef4444;border:1px solid rgba(239,68,68,.3)}.input-section{display:flex;gap:.625rem;margin-bottom:1rem}.input-section input{flex:1;padding:.8rem 1rem;background:#1a1a3e;border:1.5px solid #2d2d5a;border-radius:10px;color:#e2e8f0;font-size:1rem;outline:none;transition:border-color .2s}.input-section input:focus{border-color:#6366f1}.input-section input::placeholder{color:#3d3d6b}.input-section button{padding:.8rem 1.4rem;background:#6366f1;color:#fff;border:none;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;transition:background .2s,opacity .2s;white-space:nowrap}.input-section button:hover:not(:disabled){background:#4f46e5}.input-section button:disabled{opacity:.4;cursor:not-allowed}.filters{display:flex;gap:.5rem;margin-bottom:1.25rem}.filters button{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.55rem .5rem;background:#1a1a3e;color:#64748b;border:1.5px solid #2d2d5a;border-radius:8px;cursor:pointer;font-size:.85rem;font-weight:500;transition:all .2s}.filters button:hover:not(.active){border-color:#6366f1;color:#c7d2fe}.filters button.active{background:#6366f1;color:#fff;border-color:#6366f1}.filter-count{background:#ffffff26;border-radius:999px;padding:0 .4rem;font-size:.75rem;min-width:1.2rem;text-align:center}.filters button.active .filter-count{background:#ffffff40}.task-list{list-style:none;display:flex;flex-direction:column;gap:.5rem}.task-list li{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;background:#1a1a3e;border:1.5px solid #2d2d5a;border-radius:10px;transition:border-color .2s,background .2s;animation:slideIn .2s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.task-list li:hover:not(.empty-state){border-color:#4f46e5;background:#1e1e48}.task-list li.completed{opacity:.6}.task-list li.completed .task-title{text-decoration:line-through;color:#475569}.empty-state{justify-content:center;flex-direction:column;gap:.5rem!important;padding:2.5rem 1rem!important;border-style:dashed!important;color:#3d3d6b;text-align:center}.empty-icon{font-size:2rem;display:block}.task-list li input[type=checkbox]{width:18px;height:18px;accent-color:#6366f1;cursor:pointer;flex-shrink:0}.task-title{flex:1;font-size:.95rem;line-height:1.4;word-break:break-word}.delete-btn{background:none;border:none;color:#3d3d6b;cursor:pointer;font-size:.95rem;padding:.3rem .4rem;border-radius:6px;flex-shrink:0;transition:color .2s,background .2s;line-height:1}.delete-btn:hover{color:#ef4444;background:#ef44441a}.footer-actions{margin-top:1rem;text-align:right}.clear-btn{background:none;border:1px solid #2d2d5a;color:#64748b;padding:.4rem .875rem;border-radius:6px;cursor:pointer;font-size:.8rem;transition:all .2s}.clear-btn:hover{border-color:#ef4444;color:#ef4444}.app-footer{margin-top:3rem;text-align:center;color:#3d3d6b;font-size:.75rem}@media (max-width: 480px){.app{padding:1.5rem .75rem 4rem}.header h1{font-size:1.6rem}.input-section{flex-direction:column}.input-section button{padding:.8rem}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;background-color:#0f0f23;color:#e2e8f0;min-height:100vh;-webkit-font-smoothing:antialiased}