*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#f0fdfa,#e0f2fe 50%,#fef3c7);color:#1e293b;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.6;min-height:100vh}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#14b8a6,#0ea5e9);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#0d9488,#0284c7)}button{cursor:pointer}button,input,select,textarea{font-family:inherit}a{color:inherit;text-decoration:none}.container{margin:0 auto;max-width:1200px;padding:0 1.5rem}.btn{align-items:center;border:none;border-radius:12px;display:inline-flex;font-size:.95rem;font-weight:600;gap:.5rem;justify-content:center;padding:.75rem 1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn-primary{background:linear-gradient(135deg,#14b8a6,#0ea5e9);box-shadow:0 4px 14px #14b8a659;color:#fff}.btn-primary:hover{box-shadow:0 6px 20px #14b8a673;transform:translateY(-2px)}.btn-secondary{background:#fff;border:2px solid #e2e8f0;color:#475569}.btn-secondary:hover{border-color:#14b8a6;color:#14b8a6}.btn-danger{background:linear-gradient(135deg,#f43f5e,#ef4444);color:#fff}.btn-danger:hover{box-shadow:0 4px 14px #f43f5e59;transform:translateY(-2px)}.card{background:#fff;border-radius:16px;box-shadow:0 4px 6px #0000000d,0 10px 40px #00000014;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.card:hover{box-shadow:0 8px 12px #00000014,0 20px 60px #0000001f;transform:translateY(-4px)}.badge{align-items:center;border-radius:20px;display:inline-flex;font-size:.75rem;font-weight:600;letter-spacing:.5px;padding:.25rem .75rem;text-transform:uppercase}.badge-high{background:linear-gradient(135deg,#fef2f2,#fee2e2);color:#dc2626}.badge-medium{background:linear-gradient(135deg,#fffbeb,#fef3c7);color:#d97706}.badge-low{background:linear-gradient(135deg,#f0fdf4,#dcfce7);color:#16a34a}.badge-category{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);color:#0284c7}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}.fade-in{animation:fadeIn .4s ease-out}.slide-in{animation:slideIn .3s ease-out}.header{background:linear-gradient(135deg,#0d9488,#0891b2 50%,#0284c7);box-shadow:0 4px 20px #0d94884d;padding:1.5rem 0;position:-webkit-sticky;position:sticky;top:0;z-index:100}.header-container{justify-content:space-between;margin:0 auto;max-width:900px;padding:0 1.5rem}.header-container,.logo{align-items:center;display:flex}.logo{gap:1rem}.logo-icon{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border-radius:14px;box-shadow:0 4px 15px #0000001a;color:#fff;display:flex;font-size:1.5rem;height:50px;justify-content:center;width:50px}.logo-text h1{color:#fff;font-size:1.75rem;font-weight:700;letter-spacing:-.5px;margin:0}.tagline{color:#ffffffd9;font-size:.85rem;font-weight:400}.header-stats{gap:1.5rem}.header-stats,.stat-item{align-items:center;display:flex}.stat-item{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border-radius:20px;color:#fff;font-size:.9rem;font-weight:500;gap:.5rem;padding:.5rem 1rem}.stat-icon{font-size:1rem}@media (max-width:600px){.header-container{flex-direction:column;gap:1rem}.logo-text h1{font-size:1.5rem}.header-stats{justify-content:center;width:100%}}.todo-item{align-items:flex-start;animation:fadeIn .4s ease-out;background:#fff;border:1px solid #0000000a;border-radius:16px;box-shadow:0 2px 8px #0000000a,0 4px 20px #0000000f;display:flex;gap:1rem;padding:1.25rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.todo-item:hover{box-shadow:0 4px 12px #00000014,0 8px 30px #0000001a;transform:translateY(-2px)}.todo-item.completed{background:linear-gradient(135deg,#f8fafc,#f1f5f9);opacity:.7}.todo-item.completed .todo-title{color:#94a3b8;text-decoration:line-through}.todo-item.overdue{border-left:4px solid #ef4444}.checkbox{align-items:center;background:#fff;border:2px solid #cbd5e1;border-radius:50%;cursor:pointer;display:flex;height:26px;justify-content:center;margin-top:2px;min-width:26px;transition:all .2s ease;width:26px}.checkbox:hover{background:#f0fdfa;border-color:#14b8a6}.checkbox.checked{background:linear-gradient(135deg,#14b8a6,#0ea5e9);border-color:#0000;color:#fff}.checkbox.checked:hover{transform:scale(1.1)}.todo-content{flex:1 1;min-width:0}.todo-header{align-items:flex-start;display:flex;gap:1rem;justify-content:space-between;margin-bottom:.5rem}.todo-title{color:#1e293b;font-size:1.1rem;font-weight:600;line-height:1.4;margin:0}.todo-badges{display:flex;flex-shrink:0;gap:.5rem}.todo-description{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#64748b;display:-webkit-box;font-size:.9rem;line-height:1.5;margin:0 0 .75rem;overflow:hidden}.todo-date{align-items:center;background:#f8fafc;border-radius:8px;color:#64748b;display:inline-flex;font-size:.85rem;gap:.4rem;padding:.35rem .75rem}.todo-date.overdue-date{background:#fef2f2;color:#dc2626}.overdue-label{font-weight:600;margin-left:.25rem}.todo-actions{display:flex;gap:.5rem;opacity:0;transition:opacity .2s ease}.todo-item:hover .todo-actions{opacity:1}.action-btn{align-items:center;border:none;border-radius:10px;cursor:pointer;display:flex;font-size:.9rem;height:36px;justify-content:center;transition:all .2s ease;width:36px}.edit-btn{background:#f0f9ff;color:#0284c7}.edit-btn:hover{background:#0284c7;color:#fff;transform:scale(1.1)}.delete-btn{background:#fef2f2;color:#dc2626}.delete-btn:hover{background:#dc2626;color:#fff;transform:scale(1.1)}@media (max-width:600px){.todo-header{flex-direction:column;gap:.5rem}.todo-badges{flex-wrap:wrap}.todo-actions{opacity:1}}.modal-overlay{align-items:center;animation:fadeIn .2s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f172a99;bottom:0;display:flex;justify-content:center;left:0;padding:1rem;position:fixed;right:0;top:0;z-index:1000}.modal-content{animation:slideUp .3s ease-out;background:#fff;border-radius:20px;box-shadow:0 20px 60px #0003;max-height:90vh;max-width:500px;overflow-y:auto;width:100%}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{align-items:center;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;padding:1.5rem}.modal-header h2{color:#1e293b;font-size:1.35rem;font-weight:700;margin:0}.close-btn{align-items:center;background:#f1f5f9;border:none;border-radius:10px;color:#64748b;cursor:pointer;display:flex;height:36px;justify-content:center;transition:all .2s ease;width:36px}.close-btn:hover{background:#e2e8f0;color:#1e293b}form{padding:1.5rem}.form-group{margin-bottom:1.25rem}.form-group label{align-items:center;color:#475569;display:flex;font-size:.9rem;font-weight:600;gap:.5rem;margin-bottom:.5rem}.form-group input,.form-group select,.form-group textarea{background:#f8fafc;border:2px solid #e2e8f0;border-radius:12px;color:#1e293b;font-size:.95rem;padding:.85rem 1rem;transition:all .2s ease;width:100%}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{background:#fff;border-color:#14b8a6;box-shadow:0 0 0 4px #14b8a61a;outline:none}.form-group input.error{border-color:#ef4444}.form-group textarea{min-height:80px;resize:vertical}.form-group select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m19 9-7 7-7-7'/%3E%3C/svg%3E");background-position:right 1rem center;background-repeat:no-repeat;background-size:1rem;cursor:pointer}.error-message{color:#ef4444;display:block;font-size:.85rem;margin-top:.35rem}.form-row{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr 1fr}.modal-actions{border-top:1px solid #e2e8f0;display:flex;gap:1rem;margin-top:1.5rem;padding-top:1.5rem}.modal-actions .btn{flex:1 1}@media (max-width:500px){.form-row{grid-template-columns:1fr}.modal-actions{flex-direction:column-reverse}}.stats-card{align-items:center;background:#fff;border-radius:16px;box-shadow:0 2px 8px #0000000a,0 4px 20px #0000000f;display:flex;gap:1rem;padding:1.25rem;transition:all .3s ease}.stats-card:hover{box-shadow:0 4px 12px #00000014,0 8px 30px #0000001a;transform:translateY(-2px)}.stats-icon{align-items:center;background:#ffffffe6;border-radius:12px;display:flex;font-size:1.35rem;height:48px;justify-content:center;width:48px}.stats-info{display:flex;flex-direction:column}.stats-value{color:#fff;font-size:1.75rem;font-weight:700;line-height:1.2}.stats-label{color:#ffffffe6;font-size:.85rem;font-weight:500}.home{padding-bottom:3rem}.stats-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:2rem}.section-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1.5rem}.section-header h2{color:#1e293b;font-size:1.5rem;font-weight:700;margin:0}.filters-container{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;margin-bottom:1.5rem}.filter-group{align-items:center;display:flex;gap:.75rem}.filter-icon{color:#64748b;font-size:1rem}.filter-buttons{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000f;display:flex;padding:.25rem}.filter-btn{background:#0000;border:none;border-radius:10px;color:#64748b;cursor:pointer;font-size:.9rem;font-weight:500;padding:.5rem 1rem;transition:all .2s ease}.filter-btn:hover{color:#1e293b}.filter-btn.active{background:linear-gradient(135deg,#14b8a6,#0ea5e9);box-shadow:0 2px 8px #14b8a64d;color:#fff}.category-select{-webkit-appearance:none;appearance:none;background:#fff;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m19 9-7 7-7-7'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;background-size:1rem;border:2px solid #e2e8f0;border-radius:12px;color:#475569;cursor:pointer;font-size:.9rem;font-weight:500;padding:.6rem 2.5rem .6rem 1rem;transition:all .2s ease}.category-select:hover{border-color:#14b8a6}.category-select:focus{border-color:#14b8a6;box-shadow:0 0 0 4px #14b8a61a;outline:none}.todo-list{display:flex;flex-direction:column;gap:1rem}.empty-state{background:#fff;border-radius:20px;box-shadow:0 2px 8px #0000000a;padding:4rem 2rem;text-align:center}.empty-icon{font-size:4rem;margin-bottom:1rem}.empty-state h3{color:#1e293b;font-size:1.35rem;font-weight:600;margin-bottom:.5rem}.empty-state p{color:#64748b;font-size:.95rem}.loading-container{align-items:center;display:flex;flex-direction:column;gap:1rem;justify-content:center;min-height:50vh}.loading-spinner{animation:spin 1s linear infinite;border:4px solid #e2e8f0;border-radius:50%;border-top-color:#14b8a6;height:48px;width:48px}@keyframes spin{to{transform:rotate(1turn)}}.loading-container p{color:#64748b;font-size:1rem}@media (max-width:600px){.stats-grid{grid-template-columns:repeat(2,1fr)}.section-header{align-items:stretch;flex-direction:column;gap:1rem}.section-header .btn{width:100%}.filters-container{align-items:stretch;flex-direction:column}.filter-group{justify-content:center}.category-select{width:100%}}.app{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1 1;padding:2rem 0}.app-container{margin:0 auto;max-width:900px;padding:0 1.5rem}