*{box-sizing:border-box;margin:0;padding:0}.dark-todo-container{background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#334155 100%);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;position:relative;overflow-x:hidden}.dark-bg-overlay{pointer-events:none;z-index:0;background:radial-gradient(circle at 20%,#10b9811a 0%,#0000 50%),radial-gradient(circle at 80% 20%,#3b82f61a 0%,#0000 50%),radial-gradient(circle at 40% 80%,#a855f71a 0%,#0000 50%);width:100%;height:100%;position:fixed;top:0;left:0}.dark-bg-particles{pointer-events:none;z-index:0;background-image:radial-gradient(2px 2px at 20px 30px,#ffffff1a,#0000),radial-gradient(2px 2px at 40px 70px,#ffffff0d,#0000),radial-gradient(1px 1px at 90px 40px,#ffffff14,#0000);background-repeat:repeat;background-size:120px 120px;width:100%;height:100%;animation:20s linear infinite drift;position:fixed;top:0;left:0}@keyframes drift{0%{transform:translate(0)}to{transform:translate(-120px,-120px)}}.loading-container,.unauthorized-container{color:#f8fafc;z-index:1;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);flex-direction:column;justify-content:center;align-items:center;gap:2rem;min-height:100vh;display:flex;position:relative}.loading-spinner{border:4px solid #10b98133;border-top-color:#10b981;border-radius:50%;width:50px;height:50px;animation:1s linear infinite spin}.unauthorized-content{text-align:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0f172acc;border:1px solid #ffffff1a;border-radius:24px;padding:3rem;box-shadow:0 25px 50px #0000004d}.unauthorized-content h2{color:#f8fafc;margin:1rem 0;font-size:2rem;font-weight:700}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.dark-header{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:100;background:#0f172af2;border-bottom:1px solid #ffffff1a;padding:2rem;position:sticky;top:0;box-shadow:0 10px 30px #0000004d}.dark-header-content{justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto;display:flex}.dark-header-left{align-items:center;gap:1.5rem;display:flex}.dark-back-btn{color:#10b981;cursor:pointer;background:#10b9811a;border:1px solid #10b98133;border-radius:12px;justify-content:center;align-items:center;padding:.75rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.dark-back-btn:hover{background:#10b98133;transform:translate(-4px);box-shadow:0 8px 25px #10b98133}.dark-logo{align-items:center;gap:1rem;display:flex}.dark-logo-icon{color:#10b981;filter:drop-shadow(0 0 10px #10b9814d)}.dark-logo h1{color:#f8fafc;-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#f8fafc 0%,#10b981 100%);-webkit-background-clip:text;background-clip:text;font-size:2rem;font-weight:700}.dark-header-stats{align-items:center;gap:2rem;display:flex}.dark-stat-card{text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#10b9811a;border:1px solid #10b98133;border-radius:16px;padding:1rem 1.5rem}.dark-stat-number{color:#10b981;text-shadow:0 0 10px #10b9814d;font-size:1.75rem;font-weight:700;display:block}.dark-stat-label{color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;font-size:.875rem;font-weight:500}.dark-progress-mini{background:#ffffff1a;border-radius:3px;width:120px;height:6px;overflow:hidden}.dark-progress-mini-fill{background:linear-gradient(90deg,#10b981 0%,#059669 100%);border-radius:3px;height:100%;transition:width .5s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px #10b98180}.dark-main-content{z-index:1;grid-template-columns:1fr 380px;gap:3rem;max-width:1400px;margin:0 auto;padding:2rem;display:grid;position:relative}.dark-main-tasks{min-width:0}.dark-input-section{margin-bottom:3rem}.dark-input-container{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0f172ae6;border:1px solid #ffffff1a;border-radius:20px;gap:1rem;padding:1rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 20px 40px #0003}.dark-input-container:focus-within{border-color:#10b98180;transform:translateY(-2px);box-shadow:0 20px 40px #0000004d,0 0 0 1px #10b98133}.dark-task-input{color:#f8fafc;background:0 0;border:none;outline:none;flex:1;padding:.75rem 1rem;font-size:1.125rem;font-weight:400}.dark-task-input::placeholder{color:#64748b;font-style:italic}.dark-add-btn{cursor:pointer;color:#fff;background:linear-gradient(135deg,#10b981 0%,#059669 100%);border:none;border-radius:16px;justify-content:center;align-items:center;width:56px;height:56px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 8px 20px #10b9814d}.dark-add-btn:hover{transform:translateY(-3px)scale(1.05);box-shadow:0 15px 35px #10b98166}.dark-add-btn:active{transform:translateY(-1px)scale(1.02)}.dark-filter-section{margin-bottom:2rem}.dark-filter-tabs{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0f172a99;border:1px solid #ffffff1a;border-radius:20px;gap:.5rem;padding:.75rem;display:flex}.dark-filter-btn{cursor:pointer;color:#94a3b8;background:0 0;border:none;border-radius:16px;flex:1;justify-content:center;align-items:center;gap:.75rem;padding:1rem 1.5rem;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.dark-filter-btn:hover{color:#10b981;background:#10b9811a;transform:translateY(-2px)}.dark-filter-btn.active{color:#fff;background:linear-gradient(135deg,#10b981 0%,#059669 100%);transform:translateY(-2px);box-shadow:0 8px 20px #10b9814d}.dark-filter-count{color:inherit;text-align:center;background:#fff3;border-radius:8px;min-width:20px;padding:.25rem .5rem;font-size:.75rem;font-weight:600}.dark-filter-btn.active .dark-filter-count{background:#ffffff4d}.dark-tasks-section{min-height:400px}.dark-tasks-list{flex-direction:column;gap:1rem;display:flex}.dark-task-item{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0f172acc;border:1px solid #ffffff1a;border-radius:20px;padding:1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);animation:.5s cubic-bezier(.4,0,.2,1) slideInUp;position:relative;overflow:hidden}.dark-task-item:before{content:"";opacity:0;background:linear-gradient(90deg,#0000 0%,#10b981 50%,#0000 100%);height:2px;transition:opacity .3s;position:absolute;top:0;left:0;right:0}.dark-task-item:hover{border-color:#10b9814d;transform:translateY(-4px);box-shadow:0 20px 40px #0000004d}.dark-task-item:hover:before{opacity:1}.dark-task-item.completed{background:#10b9810d;border-color:#10b98133}.dark-task-item.completed:before{opacity:.6;background:linear-gradient(90deg,#0000 0%,#10b981 50%,#0000 100%)}.dark-task-content{align-items:flex-start;gap:1.25rem;display:flex}.dark-task-checkbox{cursor:pointer;background:#0f172a80;border:2px solid #475569;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;margin-top:2px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.dark-task-checkbox:hover{border-color:#10b981;box-shadow:0 0 20px #10b9814d}.dark-task-checkbox.checked{color:#fff;background:linear-gradient(135deg,#10b981 0%,#059669 100%);border-color:#10b981;box-shadow:0 0 20px #10b98166}.dark-task-body{flex:1;min-width:0}.dark-task-text{color:#f8fafc;word-wrap:break-word;margin-bottom:.75rem;font-size:1.125rem;font-weight:400;line-height:1.6;transition:all .3s}.dark-task-text.completed{color:#64748b;opacity:.7;text-decoration:line-through}.dark-task-meta{flex-direction:column;gap:.5rem;display:flex}.dark-task-date{color:#64748b;font-size:.875rem;font-weight:400}.dark-task-completed{color:#10b981;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;display:flex}.dark-task-actions{opacity:0;gap:.75rem;transition:all .3s;display:flex}.dark-task-item:hover .dark-task-actions{opacity:1}.dark-action-btn{cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:none;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.dark-edit-btn{color:#3b82f6;background:#3b82f61a;border:1px solid #3b82f633}.dark-edit-btn:hover{background:#3b82f633;transform:translateY(-2px);box-shadow:0 8px 20px #3b82f64d}.dark-delete-btn{color:#ef4444;background:#ef44441a;border:1px solid #ef444433}.dark-delete-btn:hover{background:#ef444433;transform:translateY(-2px);box-shadow:0 8px 20px #ef44444d}.dark-empty-state{text-align:center;color:#64748b;padding:5rem 2rem}.dark-empty-icon{color:#475569;opacity:.7;margin-bottom:1.5rem}.dark-empty-state h3{color:#94a3b8;margin-bottom:.75rem;font-size:1.5rem;font-weight:600}.dark-empty-state p{opacity:.8;font-size:1rem;line-height:1.6}.dark-actions-section{text-align:center;margin-top:3rem}.dark-clear-btn{color:#ef4444;cursor:pointer;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ef44441a;border:1px solid #ef444433;border-radius:16px;align-items:center;gap:.75rem;padding:1rem 2rem;font-size:1rem;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex}.dark-clear-btn:hover{background:#ef444433;transform:translateY(-3px);box-shadow:0 15px 35px #ef44444d}.dark-sidebar{flex-direction:column;gap:2rem;height:fit-content;display:flex;position:sticky;top:120px}.dark-sidebar>div{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0f172acc;border:1px solid #ffffff1a;border-radius:24px;padding:2rem;box-shadow:0 20px 40px #0003}.dark-sidebar-title{color:#f8fafc;align-items:center;gap:.75rem;margin-bottom:1.5rem;font-size:1.125rem;font-weight:600;display:flex}.dark-sidebar-title svg{color:#10b981}.dark-progress-circle{margin-bottom:2rem}.dark-progress-svg{width:120px;height:120px;margin:0 auto;display:block}.dark-progress-text{fill:#10b981;text-shadow:0 0 10px #10b9814d;font-size:1.25rem;font-weight:700}.dark-progress-stats{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.dark-progress-stat{text-align:center;background:#10b9810d;border:1px solid #10b9811a;border-radius:16px;padding:1rem}.dark-progress-stat-number{color:#10b981;text-shadow:0 0 10px #10b9814d;font-size:1.5rem;font-weight:700;display:block}.dark-progress-stat-label{color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem;font-size:.875rem;font-weight:500}.dark-quick-stats{grid-template-columns:1fr 1fr;gap:1.5rem;display:grid}.dark-quick-stat{text-align:center;background:#3b82f60d;border:1px solid #3b82f61a;border-radius:16px;padding:1.5rem;transition:all .3s}.dark-quick-stat:hover{transform:translateY(-2px);box-shadow:0 10px 25px #3b82f61a}.dark-quick-stat-number{color:#3b82f6;text-shadow:0 0 10px #3b82f64d;font-size:1.75rem;font-weight:700;display:block}.dark-quick-stat-label{color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-top:.5rem;font-size:.875rem;font-weight:500}.dark-tips-list{flex-direction:column;gap:1.5rem;display:flex}.dark-tip-item{background:#a855f70d;border:1px solid #a855f71a;border-radius:16px;align-items:flex-start;gap:1rem;padding:1.5rem;transition:all .3s;display:flex}.dark-tip-item:hover{border-color:#a855f733;transform:translate(4px)}.dark-tip-icon{flex-shrink:0;margin-top:.25rem;font-size:1.5rem}.dark-tip-content h4{color:#a855f7;margin-bottom:.5rem;font-size:1rem;font-weight:600}.dark-tip-content p{color:#94a3b8;font-size:.875rem;line-height:1.6}.dark-modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#000c;justify-content:center;align-items:center;width:100%;height:100%;animation:.3s cubic-bezier(.4,0,.2,1) fadeIn;display:flex;position:fixed;top:0;left:0}.dark-modal{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0f172af2;border:1px solid #ffffff1a;border-radius:24px;width:90%;max-width:500px;animation:.4s cubic-bezier(.4,0,.2,1) slideUp;overflow:hidden;box-shadow:0 25px 50px #00000080}.dark-modal-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:2rem;display:flex}.dark-modal-header h3{color:#f8fafc;font-size:1.25rem;font-weight:600}.dark-modal-close{cursor:pointer;color:#ef4444;background:#ef44441a;border:1px solid #ef444433;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;transition:all .3s;display:flex}.dark-modal-close:hover{background:#ef444433;transform:scale(1.1)}.dark-modal-body{padding:2rem}.dark-modal-input{color:#f8fafc;background:#1e293bcc;border:1px solid #ffffff1a;border-radius:16px;outline:none;width:100%;padding:1rem 1.5rem;font-size:1rem;transition:all .3s}.dark-modal-input:focus{border-color:#10b98180;box-shadow:0 0 0 3px #10b9811a}.dark-modal-input::placeholder{color:#64748b}.dark-delete-content{text-align:center}.dark-delete-icon{color:#ef4444;margin-bottom:1.5rem}.dark-delete-message{color:#f8fafc;margin-bottom:1rem;font-size:1.125rem;font-weight:500}.dark-delete-warning{color:#94a3b8;font-size:.875rem;line-height:1.6}.dark-modal-footer{border-top:1px solid #ffffff1a;justify-content:flex-end;gap:1rem;padding:2rem;display:flex}.dark-btn-secondary{color:#94a3b8;cursor:pointer;background:#47556933;border:1px solid #4755694d;border-radius:12px;padding:.875rem 1.75rem;font-size:.925rem;font-weight:500;transition:all .3s}.dark-btn-secondary:hover{background:#4755694d;transform:translateY(-2px)}.dark-btn-primary,.btn-primary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#10b981 0%,#059669 100%);border:none;border-radius:12px;padding:.875rem 1.75rem;font-size:.925rem;font-weight:500;transition:all .3s;box-shadow:0 8px 20px #10b9814d}.dark-btn-primary:hover,.btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 35px #10b98166}.dark-btn-danger{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);border:none;border-radius:12px;padding:.875rem 1.75rem;font-size:.925rem;font-weight:500;transition:all .3s;box-shadow:0 8px 20px #ef44444d}.dark-btn-danger:hover{transform:translateY(-3px);box-shadow:0 15px 35px #ef444466}.notification{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:1001;color:#f8fafc;background:#0f172af2;border:1px solid #ffffff1a;border-radius:16px;align-items:center;gap:1rem;max-width:350px;padding:1.25rem 1.75rem;animation:.4s cubic-bezier(.4,0,.2,1) slideInRight;display:flex;position:fixed;top:30px;right:30px;box-shadow:0 20px 40px #0000004d}.notification-success{border-left:4px solid #10b981}.notification-success svg{color:#10b981}.notification-info{border-left:4px solid #3b82f6}.notification-info svg{color:#3b82f6}@keyframes slideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media (max-width:1200px){.dark-main-content{grid-template-columns:1fr 320px;gap:2rem}}@media (max-width:991px){.dark-main-content{grid-template-columns:1fr;gap:2rem}.dark-sidebar{display:none}}@media (max-width:768px){.dark-header{padding:1.5rem}.dark-header-content{flex-direction:row;gap:1rem}.dark-header-left{gap:1rem}.dark-logo h1{font-size:1.5rem}.dark-header-stats{display:none}.dark-stat-card{padding:.75rem 1rem}.dark-main-content{grid-template-columns:1fr;gap:1.5rem;padding:1.5rem}.dark-filter-tabs{flex-direction:row;gap:.5rem;padding:.5rem;overflow-x:auto}.dark-filter-btn{flex:none;min-width:120px;padding:.75rem 1rem;font-size:.875rem}.dark-task-content{flex-direction:row;align-items:flex-start;gap:1rem}.dark-task-actions{opacity:1;margin-left:auto}.dark-sidebar{display:none}.dark-sidebar>div{min-width:unset}.dark-progress-stats,.dark-quick-stats{grid-template-columns:1fr 1fr}.dark-input-section{margin-bottom:2rem}.dark-input-container{padding:.75rem}.dark-task-input{padding:.75rem;font-size:1rem}.dark-add-btn{width:48px;height:48px}}@media (max-width:480px){.dark-header{padding:1rem}.dark-header-content{gap:.75rem}.dark-back-btn{padding:.5rem}.dark-logo h1{font-size:1.25rem}.dark-main-content{padding:1rem}.dark-input-container{flex-direction:row;gap:.75rem;padding:.5rem}.dark-add-btn{flex-shrink:0;width:44px;height:44px}.dark-task-input{padding:.5rem .75rem;font-size:.95rem}.dark-filter-tabs{gap:.25rem;padding:.5rem}.dark-filter-btn{min-width:100px;padding:.5rem .75rem;font-size:.8rem}.dark-filter-count{padding:.2rem .4rem;font-size:.7rem}.dark-task-item{padding:1rem}.dark-task-content{gap:.75rem}.dark-task-checkbox{width:24px;height:24px}.dark-task-text{margin-bottom:.5rem;font-size:1rem}.dark-task-actions{gap:.5rem}.dark-action-btn{width:32px;height:32px}.dark-modal{width:calc(100% - 2rem);margin:1rem}.dark-modal-header,.dark-modal-body,.dark-modal-footer{padding:1.5rem}.notification{max-width:none;padding:1rem;font-size:.9rem;left:1rem;right:1rem}.dark-empty-state{padding:3rem 1rem}.dark-empty-state h3{font-size:1.25rem}.dark-empty-state p{font-size:.9rem}}@media (max-width:360px){.dark-header,.dark-main-content{padding:.75rem}.dark-filter-btn{min-width:90px;font-size:.75rem}.dark-task-text{font-size:.95rem}.dark-input-container{padding:.5rem}.dark-add-btn{width:40px;height:40px}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0f172a80}::-webkit-scrollbar-thumb{background:#10b9814d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#10b98180}