body{margin:0;padding:0;font-family:sans-serif;-webkit-font-smoothing:auto;-moz-font-smoothing:auto;-moz-osx-font-smoothing:grayscale;font-smoothing:auto;text-rendering:optimizeLegibility;font-smooth:always;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}h1{font-size:1.5rem}.todo-card{width:100%;max-width:none;margin:0;background:white;border-radius:0;box-shadow:none;overflow-y:auto;border:none;height:100vh;max-height:100vh}.header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.todo-title{font-size:2rem;font-weight:700;text-align:center;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0;flex:1}.sync-indicator{flex-shrink:0}.sync-status{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:20px;font-size:.875rem;font-weight:500;background:white;border:1px solid #e5e7eb;box-shadow:0 2px 4px #0000000d}.sync-status.syncing{background:#dbeafe;border-color:#3b82f6;color:#1e40af}.sync-status.success{background:#dcfce7;border-color:#10b981;color:#047857}.sync-status.error{background:#fef2f2;border-color:#ef4444;color:#dc2626}.sync-status.online{background:#f0f9ff;border-color:#0ea5e9;color:#0369a1}.sync-status.offline{background:#f3f4f6;border-color:#6b7280;color:#374151}.sync-icon{width:1rem;height:1rem;flex-shrink:0}.todo-container{display:flex;flex-direction:column;gap:1rem;padding:2rem 2rem .5rem}.add-todo-container{display:flex;gap:.5rem;align-items:center}.content-input{flex:1}.deadline-input{flex:.6}.category-select{flex:.3}.select-content{background-color:#fff;z-index:1000}.button-icon{width:1rem;height:1rem;margin-right:.25rem;flex-shrink:0}.toolbar-button .button-icon{filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))}.todo-list{display:flex;flex-direction:column;gap:.5rem}.todo-item{display:flex;align-items:center;gap:.5rem;padding:.75rem;border:1px solid #e5e7eb;border-radius:.5rem;background-color:#fff}.todo-item.completed{background-color:#f9fafb}.editing-container{display:flex;gap:.5rem;width:100%;align-items:center}.edit-input{flex:1}.edit-deadline{flex:.6}.edit-category{flex:.3}.todo-content{display:flex;width:100%;align-items:center;gap:.5rem}.checkbox{width:1.25rem;height:1.25rem;cursor:pointer;color:#9ca3af}.checkbox.checked{color:#10b981}.todo-text{flex:1}.completed-text{text-decoration:line-through;color:#6b7280}.deadline-tooltip{position:relative;display:inline-block;z-index:10}.deadline-tooltip:hover:after{content:attr(data-tooltip);position:fixed;bottom:auto;top:auto;left:50%;transform:translate(-50%,-120%);padding:8px 12px;background-color:#1f2937;color:#fff;border-radius:6px;font-size:.875rem;white-space:nowrap;z-index:9999;min-width:max-content;box-shadow:0 4px 12px #0003;pointer-events:none}.deadline-tooltip:hover:before{content:"";position:fixed;bottom:auto;top:auto;left:50%;transform:translate(-50%,-105%);border-width:5px;border-style:solid;border-color:#1f2937 transparent transparent transparent;z-index:9998;pointer-events:none}.deadline{display:flex;align-items:center;gap:.25rem;color:#6b7280;min-width:12rem;font-size:.875rem}.deadline-passed{color:#ef4444;font-weight:500}.calendar-icon{width:1rem;height:1rem;flex-shrink:0}.category-tag{width:4rem;padding-top:.25rem None .25rem None;font-size:.875rem;border-radius:9999px;background-color:#f3f4f6;text-align:center}.action-button{padding:.5rem}.alert-content{background-color:#fff}.delete-button{background-color:#ef4444;color:#fff}.delete-button:hover{background-color:#dc2626}.filter-container{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.75rem;border:1px solid #e5e7eb;border-radius:.5rem;background-color:#f9fafb}.filter-container label{font-weight:500;color:#374151}.filter-select{min-width:150px}.category-container{display:flex;gap:.25rem;align-items:center;flex:.3}.add-category-button{padding:.5rem;min-width:2rem}.add-category-form{display:flex;gap:.5rem;align-items:center;padding:.5rem;border:1px solid #e5e7eb;border-radius:.5rem;background-color:#f9fafb}.category-input{flex:1}.add-category-confirm,.add-category-cancel{padding:.5rem 1rem}.manage-categories-button{white-space:nowrap}.category-management{border:1px solid #e5e7eb;border-radius:.5rem;padding:1rem;background-color:#f9fafb;margin-bottom:1rem}.category-management h3{margin:0 0 1rem;font-size:1.125rem;font-weight:600;color:#374151}.category-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.category-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem;background-color:#fff}.category-name{font-weight:500;flex:1}.category-count{color:#6b7280;font-size:.875rem}.delete-category-button{padding:.25rem;min-width:2rem}.delete-category-button:disabled{opacity:.5;cursor:not-allowed}.category-management{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 2px 8px #0000000a}.category-management-header{text-align:center;margin-bottom:1.5rem;color:#1e293b}.category-management-header h3{margin:0 0 .25rem;font-size:1.25rem;font-weight:600}.category-management-header p{margin:0;opacity:.7;font-size:.875rem}.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.category-card{background:white;border:1px solid #e2e8f0;border-radius:8px;padding:1rem;box-shadow:0 1px 4px #0000000d;transition:all .2s ease;position:relative;overflow:hidden}.category-card:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000014;border-color:#cbd5e1}.category-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:#64748b}.category-info{margin-bottom:1rem}.category-name{font-size:1.25rem;font-weight:600;color:#1f2937;margin:0 0 .5rem}.category-stats{color:#6b7280;font-size:.9rem;background:#f3f4f6;padding:.25rem .75rem;border-radius:20px;display:inline-block}.category-actions{display:flex;gap:.5rem;justify-content:flex-end}.category-edit-button,.category-delete-button{width:44px;height:44px;border-radius:8px;transition:all .2s ease}.category-edit-button:hover{background-color:#dbeafe;color:#2563eb}.category-delete-button:hover:not(:disabled){background-color:#fef2f2;color:#dc2626}.category-delete-button:disabled{opacity:.4;cursor:not-allowed}.category-edit-form{display:flex;flex-direction:column;gap:1rem}.category-edit-input{font-size:1.1rem;font-weight:500;border:2px solid #e5e7eb;border-radius:8px;padding:.75rem;transition:border-color .2s ease}.category-edit-input:focus{border-color:#667eea;outline:none}.category-edit-actions{display:flex;gap:.5rem;justify-content:center}.category-save-button{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;width:40px;height:40px;border-radius:8px}.category-save-button:hover{background:linear-gradient(135deg,#059669,#047857)}.category-cancel-button{width:40px;height:40px;border-radius:8px}.add-category-card{background:rgba(255,255,255,.9);border:2px dashed #d1d5db;border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:140px;transition:all .3s ease}.add-category-card:hover{border-color:#667eea;background:white;transform:translateY(-2px)}.add-category-card.editing{border-style:solid;border-color:#667eea;background:white;gap:1rem}.add-category-trigger{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:#6b7280;transition:color .2s ease;background:none;border:none;width:100%;height:100%}.add-category-trigger:hover{color:#667eea}.add-category-icon{width:2rem;height:2rem}.new-category-input{width:100%;font-size:1.1rem;border:2px solid #e5e7eb;border-radius:8px;padding:.75rem;transition:border-color .2s ease}.new-category-input:focus{border-color:#667eea;outline:none}.add-category-actions{display:flex;gap:.5rem;justify-content:center}.clear-completed-container{display:flex;gap:.75rem;align-items:center;margin-bottom:1.5rem;padding:1rem;background:#fefce8;border:1px solid #fef3c7;border-radius:8px;box-shadow:0 2px 4px #0000000d}.clear-date-input{flex:1;max-width:220px;border:none;border-radius:8px;padding:.75rem;font-size:.95rem;box-shadow:0 2px 4px #0000001a}.clear-button{white-space:nowrap;background:#eab308;color:#fff;border:1px solid #eab308;border-radius:8px;padding:.75rem 1rem;font-weight:500;transition:all .2s ease}.clear-button:hover{background:#ca8a04;transform:translateY(-1px)}.toolbar-container{display:flex;gap:.75rem;align-items:center;padding:1rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;margin-bottom:1rem;box-shadow:0 2px 4px #0000000d;flex-wrap:nowrap;justify-content:flex-start}.toolbar-select{min-width:160px;background:white;border:1px solid #d1d5db;flex:1;order:1;font-size:.95rem}.toolbar-button{white-space:nowrap;background:white;color:#374151;border:1px solid #d1d5db;border-radius:8px;padding:.625rem 1rem;font-size:.95rem;font-weight:500;transition:all .2s ease;display:flex;align-items:center;gap:.5rem;justify-content:center;min-width:130px;flex:0 0 auto;cursor:pointer}.toolbar-button:not(.add-button){order:2}.toolbar-button.add-button{order:3}.toolbar-button:hover{background:#f9fafb;border-color:#9ca3af;transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.toolbar-button:not(.add-button){background:white;color:#374151;border:1px solid #d1d5db}.toolbar-button:not(.add-button):hover{background:#f9fafb;border-color:#9ca3af;transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.toolbar-button.add-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none}.toolbar-button.add-button:hover{background:linear-gradient(135deg,#5a67d8,#6b46c1);transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.toolbar-button:focus{outline:2px solid rgba(102,126,234,.5);outline-offset:2px}.toolbar-button.add-button:focus{outline:2px solid rgba(102,126,234,.5);outline-offset:2px}.toolbar-button:active,.toolbar-button.add-button:active{transform:translateY(0)}.dropdown-panel{margin-bottom:1rem;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.filter-container{background:#f1f5f9;border:1px solid #e2e8f0;padding:1rem;border-radius:8px;margin-bottom:1.5rem;box-shadow:0 2px 4px #0000000d}.filter-container label{font-weight:600;color:#1e293b;margin-right:.75rem}.manage-categories-button{background:white;color:#475569;border:1px solid #cbd5e1;border-radius:8px;transition:all .2s ease}.manage-categories-button:hover{background:#f8fafc;border-color:#94a3b8;transform:translateY(-1px)}.todo-item{background:white;border-radius:12px;border:1px solid #e5e7eb;box-shadow:0 2px 8px #0000000d;transition:all .3s ease;overflow:visible;position:relative}.todo-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(135deg,#10b981,#059669);opacity:0;transition:opacity .3s ease}.todo-item:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a}.todo-item:hover:before{opacity:1}.todo-item.completed{background:#f8fafc;opacity:.8}.todo-item.completed:before{background:#94a3b8;opacity:.5}.category-tag{background:#f1f5f9;color:#475569;padding:.5rem 1rem;border-radius:12px;font-size:.875rem;font-weight:500;text-align:center;min-width:8rem;max-width:12rem;width:auto;border:1px solid #e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-button{border-radius:8px;width:40px;height:40px;transition:all .2s ease}.action-button .button-icon,.action-button svg{width:1.5rem!important;height:1.5rem!important;min-width:1.5rem!important;min-height:1.5rem!important}.action-button:hover{transform:translateY(-1px)}.add-todo-container{background:white;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 4px 12px #0000000d;border:1px solid #e5e7eb}.add-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;padding:.75rem 1.25rem;font-weight:500;transition:all .2s ease}.add-button:hover{background:linear-gradient(135deg,#5a67d8,#6b46c1);transform:translateY(-1px)}.settings-container{background:white;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;border:1px solid #e5e7eb}.settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #e5e7eb}.settings-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#1f2937}.settings-tabs{display:flex;gap:.5rem;background:#f8fafc;padding:.25rem;border-radius:8px;border:1px solid #e2e8f0}.settings-tab{padding:.5rem .75rem;font-size:.875rem;font-weight:500;border-radius:6px;transition:all .2s ease;border:none;background:transparent;color:#6b7280}.settings-tab[data-state=active],.settings-tab:not([data-state]):hover{background:white;color:#1f2937;box-shadow:0 2px 4px #0000001a}.settings-tab .button-icon{width:1rem;height:1rem;margin-right:.5rem}.clear-controls{display:flex;gap:1rem;align-items:center;margin-top:1rem}.clear-controls .clear-date-input{flex:1;max-width:200px}.clear-controls .clear-button{flex-shrink:0}.sync-container{background:white;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 4px 12px #0000000d;border:1px solid #e5e7eb}.sync-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #e5e7eb}.sync-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#1f2937}.sync-status{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500}.sync-connected{display:flex;flex-direction:column;gap:1rem}.sync-info{padding:1rem;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0}.sync-info p{margin:.25rem 0;font-size:.95rem;color:#374151}.sync-actions{display:flex;gap:.75rem;align-items:center}.sync-button{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:8px;padding:.75rem 1.25rem;font-weight:500;transition:all .2s ease;display:flex;align-items:center;gap:.5rem}.sync-button:hover:not(:disabled){background:linear-gradient(135deg,#059669,#047857);transform:translateY(-1px)}.sync-button:disabled{opacity:.6;cursor:not-allowed}.disconnect-button{background:white;color:#ef4444;border:1px solid #fca5a5;border-radius:8px;padding:.75rem 1rem;font-weight:500;transition:all .2s ease}.disconnect-button:hover{background:#fef2f2;border-color:#ef4444;transform:translateY(-1px)}.sync-error{padding:.75rem;background:#fef2f2;border:1px solid #fca5a5;border-radius:8px;margin-top:.5rem}.sync-setup{display:flex;flex-direction:column;gap:1.5rem}.sync-setup-intro{text-align:center;padding:2rem;background:#f8fafc;border-radius:8px;border:2px dashed #cbd5e1}.sync-setup-intro p{margin:0 0 1rem;color:#6b7280;font-size:1rem}.setup-sync-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;padding:.75rem 1.5rem;font-weight:500;font-size:1rem;transition:all .2s ease}.setup-sync-button:hover{background:linear-gradient(135deg,#5a67d8,#6b46c1);transform:translateY(-1px)}.sync-setup-form{display:flex;flex-direction:column;gap:1.5rem}.api-key-section{display:flex;flex-direction:column;gap:.5rem}.api-key-input{font-size:1rem;padding:.75rem;border:1px solid #d1d5db;border-radius:8px;transition:border-color .2s ease}.api-key-input:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 3px #667eea1a}.sync-options{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;padding:1rem;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0}.create-sync,.connect-sync{display:flex;flex-direction:column;gap:.75rem;align-items:center;text-align:center}.create-sync-button{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:8px;padding:.75rem 1rem;font-weight:500;transition:all .2s ease;width:100%}.create-sync-button:hover:not(:disabled){background:linear-gradient(135deg,#059669,#047857);transform:translateY(-1px)}.create-sync-button:disabled{opacity:.6;cursor:not-allowed}.sync-code-input{font-size:1.1rem;font-weight:600;text-align:center;letter-spacing:.1em;padding:.75rem;border:1px solid #d1d5db;border-radius:8px;width:100%;text-transform:uppercase}.sync-code-input:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 3px #667eea1a}.connect-sync-button{background:white;color:#667eea;border:1px solid #667eea;border-radius:8px;padding:.75rem 1rem;font-weight:500;transition:all .2s ease;width:100%}.connect-sync-button:hover:not(:disabled){background:#f0f4ff;transform:translateY(-1px)}.connect-sync-button:disabled{opacity:.6;cursor:not-allowed}.cancel-setup-button{background:none;color:#6b7280;border:none;padding:.75rem;font-weight:500;transition:color .2s ease;align-self:center}.cancel-setup-button:hover{color:#374151}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 1200px){.todo-card{max-width:64rem}.toolbar-container{gap:.75rem;justify-content:flex-start}.toolbar-select{flex:1;min-width:150px}.toolbar-button{padding:.5rem .75rem;font-size:.9rem;min-width:120px;flex:0 0 auto}.button-icon{width:.9rem;height:.9rem}}@media (max-width: 968px){.todo-card{max-width:56rem}.toolbar-container{flex-wrap:nowrap;justify-content:flex-start;gap:.5rem}.toolbar-select{flex:1;min-width:140px}.toolbar-button{flex:0 0 auto;min-width:110px;padding:.5rem .75rem;font-size:.85rem}}@media (min-width: 1400px){.toolbar-container{justify-content:flex-start}.toolbar-select{flex:1;min-width:180px}}@media (max-width: 820px) and (min-width: 769px){.toolbar-container{justify-content:flex-start;gap:.5rem;flex-wrap:nowrap}.toolbar-select{flex:1;min-width:150px}.toolbar-button{flex:0 0 auto;min-width:120px;padding:.5rem .75rem;font-size:.9rem}}@media (max-width: 768px){.todo-card{width:calc(100vw - 2rem);margin:1rem;height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.header-container{flex-direction:column;gap:1rem;align-items:center;padding:1rem 0}.todo-title{text-align:center;font-size:1.75rem;margin-bottom:.5rem}.toolbar-container{flex-direction:column;gap:1rem;width:100%}.toolbar-select{width:100%;font-size:1rem;padding:.75rem;height:48px}.toolbar-button{width:100%;font-size:1rem;padding:.75rem 1rem;height:48px;justify-content:center;min-height:44px}.toolbar-button .button-icon{width:1rem;height:1rem;margin-right:.5rem}.todo-item{padding:1rem;margin-bottom:.75rem}.todo-content{font-size:1rem;line-height:1.4}.todo-actions{gap:.5rem;margin-top:.75rem}.todo-actions button{padding:.5rem;min-width:44px;min-height:44px}.category-tag{font-size:.875rem;padding:.5rem .75rem}.sync-options{grid-template-columns:1fr;gap:1rem}.sync-actions{flex-direction:column;align-items:stretch;gap:.75rem}.sync-header{flex-direction:column;align-items:flex-start;gap:.5rem}}@media (max-width: 480px){.todo-card{width:calc(100vw - 1rem);margin:.5rem;height:calc(100vh - 1rem);max-height:calc(100vh - 1rem)}.header-container{padding:.75rem 0}.todo-title{font-size:1.5rem}.toolbar-container{gap:.75rem}.toolbar-select{height:44px;padding:.625rem;font-size:.95rem}.toolbar-button{height:44px;padding:.625rem .75rem;font-size:.95rem}.todo-item{padding:.75rem;display:block}.todo-content{display:block}.checkbox{float:left;margin-right:.5rem}.todo-text{display:inline}.category-tag{display:inline-block;margin-left:.5rem;font-size:.8rem;padding:.25rem .5rem}.deadline{display:block;margin-top:.5rem;font-size:.85rem;clear:left}.action-button{float:right;margin-left:.25rem;margin-top:.5rem;padding:.4rem;min-width:36px;min-height:36px}}[data-sonner-toast]{background:rgba(255,255,255,.98)!important;backdrop-filter:blur(16px)!important;border:1px solid rgba(0,0,0,.15)!important;box-shadow:0 10px 40px #0003!important;color:#1f2937!important;font-weight:500!important}[data-sonner-toast][data-type=success]{background:rgba(34,197,94,.95)!important;color:#fff!important;border:1px solid rgba(34,197,94,.4)!important;box-shadow:0 10px 40px #22c55e40!important}[data-sonner-toast][data-type=error]{background:rgba(239,68,68,.95)!important;color:#fff!important;border:1px solid rgba(239,68,68,.4)!important;box-shadow:0 10px 40px #ef444440!important}[data-sonner-toast][data-type=warning]{background:rgba(245,158,11,.95)!important;color:#fff!important;border:1px solid rgba(245,158,11,.4)!important;box-shadow:0 10px 40px #f59e0b40!important}[data-sonner-toast][data-type=info]{background:rgba(59,130,246,.95)!important;color:#fff!important;border:1px solid rgba(59,130,246,.4)!important;box-shadow:0 10px 40px #3b82f640!important}[data-sonner-toast] [data-title]{font-weight:600!important;font-size:15px!important;line-height:1.4!important;margin-bottom:4px!important}[data-sonner-toast] [data-description]{font-size:14px!important;opacity:.95!important;line-height:1.4!important}.toast,.notification{background:rgba(255,255,255,.98)!important;backdrop-filter:blur(16px)!important;border:1px solid rgba(0,0,0,.15)!important;box-shadow:0 10px 40px #0003!important;color:#1f2937!important;font-weight:500!important;padding:16px!important;border-radius:12px!important}.toast.success,.notification.success{background:rgba(34,197,94,.95)!important;color:#fff!important;border:1px solid rgba(34,197,94,.4)!important}.toast.error,.notification.error{background:rgba(239,68,68,.95)!important;color:#fff!important;border:1px solid rgba(239,68,68,.4)!important}.toast.warning,.notification.warning{background:rgba(245,158,11,.95)!important;color:#fff!important;border:1px solid rgba(245,158,11,.4)!important}[data-sonner-toast] *{color:inherit!important}[data-sonner-toaster]{z-index:9999!important}[data-sonner-toast]:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:inherit;border-radius:inherit;z-index:-1}