*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#f0fdfa,#e0f2fe 50%,#f0f9ff);color:#1e293b;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;min-height:100vh}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#64748b}.loading-screen{align-items:center;display:flex;flex-direction:column;gap:1rem;justify-content:center;min-height:50vh}.loading-spinner{height:40px;width:40px}.loading-screen p{color:#64748b;font-size:.95rem}.auth-link{color:#0d9488;font-weight:500;text-decoration:none;transition:color .2s ease}.auth-link:hover{color:#0891b2;text-decoration:underline}.btn-primary{background:linear-gradient(135deg,#0d9488,#0891b2);border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:.95rem;font-weight:600;padding:.75rem 1.5rem;transition:all .3s ease}.btn-primary:hover{box-shadow:0 8px 20px #0d948859;transform:translateY(-2px)}.btn-secondary{background:#fff;border:2px solid #0d9488;border-radius:10px;color:#0d9488;cursor:pointer;font-size:.95rem;font-weight:600;padding:.75rem 1.5rem;transition:all .3s ease}.btn-secondary:hover{background:#f0fdfa}input,select,textarea{font-family:inherit}input:focus,select:focus,textarea:focus{outline:none}.header{background:linear-gradient(135deg,#0d9488,#0891b2);box-shadow:0 4px 20px #0d94884d;padding:2rem;position:sticky;top:0;z-index:100}.header-content{margin:0 auto;max-width:800px;text-align:center}.logo{gap:.75rem;margin-bottom:.5rem}.logo,.logo-icon{align-items:center;display:flex;justify-content:center}.logo-icon{background:#fff3;border-radius:50%;font-size:1.25rem;height:40px;width:40px}.logo h1,.logo-icon{color:#fff;font-weight:700}.logo h1{font-size:2rem;letter-spacing:-.5px}.tagline{color:#ffffffe6;font-size:.95rem;font-weight:400}@media (max-width:768px){.header{padding:1.5rem 1rem}.logo h1{font-size:1.5rem}.logo-icon{font-size:1rem;height:32px;width:32px}}.footer{background:linear-gradient(135deg,#0f172a,#1e293b);color:#e2e8f0;margin-top:auto;padding:3rem 2rem 1.5rem}.footer-content{grid-gap:3rem;border-bottom:1px solid #ffffff1a;display:grid;gap:3rem;grid-template-columns:1.5fr 2fr 1fr;margin:0 auto;max-width:1200px;padding-bottom:2rem}.footer-section{display:flex;flex-direction:column;gap:1rem}.footer-brand{gap:.75rem}.footer-brand,.footer-logo{align-items:center;display:flex}.footer-logo{background:linear-gradient(135deg,#0d9488,#0891b2);border-radius:8px;height:36px;justify-content:center;width:36px}.footer-logo,.footer-title{color:#fff;font-size:1.25rem;font-weight:700}.footer-tagline{color:#94a3b8;font-size:.9rem;line-height:1.5}.footer-links{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(3,1fr)}.footer-column h4{color:#fff;font-size:.875rem;font-weight:600;letter-spacing:.5px;margin-bottom:1rem;text-transform:uppercase}.footer-column a{color:#94a3b8;display:block;font-size:.875rem;padding:.375rem 0;text-decoration:none;transition:color .2s ease}.footer-column a:hover{color:#0d9488}.footer-social h4{color:#fff;font-size:.875rem;font-weight:600;letter-spacing:.5px;margin-bottom:1rem;text-transform:uppercase}.social-icons{display:flex;gap:.75rem}.social-icon{align-items:center;background:#ffffff0d;border-radius:10px;color:#94a3b8;display:flex;height:40px;justify-content:center;transition:all .3s ease;width:40px}.social-icon svg{height:18px;width:18px}.social-icon:hover{background:linear-gradient(135deg,#0d9488,#0891b2);color:#fff;transform:translateY(-2px)}.footer-bottom{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;margin:0 auto;max-width:1200px;padding-top:1.5rem}.footer-bottom p{color:#64748b;font-size:.8rem}.footer-legal{display:flex;gap:1.5rem}.footer-legal a{color:#64748b;font-size:.8rem;text-decoration:none;transition:color .2s ease}.footer-legal a:hover{color:#0d9488}@media (max-width:768px){.footer-content{gap:2rem;grid-template-columns:1fr}.footer-links{gap:1rem;grid-template-columns:repeat(3,1fr)}.footer-bottom{flex-direction:column;text-align:center}}@media (max-width:480px){.footer{padding:2rem 1rem 1rem}.footer-links{grid-template-columns:1fr 1fr}.footer-social{grid-column:span 2}}.todo-item{align-items:flex-start;background:#fff;border:1px solid #0000000a;border-radius:12px;box-shadow:0 2px 8px #0000000f,0 1px 2px #0000000a;display:flex;gap:1rem;margin-bottom:1rem;padding:1.25rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.todo-item:hover{box-shadow:0 8px 24px #0000001a,0 2px 8px #0000000f;transform:translateY(-2px)}.todo-item.completed{background:#f8fafc;opacity:.7}.todo-item.completed .todo-title{color:#94a3b8;text-decoration:line-through}.todo-checkbox{cursor:pointer;flex-shrink:0}.checkmark{align-items:center;border:2px solid #cbd5e1;border-radius:50%;color:#fff;display:flex;font-size:.875rem;height:28px;justify-content:center;transition:all .2s ease;width:28px}.checkmark:hover{border-color:#0d9488}.checkmark.checked{background:linear-gradient(135deg,#0d9488,#0891b2);border-color:#0000}.todo-content{flex:1 1;min-width:0}.todo-header{align-items:center;display:flex;gap:.75rem;margin-bottom:.25rem}.todo-title{color:#1e293b;font-size:1.05rem;font-weight:600;margin:0}.priority-badge{border-radius:4px;color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.5px;padding:.2rem .5rem;text-transform:uppercase}.todo-description{color:#64748b;font-size:.9rem;line-height:1.5;margin:0}.todo-actions{display:flex;flex-shrink:0;gap:.5rem}.btn-delete,.btn-edit{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;font-size:1rem;height:36px;justify-content:center;transition:all .2s ease;width:36px}.btn-edit{background:#f1f5f9;color:#64748b}.btn-edit:hover{background:#0d9488;color:#fff}.btn-delete{background:#fef2f2;color:#ef4444}.btn-delete:hover{background:#ef4444;color:#fff}.edit-form{display:flex;flex-direction:column;gap:.75rem;width:100%}.edit-input,.edit-select,.edit-textarea{border:2px solid #e2e8f0;border-radius:8px;font-family:inherit;font-size:.95rem;padding:.75rem;transition:border-color .2s ease;width:100%}.edit-input:focus,.edit-select:focus,.edit-textarea:focus{border-color:#0d9488;outline:none}.edit-textarea{min-height:60px;resize:vertical}.edit-actions{display:flex;gap:.5rem;justify-content:flex-end}.btn-cancel,.btn-save{border:none;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;padding:.5rem 1rem;transition:all .2s ease}.btn-save{background:linear-gradient(135deg,#0d9488,#0891b2);color:#fff}.btn-save:hover{box-shadow:0 4px 12px #0d94884d;transform:translateY(-1px)}.btn-cancel{background:#f1f5f9;color:#64748b}.btn-cancel:hover{background:#e2e8f0}@media (max-width:480px){.todo-item{padding:1rem}.todo-header{flex-wrap:wrap}.todo-actions{position:absolute;right:1rem;top:1rem}.todo-item{padding-right:5.5rem;position:relative}}.home{animation:fadeIn .4s ease;min-height:calc(100vh - 200px)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.hero-section{background:linear-gradient(135deg,#0d9488,#0891b2 50%,#0284c7);border-radius:24px;color:#fff;margin-bottom:2rem;overflow:hidden;padding:3rem 2rem;position:relative}.hero-content{max-width:600px;position:relative;z-index:2}.hero-title{font-size:2.5rem;font-weight:800;line-height:1.2;margin-bottom:.75rem}.hero-subtitle{font-size:1.1rem;line-height:1.6;margin-bottom:2rem;opacity:.9}.hero-stats{display:flex;gap:2rem}.hero-stat{display:flex;flex-direction:column}.hero-stat-number{font-size:2rem;font-weight:800}.hero-stat-label{font-size:.8rem;letter-spacing:.5px;opacity:.8;text-transform:uppercase}.hero-visual{position:absolute;right:-50px;top:-50px}.hero-circle{background:#ffffff1a;border-radius:50%;height:200px;position:absolute;right:0;top:0;width:200px}.hero-circle-2{height:150px;right:80px;top:80px;width:150px}.features-section{margin-bottom:2rem}.section-title{color:#1e293b;font-size:1.5rem;font-weight:700;margin-bottom:1.5rem;text-align:center}.features-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.feature-card{background:#fff;border:1px solid #0000000d;border-radius:16px;box-shadow:0 4px 20px #00000014;overflow:hidden;transition:all .3s ease}.feature-card:hover{box-shadow:0 12px 40px #0000001f;transform:translateY(-4px)}.feature-image-wrapper{height:140px;overflow:hidden;position:relative}.feature-image{height:100%;object-fit:cover;transition:transform .3s ease;width:100%}.feature-card:hover .feature-image{transform:scale(1.05)}.feature-icon-badge{align-items:center;background:linear-gradient(135deg,#0d9488,#0891b2);border-radius:12px;bottom:-20px;box-shadow:0 4px 12px #0d948866;display:flex;font-size:1.5rem;height:50px;justify-content:center;position:absolute;right:16px;width:50px}.feature-content{padding:1.75rem 1.5rem 1.5rem}.feature-title{color:#1e293b;font-size:1.1rem;font-weight:700;margin-bottom:.5rem}.feature-description{color:#64748b;font-size:.9rem;line-height:1.5}.add-todo-section{background:#fff;border:1px solid #0000000d;border-radius:20px;box-shadow:0 4px 20px #00000014;margin-bottom:2rem;padding:2rem}.section-header{margin-bottom:1.5rem}.section-header h2{color:#1e293b;font-size:1.25rem;font-weight:700;margin-bottom:.25rem}.section-header p{color:#64748b;font-size:.9rem}.add-todo-form{display:flex;flex-direction:column;gap:1rem}.form-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}.form-group.full-width{grid-column:span 2}.form-group label{color:#475569;font-size:.8rem;letter-spacing:.5px;text-transform:uppercase}.form-input,.form-select,.form-textarea{background:#f8fafc;border:2px solid #e2e8f0;border-radius:12px;font-family:inherit;font-size:.95rem;padding:.875rem 1rem;transition:all .2s ease}.form-input:focus,.form-select:focus,.form-textarea:focus{background:#fff;border-color:#0d9488;box-shadow:0 0 0 4px #0d94881a;outline:none}.form-textarea{min-height:80px;resize:vertical}.btn-submit{align-items:center;background:linear-gradient(135deg,#0d9488,#0891b2);border:none;border-radius:12px;color:#fff;cursor:pointer;display:flex;font-size:.95rem;font-weight:600;gap:.5rem;height:100%;justify-content:center;min-height:48px;padding:.875rem 1.5rem;transition:all .3s ease}.btn-submit:hover{box-shadow:0 8px 20px #0d948859;transform:translateY(-2px)}.btn-icon{font-size:1.25rem;font-weight:300}.error-message{align-items:center;background:linear-gradient(135deg,#fef2f2,#fee2e2);border-radius:12px;display:flex;gap:.5rem;margin-top:1rem;padding:1rem}.error-message:before{content:"⚠️"}.filter-section{margin-bottom:1.5rem}.filter-tabs{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}.filter-tab{align-items:center;background:#fff;border:2px solid #e2e8f0;border-radius:12px;color:#64748b;cursor:pointer;display:flex;font-size:.9rem;font-weight:500;gap:.5rem;padding:.75rem 1.25rem;transition:all .2s ease}.filter-tab:hover{border-color:#0d9488;color:#0d9488}.filter-tab.active{background:linear-gradient(135deg,#0d9488,#0891b2);border-color:#0000;color:#fff}.filter-icon{font-size:1rem}.filter-count{background:#0000001a;border-radius:20px;font-size:.75rem;font-weight:600;padding:.125rem .5rem}.filter-tab.active .filter-count{background:#fff3}.todos-section{min-height:200px}.todos-grid{grid-gap:1rem;display:grid;gap:1rem}.loading-state{align-items:center;color:#64748b;display:flex;flex-direction:column;justify-content:center;padding:4rem 2rem}.loading-spinner{animation:spin .8s linear infinite;border:3px solid #e2e8f0;border-radius:50%;border-top-color:#0d9488;height:48px;margin-bottom:1rem;width:48px}@keyframes spin{to{transform:rotate(1turn)}}.empty-state{background:#fff;border-radius:20px;box-shadow:0 4px 20px #00000014;padding:4rem 2rem;text-align:center}.empty-illustration{align-items:center;background:linear-gradient(135deg,#f0fdfa,#e0f2fe);border-radius:50%;display:flex;height:100px;justify-content:center;margin:0 auto 1.5rem;width:100px}.empty-icon{font-size:3rem}.empty-state h3{color:#1e293b;font-size:1.25rem;font-weight:600;margin-bottom:.5rem}.empty-state p{color:#64748b;font-size:.95rem}@media (max-width:768px){.hero-section{padding:2rem 1.5rem}.hero-title{font-size:1.75rem}.hero-stats{gap:1.5rem}.hero-visual{display:none}.form-grid{grid-template-columns:1fr}.form-group.full-width{grid-column:span 1}.filter-tabs{flex-direction:column}.filter-tab{justify-content:center}}@media (max-width:480px){.hero-section{padding:1.5rem 1rem}.hero-stat-number,.hero-title{font-size:1.5rem}.add-todo-section{padding:1.5rem}.features-grid{grid-template-columns:1fr}}.login-page{align-items:center;animation:fadeIn .4s ease;display:flex;justify-content:center;min-height:calc(100vh - 80px);padding:2rem}.login-container{background:#fff;border:1px solid #0000000d;border-radius:20px;box-shadow:0 10px 40px #0000001a;max-width:420px;padding:2.5rem;width:100%}.login-header{margin-bottom:2rem;text-align:center}.login-header h1{color:#1e293b;font-size:1.75rem;font-weight:700;margin-bottom:.5rem}.login-header p{color:#64748b;font-size:.95rem}.login-form{display:flex;flex-direction:column;gap:1.25rem}.btn-login{background:linear-gradient(135deg,#0d9488,#0891b2);border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;margin-top:.5rem;padding:.875rem 1.5rem;transition:all .3s ease}.btn-login:hover:not(:disabled){box-shadow:0 8px 20px #0d948859;transform:translateY(-2px)}.btn-login:active:not(:disabled){transform:translateY(0)}.btn-login:disabled{cursor:not-allowed;opacity:.7}.login-footer{border-top:1px solid #e2e8f0;margin-top:1.5rem;padding-top:1.5rem;text-align:center}.login-footer p{color:#64748b;font-size:.9rem}.link-signup{color:#0d9488;font-weight:600;text-decoration:none;transition:color .2s ease}.link-signup:hover{color:#0891b2;text-decoration:underline}.demo-credentials{background:#f0fdfa;border:1px solid #99f6e4;border-radius:10px;margin-top:1.5rem;padding:1rem}.demo-credentials p{color:#0d9488;font-size:.8rem;font-weight:600;margin-bottom:.5rem}.demo-credentials code{background:#fff;border-radius:4px;color:#64748b;display:block;font-size:.75rem;margin-top:.25rem;padding:.375rem .5rem}@media (max-width:480px){.login-container{padding:1.5rem}.login-header h1{font-size:1.5rem}}.signup-page{align-items:center;animation:fadeIn .4s ease;display:flex;justify-content:center;min-height:calc(100vh - 80px);padding:2rem}.signup-container{background:#fff;border:1px solid #0000000d;border-radius:20px;box-shadow:0 10px 40px #0000001a;max-width:420px;padding:2.5rem;width:100%}.signup-header{margin-bottom:2rem;text-align:center}.signup-header h1{color:#1e293b;font-size:1.75rem;font-weight:700;margin-bottom:.5rem}.signup-header p{color:#64748b;font-size:.95rem}.signup-form{gap:1rem}.form-group,.signup-form{display:flex;flex-direction:column}.form-group{gap:.5rem}.form-group label{color:#374151;font-size:.875rem;font-weight:600}.form-group input{background:#f8fafc;border:2px solid #e2e8f0;border-radius:10px;font-family:inherit;font-size:1rem;padding:.875rem 1rem;transition:all .2s ease}.form-group input:focus{background:#fff;border-color:#0d9488;box-shadow:0 0 0 4px #0d94881a;outline:none}.form-group input:disabled{cursor:not-allowed;opacity:.7}.form-group input::placeholder{color:#94a3b8}.password-hint{color:#94a3b8;font-size:.75rem}.error-message{background:#fef2f2;border:1px solid #fecaca;border-radius:10px;color:#dc2626;font-size:.9rem;padding:.875rem 1rem;text-align:center}.btn-signup{background:linear-gradient(135deg,#0d9488,#0891b2);border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;margin-top:.5rem;padding:.875rem 1.5rem;transition:all .3s ease}.btn-signup:hover:not(:disabled){box-shadow:0 8px 20px #0d948859;transform:translateY(-2px)}.btn-signup:active:not(:disabled){transform:translateY(0)}.btn-signup:disabled{cursor:not-allowed;opacity:.7}.signup-footer{border-top:1px solid #e2e8f0;margin-top:1.5rem;padding-top:1.5rem;text-align:center}.signup-footer p{color:#64748b;font-size:.9rem}.link-login{color:#0d9488;font-weight:600;text-decoration:none;transition:color .2s ease}.link-login:hover{color:#0891b2;text-decoration:underline}@media (max-width:480px){.signup-container{padding:1.5rem}.signup-header h1{font-size:1.5rem}}.app{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1 1;margin:0 auto;max-width:1200px;padding:2rem;width:100%}@media (max-width:768px){.main-content{padding:1rem}}