@import"https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap";:root{--pink-50: #fdf2f8;--pink-100: #fce7f3;--pink-200: #fbcfe8;--pink-300: #f9a8d4;--pink-400: #f472b6;--pink-500: #ec4899;--purple-100: #f3e8ff;--purple-200: #e9d5ff;--lavender: #ede9fe;--peach: #fff1f2;--mint: #f0fdf4;--white: #ffffff;--gray-50: #fafafa;--gray-100: #f4f4f5;--gray-200: #e4e4e7;--gray-300: #d4d4d8;--gray-400: #a1a1aa;--gray-500: #71717a;--gray-700: #3f3f46;--shadow-sm: 0 1px 2px rgba(0,0,0,.04);--shadow-md: 0 4px 12px rgba(244,114,182,.12);--shadow-lg: 0 8px 30px rgba(244,114,182,.18);--radius: 16px;--radius-sm: 10px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh}body{font-family:Nunito,ui-sans-serif,system-ui,-apple-system,sans-serif;background:linear-gradient(135deg,#fdf2f8,#f3e8ff,#ede9fe);color:var(--gray-700);line-height:1.6}.app{min-height:100vh;display:flex;justify-content:center;padding:2rem 1rem}.container{width:100%;max-width:540px;margin-top:2rem}.header{text-align:center;margin-bottom:1.75rem}.header h1{font-size:2rem;font-weight:800;background:linear-gradient(135deg,var(--pink-400),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.subtitle{font-size:.9rem;color:var(--gray-400);margin-top:.25rem}.input-bar{display:flex;gap:.5rem;margin-bottom:1rem}.todo-input{flex:1;padding:.75rem 1rem;border:2px solid var(--pink-200);border-radius:var(--radius-sm);font-family:inherit;font-size:.95rem;background:var(--white);color:var(--gray-700);outline:none;transition:border-color .2s,box-shadow .2s}.todo-input:focus{border-color:var(--pink-400);box-shadow:0 0 0 3px #f472b626}.todo-input::placeholder{color:var(--gray-300)}.tag-select{padding:.75rem .5rem;border:2px solid var(--pink-200);border-radius:var(--radius-sm);font-family:inherit;font-size:.85rem;background:var(--white);color:var(--gray-500);outline:none;cursor:pointer;transition:border-color .2s;min-width:90px}.tag-select:focus{border-color:var(--pink-400)}.add-btn{width:46px;height:46px;border:none;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--pink-400),#a78bfa);color:var(--white);font-size:1.4rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,box-shadow .2s;flex-shrink:0}.add-btn:hover{transform:scale(1.05);box-shadow:var(--shadow-md)}.add-btn:active{transform:scale(.95)}.filters{display:flex;gap:.5rem;margin-bottom:1rem}.filter-btn{flex:1;padding:.5rem .75rem;border:2px solid var(--pink-100);border-radius:var(--radius-sm);background:var(--white);font-family:inherit;font-size:.82rem;font-weight:600;color:var(--gray-400);cursor:pointer;transition:all .2s}.filter-btn:hover{border-color:var(--pink-200);color:var(--gray-500)}.filter-btn.active{background:var(--pink-50);border-color:var(--pink-300);color:var(--pink-500)}.todo-list{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.todo-item{display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;background:var(--white);border:2px solid var(--pink-100);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);transition:transform .2s,opacity .3s,box-shadow .2s;animation:slideIn .25s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.todo-item:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.todo-item.completed{opacity:.55}.todo-item.completed .todo-title{text-decoration:line-through;color:var(--gray-400)}.checkbox-label{position:relative;display:flex;align-items:center;cursor:pointer;flex-shrink:0}.checkbox-label input{position:absolute;opacity:0;width:0;height:0}.custom-checkbox{width:22px;height:22px;border:2px solid var(--pink-200);border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s}.custom-checkbox:after{content:"";width:6px;height:10px;border:solid var(--white);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .15s;margin-top:-2px}.checkbox-label input:checked+.custom-checkbox{background:linear-gradient(135deg,var(--pink-400),#a78bfa);border-color:transparent}.checkbox-label input:checked+.custom-checkbox:after{transform:rotate(45deg) scale(1)}.todo-title{flex:1;font-size:.95rem;color:var(--gray-700);cursor:default;-webkit-user-select:none;user-select:none;min-width:0;word-break:break-word}.edit-input{flex:1;padding:.3rem .5rem;border:2px solid var(--pink-300);border-radius:6px;font-family:inherit;font-size:.95rem;color:var(--gray-700);outline:none;background:var(--pink-50)}.todo-tag{font-size:.7rem;font-weight:700;color:var(--white);padding:.15rem .55rem;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0}.todo-actions{display:flex;gap:.25rem;opacity:0;transition:opacity .2s;flex-shrink:0}.todo-item:hover .todo-actions{opacity:1}.action-btn{width:28px;height:28px;border:none;border-radius:6px;background:transparent;font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}.edit-btn{color:var(--gray-400)}.edit-btn:hover{background:var(--lavender);color:#7c3aed}.delete-btn{color:var(--gray-400)}.delete-btn:hover{background:#fee2e2;color:#ef4444}.empty-state{text-align:center;padding:2rem;color:var(--gray-300);font-size:.9rem;font-style:italic}.clear-btn{width:100%;padding:.6rem;border:2px dashed var(--pink-200);border-radius:var(--radius-sm);background:transparent;font-family:inherit;font-size:.85rem;font-weight:600;color:var(--pink-400);cursor:pointer;transition:all .2s;margin-bottom:1rem}.clear-btn:hover{background:var(--pink-50);border-color:var(--pink-300)}.footer{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--gray-400);padding-top:.5rem}.hint{font-style:italic;font-size:.75rem;color:var(--gray-300)}@media(max-width:500px){.app{padding:1rem .5rem}.container{margin-top:1rem}.header h1{font-size:1.6rem}.input-bar{flex-wrap:wrap}.todo-input{flex:1 1 100%;min-width:0}.tag-select{flex:1}.add-btn{flex:0 0 46px}.filters{flex-wrap:wrap}.filter-btn{flex:1;min-width:80px}.todo-actions{opacity:1}.footer{flex-direction:column;gap:.25rem;text-align:center}}