@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap);:root{--color-primary:#667eea;--color-primary-dark:#5568d3;--color-secondary:#764ba2;--color-secondary-dark:#6a3f8f;--color-bg-gradient-start:#667eea;--color-bg-gradient-end:#764ba2;--color-bg-white:#fff;--color-bg-white-transparent:#fffffff2;--color-bg-light:#f7fafc;--color-bg-light-gray:#f1f1f1;--color-text-primary:#2d3748;--color-text-secondary:#718096;--color-text-tertiary:#a0aec0;--color-text-white:#fff;--color-border-light:#e2e8f0;--color-border-medium:#cbd5e0;--color-border-primary:#667eea;--color-success:#22c55e;--color-success-dark:#16a34a;--color-warning:#eab308;--color-warning-dark:#ca8a04;--color-error:#ef4444;--color-error-dark:#dc2626;--color-error-light:#fee;--color-error-border:#feb2b2;--color-priority-low:#22c55e1a;--color-priority-medium:#eab3081a;--color-priority-high:#ef44441a;--color-info:#3b82f6;--color-info-dark:#2563eb;--spacing-xs:6px;--spacing-sm:8px;--spacing-md:12px;--spacing-lg:16px;--spacing-xl:20px;--spacing-2xl:30px;--spacing-3xl:40px;--spacing-4xl:60px;--gap-xs:8px;--gap-sm:12px;--gap-md:16px;--gap-lg:20px;--gap-xl:30px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:20px;--radius-round:50%;--font-xs:10px;--font-sm:12px;--font-md:14px;--font-base:15px;--font-lg:16px;--font-xl:18px;--font-2xl:20px;--font-3xl:24px;--font-4xl:28px;--font-title:2.5rem;--font-title-md:2rem;--font-title-sm:1.75rem;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--shadow-sm:0 2px 4px #0000001a;--shadow-md:0 4px 12px #667eea26;--shadow-lg:0 8px 25px #667eea80;--shadow-xl:0 20px 60px #0000004d;--shadow-btn:0 4px 15px #667eea66;--shadow-error:0 4px 12px #ef44444d;--shadow-focus-sm:0 0 0 3px #667eea1a;--shadow-focus-md:0 0 0 3px #667eea33;--transition-fast:0.2s ease;--transition-base:0.3s ease;--transition-slow:0.4s ease;--transition-very-slow:0.5s ease;--container-max-width:650px;--container-height:85vh;--input-height:50px;--input-height-sm:45px;--button-height:50px;--icon-sm:16px;--icon-md:18px;--icon-lg:20px;--icon-xl:64px;--checkbox-size:24px;--todo-container-min-height:300px;--todo-container-min-height-md:250px;--todo-container-min-height-sm:200px;--spinner-size:50px;--spinner-size-md:40px;--spinner-size-sm:35px;--spinner-border:4px;--spinner-border-sm:3px;--z-dropdown:100;--z-modal:1000;--z-tooltip:1100;--animation-duration-fast:0.3s;--animation-duration-base:0.5s;--animation-duration-slow:1s;--animation-duration-very-slow:2s;--breakpoint-sm:480px;--breakpoint-md:768px;--breakpoint-lg:1024px;--opacity-disabled:0.5;--opacity-checked:0.6;--opacity-low:0.7}*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#667eea,#764ba2);background:linear-gradient(135deg,var(--color-bg-gradient-start) 0,var(--color-bg-gradient-end) 100%);font-family:Poppins,sans-serif;min-height:100vh;padding:20px;padding:var(--spacing-xl)}.container,body{align-items:center;display:flex;justify-content:center}.container{max-width:650px;max-width:var(--container-max-width);width:100%}.form-control{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;background:var(--color-bg-white-transparent);border-radius:20px;border-radius:var(--radius-xl);box-shadow:0 20px 60px #0000004d;box-shadow:var(--shadow-xl);display:flex;flex-direction:column;gap:30px;gap:var(--gap-xl);max-height:85vh;max-height:var(--container-height);overflow-y:auto;padding:40px;padding:var(--spacing-3xl);width:100%}.form-control::-webkit-scrollbar{width:8px;width:var(--spacing-sm)}.form-control::-webkit-scrollbar-track{background:#f1f1f1;background:var(--color-bg-light-gray);border-radius:12px;border-radius:var(--radius-lg)}.form-control::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);background:linear-gradient(135deg,var(--color-primary) 0,var(--color-secondary) 100%);border-radius:12px;border-radius:var(--radius-lg)}.text{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);background:linear-gradient(135deg,var(--color-primary) 0,var(--color-secondary) 100%);-webkit-background-clip:text;background-clip:text;font-size:2.5rem;font-size:var(--font-title);font-weight:700;font-weight:var(--font-weight-bold);letter-spacing:-.5px;margin:0;text-align:center}.form{width:100%}.input-form{display:flex;flex-wrap:wrap;gap:12px;gap:var(--gap-sm);width:100%}.input-task{background:#fff;background:var(--color-bg-white);border:2px solid #e2e8f0;border:2px solid var(--color-border-light);border-radius:12px;border-radius:var(--radius-lg);color:#2d3748;color:var(--color-text-primary);flex:1 1;font-family:Poppins,sans-serif;font-size:15px;font-size:var(--font-base);min-width:200px;outline:none;padding:16px 20px;padding:var(--spacing-lg) var(--spacing-xl);transition:all .3s ease;transition:all var(--transition-base)}.input-task:focus{border-color:#667eea;border-color:var(--color-border-primary);box-shadow:0 0 0 3px #667eea1a;box-shadow:var(--shadow-focus-sm)}.input-task::placeholder{color:#a0aec0;color:var(--color-text-tertiary)}.priority-select{background:#fff;background:var(--color-bg-white);border:2px solid #e2e8f0;border:2px solid var(--color-border-light);border-radius:12px;border-radius:var(--radius-lg);color:#2d3748;color:var(--color-text-primary);cursor:pointer;font-family:Poppins,sans-serif;font-size:15px;font-size:var(--font-base);outline:none;padding:16px;padding:var(--spacing-lg);transition:all .3s ease;transition:all var(--transition-base)}.priority-select:focus{border-color:#667eea;border-color:var(--color-border-primary);box-shadow:0 0 0 3px #667eea1a;box-shadow:var(--shadow-focus-sm)}.priority-select:hover{border-color:#cbd5e0;border-color:var(--color-border-medium)}.btn-hover{background:linear-gradient(135deg,#667eea,#764ba2);background:linear-gradient(135deg,var(--color-primary) 0,var(--color-secondary) 100%);border:none;border-radius:12px;border-radius:var(--radius-lg);box-shadow:0 4px 15px #667eea66;box-shadow:var(--shadow-btn);color:#fff;color:var(--color-text-white);cursor:pointer;font-size:15px;font-size:var(--font-base);font-weight:600;font-weight:var(--font-weight-semibold);padding:16px 28px;padding:var(--spacing-lg) 28px;transition:all .3s ease;transition:all var(--transition-base);white-space:nowrap}.btn-hover:hover:not(:disabled){box-shadow:0 8px 25px #667eea80;box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-hover:active:not(:disabled){transform:translateY(0)}.btn-hover:disabled{cursor:not-allowed;opacity:.5;opacity:var(--opacity-disabled)}.todo-stats{animation:slideDown 1s ease;animation:slideDown var(--animation-duration-slow) ease;background:linear-gradient(135deg,#667eea15,#764ba215);border-radius:12px;border-radius:var(--radius-lg);gap:20px;gap:var(--spacing-xl);justify-content:space-around;padding:20px;padding:var(--spacing-xl)}.stat-item,.todo-stats{align-items:center;display:flex}.stat-item{flex-direction:column;gap:8px;gap:var(--spacing-sm)}.stat-number{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);background:linear-gradient(135deg,var(--color-primary) 0,var(--color-secondary) 100%);-webkit-background-clip:text;background-clip:text;font-size:28px;font-size:var(--font-4xl);font-weight:700;font-weight:var(--font-weight-bold)}.stat-number.active{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#3b82f6,#2563eb);background:linear-gradient(135deg,var(--color-info) 0,var(--color-info-dark) 100%);-webkit-background-clip:text}.stat-number.completed{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#22c55e,#16a34a);background:linear-gradient(135deg,var(--color-success) 0,var(--color-success-dark) 100%);-webkit-background-clip:text}.stat-label{color:#718096;color:var(--color-text-secondary);font-size:12px;font-size:var(--font-sm);font-weight:500;font-weight:var(--font-weight-medium);letter-spacing:.5px;text-transform:uppercase}.filter-section{align-items:center;display:flex;flex-wrap:wrap;gap:12px;gap:var(--spacing-md);justify-content:space-between}.filter-buttons{background:#f1f1f1;background:var(--color-bg-light-gray);border-radius:12px;border-radius:var(--radius-lg);display:flex;gap:8px;gap:var(--spacing-sm);padding:6px;padding:var(--spacing-xs)}.filter-btn{background:#0000;border:none;border-radius:8px;border-radius:var(--radius-md);color:#718096;color:var(--color-text-secondary);cursor:pointer;font-family:Poppins,sans-serif;font-size:12px;font-size:var(--font-sm);font-weight:500;font-weight:var(--font-weight-medium);padding:12px 20px;padding:var(--spacing-md) var(--spacing-xl);transition:all .3s ease;transition:all var(--transition-base)}.filter-btn:hover{background:#667eea1a;color:#667eea;color:var(--color-primary)}.filter-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);background:linear-gradient(135deg,var(--color-primary) 0,var(--color-secondary) 100%);box-shadow:0 4px 12px #667eea26;box-shadow:var(--shadow-md);color:#fff;color:var(--color-text-white)}.clear-completed-btn{background:#fff;background:var(--color-bg-white);border:2px solid var(--color-danger);border-radius:8px;border-radius:var(--radius-md);color:var(--color-danger);cursor:pointer;font-family:Poppins,sans-serif;font-size:12px;font-size:var(--font-sm);font-weight:500;font-weight:var(--font-weight-medium);padding:12px 20px;padding:var(--spacing-md) var(--spacing-xl);transition:all .3s ease;transition:all var(--transition-base)}.clear-completed-btn:hover{background:var(--color-danger);box-shadow:0 4px 12px #ef44444d;color:#2d3748;color:var(--color-text-primary);transform:translateY(-2px)}.main{display:flex;flex-direction:column;gap:20px;gap:var(--spacing-xl);width:100%}.todo-checkbox{appearance:none;-webkit-appearance:none;background:#fff;background:var(--color-bg-white);border:2px solid #cbd5e0;border:2px solid var(--color-border-medium);border-radius:var(--radius-xs);cursor:pointer;flex-shrink:0;height:24px;height:var(--checkbox-size);position:relative;transition:all .3s ease;transition:all var(--transition-base);width:24px;width:var(--checkbox-size)}.todo-checkbox:hover{box-shadow:var(--shadow-focus-ring)}.todo-checkbox:checked,.todo-checkbox:hover{border-color:#667eea;border-color:var(--color-primary)}.todo-checkbox:checked{background:linear-gradient(135deg,#667eea,#764ba2);background:linear-gradient(135deg,var(--color-primary) 0,var(--color-secondary) 100%)}.todo-checkbox:checked:after{color:#fff;color:var(--color-text-white);content:"✓";font-size:15px;font-size:var(--font-base);font-weight:700;font-weight:var(--font-weight-bold);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.todo-checkbox:focus{box-shadow:0 0 0 3px #667eea33;box-shadow:var(--shadow-focus-md);outline:none}ul{display:flex;flex-direction:column;gap:12px;gap:var(--spacing-md);list-style:none;margin:0;padding:0;width:100%}.fade-in{animation:fadeIn .5s ease;animation:fadeIn var(--animation-duration-base) ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px);transform:translateY(var(--spacing-xl))}to{opacity:1;transform:translateY(0)}}li{align-items:center;animation:slideInFromLeft .5s ease both;animation:slideInFromLeft var(--animation-duration-base) ease both;background:#fff;background:var(--color-bg-white);border:2px solid #e2e8f0;border:2px solid var(--color-border-light);border-radius:12px;border-radius:var(--radius-lg);cursor:pointer;display:flex;gap:12px;gap:var(--spacing-md);padding:16px 20px;padding:var(--spacing-lg) var(--spacing-xl);position:relative;transition:all .3s ease;transition:all var(--transition-base)}@keyframes slideInFromLeft{0%{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}li:hover{border-color:#667eea;border-color:var(--color-primary);box-shadow:0 4px 12px #667eea26;box-shadow:var(--shadow-md);transform:translateX(5px)}.priority-badge{align-items:center;border-radius:50%;display:flex;font-size:16px;font-size:var(--font-lg);height:28px;justify-content:center;min-width:28px;transition:transform .2s ease;transition:transform var(--transition-fast)}.priority-low{background:#22c55e1a}.priority-medium{background:#eab3081a}.priority-high{background:#ef44441a}.priority-badge:hover{transform:scale(1.2)}.todo-content{align-items:center;display:flex;flex:1 1}li p{color:#2d3748;color:var(--color-text-primary);font-size:15px;font-size:var(--font-base);line-height:1.5;margin:0;width:100%;word-break:break-word}.checked{color:#a0aec0;color:var(--color-text-tertiary);opacity:.7;opacity:var(--opacity-low);text-decoration:line-through}.edit-input{background:#f1f1f1;background:var(--color-bg-light-gray);border:2px solid #667eea;border:2px solid var(--color-primary);border-radius:8px;border-radius:var(--radius-md);color:#2d3748;color:var(--color-text-primary);flex:1 1;font-family:Poppins,sans-serif;font-size:15px;font-size:var(--font-base);outline:none;padding:8px 12px;padding:var(--spacing-sm) var(--spacing-md)}.todo-actions{gap:8px;gap:var(--spacing-sm)}.task-icons,.todo-actions{align-items:center;display:flex}.task-icons{background:#0000;border:none;border-radius:8px;border-radius:var(--radius-md);color:inherit;cursor:pointer;font-size:18px;font-size:var(--icon-md);justify-content:center;min-height:36px;min-width:36px;padding:6px;padding:var(--spacing-xs);transition:all .2s ease;transition:all var(--transition-fast)}.edit-icon:hover{background:#3b82f61a;transform:scale(1.1)}.delete-icon:hover{background:#fee;background:var(--color-error-light);transform:scale(1.1)}.error-message{animation:slideDown .3s ease;animation:slideDown var(--animation-duration-fast) ease;background:var(--color-state-error-light);border:2px solid var(--color-state-error-border);border-radius:12px;border-radius:var(--radius-lg);color:var(--color-state-error-dark);font-size:12px;font-size:var(--font-sm);font-weight:500;font-weight:var(--font-weight-medium);padding:16px 20px;padding:var(--spacing-lg) var(--spacing-xl);text-align:center}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.todo-list-container{min-height:var(--list-min-height)}.empty-state,.loading,.todo-list-container{align-items:center;display:flex;justify-content:center}.empty-state,.loading{flex-direction:column;gap:20px;gap:var(--spacing-xl);padding:60px 20px;padding:var(--spacing-4xl) var(--spacing-xl);text-align:center}.spinner{animation:spin .5s linear infinite;animation:spin var(--animation-duration-base) linear infinite;border:4px solid #e2e8f0;border-top:4px solid #667eea;border:4px solid var(--color-border-light);border-radius:50%;border-top-color:var(--color-primary);height:50px;height:var(--spinner-size);width:50px;width:var(--spinner-size)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.loading p{animation:pulse 1s cubic-bezier(.4,0,.6,1) infinite;animation:pulse var(--animation-duration-slow) cubic-bezier(.4,0,.6,1) infinite;color:#718096;color:var(--color-text-secondary);font-size:15px;font-size:var(--font-base);font-weight:500;font-weight:var(--font-weight-medium);margin:0}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5;opacity:var(--opacity-disabled)}}.empty-state{color:#a0aec0;color:var(--color-text-tertiary)}.empty-icon{animation:bounce 1s infinite;animation:bounce var(--animation-duration-slow) infinite;font-size:var(--font-5xl)}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.empty-state p{font-size:15px;font-size:var(--font-base);font-style:italic;margin:0}@media (max-width:768px){body{padding:16px;padding:var(--spacing-lg)}.form-control{max-height:90vh;padding:30px 20px;padding:var(--spacing-2xl) var(--spacing-xl)}.text{font-size:24px;font-size:var(--font-3xl)}.input-form{flex-direction:column}.btn-hover{padding:12px 30px;padding:var(--spacing-md) var(--spacing-2xl);width:100%}.priority-select{width:100%}li{padding:12px 16px;padding:var(--spacing-md) var(--spacing-lg)}li p{font-size:12px;font-size:var(--font-sm)}.todo-list-container{min-height:250px}.spinner{height:40px;width:40px}.empty-icon{font-size:28px;font-size:var(--font-4xl)}.empty-state p,.loading p{font-size:12px;font-size:var(--font-sm)}.todo-stats{gap:12px;gap:var(--spacing-md);padding:16px;padding:var(--spacing-lg)}.stat-number{font-size:20px;font-size:var(--font-2xl)}.stat-label{font-size:11px}.filter-section{flex-direction:column}.filter-buttons{justify-content:center;width:100%}.clear-completed-btn{width:100%}}@media (max-width:480px){.form-control{border-radius:12px;border-radius:var(--radius-lg);padding:20px;padding:var(--spacing-xl) var(--spacing-xl)}.text{font-size:20px;font-size:var(--font-2xl)}.btn-hover,.input-task,.priority-select{font-size:12px;font-size:var(--font-sm)}li{gap:8px;gap:var(--spacing-sm);padding:12px;padding:var(--spacing-md) var(--spacing-md)}.task-icons{font-size:15px;font-size:var(--font-base);height:28px;min-width:28px}.todo-list-container{min-height:200px}.todo-stats{gap:8px;gap:var(--spacing-sm);padding:12px;padding:var(--spacing-md)}.stat-number{font-size:18px;font-size:var(--font-xl)}.stat-label{font-size:10px}.filter-btn{font-size:13px;padding:8px 12px;padding:var(--spacing-sm) var(--spacing-md)}.priority-badge{font-size:15px;font-size:var(--font-base);height:24px;min-width:24px}.spinner{border-width:3px;height:35px;width:35px}.empty-icon{font-size:40px}}
/*# sourceMappingURL=main.e0a35edd.css.map*/