@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--bg-color: #0f172a;--card-bg: #1e293b;--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent: #6366f1;--accent-hover: #4f46e5;--danger: #ef4444;--danger-hover: #dc2626;--border: #334155;--success: #10b981}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background-color:var(--bg-color);color:var(--text-primary);line-height:1.5;min-height:100vh}.app-container{max-width:800px;margin:0 auto;padding:2rem;display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1}.header{text-align:center;margin-bottom:3rem;padding-top:2rem}.header h1{font-size:3rem;font-weight:700;background:linear-gradient(to right,#818cf8,#c084fc);-webkit-background-clip:text;color:transparent;margin-bottom:.5rem}.header p{color:var(--text-secondary);font-size:1.1rem}.task-form{display:flex;gap:1rem;margin-bottom:2.5rem;background:var(--card-bg);padding:1.5rem;border-radius:1rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;border:1px solid var(--border);flex-wrap:wrap}.input-title,.input-desc{background:var(--bg-color);border:1px solid var(--border);color:var(--text-primary);padding:.75rem 1rem;border-radius:.5rem;outline:none;font-family:inherit;font-size:1rem;transition:border-color .2s}.input-title{flex:2;min-width:200px}.input-desc{flex:3;min-width:200px}.input-title:focus,.input-desc:focus{border-color:var(--accent)}.add-btn{background:var(--accent);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:.5rem;font-weight:600;cursor:pointer;transition:background-color .2s,transform .1s;flex:1;min-width:120px}.add-btn:hover{background:var(--accent-hover)}.add-btn:active{transform:translateY(2px)}.task-list{display:flex;flex-direction:column;gap:1rem}.loading,.empty-state{text-align:center;color:var(--text-secondary);padding:3rem;background:var(--card-bg);border-radius:1rem;border:1px dashed var(--border)}.task-item{display:flex;justify-content:space-between;align-items:center;background:var(--card-bg);padding:1rem 1.5rem;border-radius:1rem;border:1px solid var(--border);transition:all .2s ease}.task-item:hover{border-color:#475569;transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000001a}.task-item.completed{opacity:.7}.task-content{display:flex;align-items:flex-start;gap:1rem;flex:1;cursor:pointer}.checkbox{width:24px;height:24px;border-radius:50%;border:2px solid var(--border);margin-top:2px;flex-shrink:0;transition:all .2s;display:flex;align-items:center;justify-content:center}.task-item:hover .checkbox:not(.checked){border-color:var(--accent)}.checkbox.checked{background-color:var(--success);border-color:var(--success)}.checkbox.checked:after{content:"";width:6px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-1px)}.task-text h3{font-size:1.1rem;font-weight:500;margin-bottom:.25rem;transition:color .2s}.task-item.completed .task-text h3{text-decoration:line-through;color:var(--text-secondary)}.task-text p{color:var(--text-secondary);font-size:.9rem;word-break:break-word}.delete-btn{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem;border-radius:.5rem;transition:all .2s;display:flex;align-items:center;justify-content:center}.delete-btn:hover{background:#ef44441a;color:var(--danger)}.footer{text-align:center;margin-top:2rem;padding-top:2rem;color:var(--text-secondary);font-size:.9rem;border-top:1px solid var(--border)}