:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark light;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}body{margin:0;padding:0;background:linear-gradient(135deg,#c3ecf9,#e2f0cb);font-family:Poppins,sans-serif;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;transition:background .3s ease}body.dark-mode{background:linear-gradient(135deg,#1e3a5f,#1a2a3a)}.app{margin-top:50px;background:#fff;padding:30px 40px;border-radius:16px;box-shadow:0 8px 24px #0003;width:480px;transition:all .3s ease;color:#2f3640}.app.dark-mode{background:#1a1a2e;color:#e4e4e4;box-shadow:0 8px 24px #0006}.app-header{display:flex;justify-content:space-between;align-items:center}h1{text-align:center;font-size:36px;color:#2f3640;margin-bottom:30px;transition:color .3s ease}.dark-mode h1{color:#e4e4e4}.theme-toggle{background:none;border:none;color:#333;font-size:24px;cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.dark-mode .theme-toggle{color:#f1c40f}.theme-toggle:hover{background:#0000001a}.dark-mode .theme-toggle:hover{background:#ffffff1a}.todo-input{display:flex;margin-bottom:25px}input,.edit-input{flex:1;padding:14px 16px;font-size:18px;border:2px solid #ccc;border-radius:10px 0 0 10px;outline:none;transition:all .3s ease;color:#2f3640;background:#fff;height:51px;box-sizing:border-box}.dark-mode input,.dark-mode .edit-input{background:#2c3e50;border-color:#4a6484;color:#e4e4e4}input:focus,.edit-input:focus{border-color:#00a8ff}.dark-mode input:focus,.dark-mode .edit-input:focus{border-color:#3498db}.select-wrapper{position:relative;display:flex;align-items:center}.dropdown-icon{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:24px;color:#666}.dark-mode .dropdown-icon{color:#999}.priority-dropdown,.priority-edit-dropdown{background-color:#fff;color:#2f3640;padding:14px 32px 14px 18px;height:51px;border:2px solid #ccc;border-left:none;border-radius:0;font-size:15px;font-weight:500;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;align-items:center;gap:8px;min-width:120px;transition:all .3s ease;box-sizing:border-box}.dark-mode .priority-dropdown,.dark-mode .priority-edit-dropdown{background-color:#2c3e50;border-color:#4a6484;color:#e4e4e4}.priority-dropdown:focus,.priority-edit-dropdown:focus{box-shadow:0 0 0 2px #00a8ff}.dark-mode .priority-dropdown:focus,.dark-mode .priority-edit-dropdown:focus{box-shadow:0 0 0 2px #3498db}.add-btn{display:flex;align-items:center;justify-content:center;padding:14px 24px;font-size:16px;background-color:#00a8ff;color:#fff;border:none;border-radius:0 10px 10px 0;cursor:pointer;transition:all .3s ease;height:51px;box-sizing:border-box}.dark-mode .add-btn{background-color:#3498db}.add-btn:hover{background-color:#0097e6;transform:scale(1.05)}.dark-mode .add-btn:hover{background-color:#2980b9}.filters{display:flex;flex-direction:column;align-items:center;gap:15px;margin-bottom:20px;width:100%}.status-filters{display:flex;justify-content:center;align-items:center;gap:16px;width:100%}.status-filters span{display:flex;align-items:center;height:38px;margin-right:4px}.priority-filters{display:flex;justify-content:center;align-items:center;gap:8px;width:100%}.priority-filters span{display:flex;align-items:center;height:38px;margin-right:4px}.filters button{padding:8px 12px;font-size:16px;border-radius:8px;border:none;background:#f0f0f0;color:#333;box-shadow:0 2px 6px #0000001a;cursor:pointer;transition:all .25s ease;white-space:nowrap}.dark-mode .filters button{background:#2c3e50;color:#e4e4e4;box-shadow:0 2px 6px #0000004d}.filters button:hover{background:#d6eaff;color:#0077c2}.dark-mode .filters button:hover{background:#34495e;color:#3498db}.filters button.active{background:#0077c2;color:#fff;font-weight:500}.dark-mode .filters button.active{background:#3498db}.filters button.active.high{background:#e74c3c}.filters button.active.medium{background:#f39c12}.filters button.active.low{background:#2ecc71}.todo-list{max-height:60vh;overflow-y:auto;padding-right:5px}.todo-item{background-color:#f7f9fc;margin-bottom:16px;padding:14px 18px;border-radius:12px;display:flex;justify-content:space-between;align-items:center;font-size:18px;color:#2f3640;font-weight:500;transition:all .3s ease;box-shadow:0 2px 5px #0000000d}.dark-mode .todo-item{background-color:#2c3e50;color:#fff;box-shadow:0 2px 5px #0003}.todo-item:hover{background-color:#e1f1ff;transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.dark-mode .todo-item:hover{background-color:#34495e;box-shadow:0 4px 8px #0000004d}.left-content{display:flex;align-items:center;flex:1;cursor:pointer}.checkbox-wrapper{position:relative;width:24px;height:24px;margin-right:12px}.checkbox-wrapper input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:0;left:0;height:24px;width:24px;background-color:transparent;border:2px solid #ccc;border-radius:5px;cursor:pointer}.dark-mode .checkmark{border-color:#4a6484}.todo-text{color:#2f3640;margin-left:10px;transition:all .3s ease;position:relative;display:inline-block}.dark-mode .todo-text{color:#fff}.todo-item.completed .todo-text{text-decoration:line-through;color:#9ea7ad}.dark-mode .todo-item.completed .todo-text{color:#95a5a6}@keyframes strike-through{0%{width:0}to{width:100%}}.completed .todo-text:after{content:" ";position:absolute;top:50%;left:0;width:100%;height:2px;background:#95a5a6;animation:strike-through .3s ease-in-out forwards;z-index:1}.dark-mode .completed .todo-text:after{background:#7f8c8d}.right-actions{display:flex;align-items:center;gap:12px}.priority-icon{margin-right:8px;display:flex;align-items:center}.edit-btn,.delete-btn,.save-btn,.cancel-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;padding:5px;color:#555;border-radius:5px;transition:all .2s ease}.dark-mode .edit-btn,.dark-mode .delete-btn,.dark-mode .save-btn,.dark-mode .cancel-btn{color:#bdc3c7}.edit-btn,.dark-mode .edit-btn{color:#3498db}.save-btn,.dark-mode .save-btn{color:#2ecc71}.cancel-btn,.dark-mode .cancel-btn{color:#e74c3c}.edit-btn:hover,.delete-btn:hover,.save-btn:hover,.cancel-btn:hover{transform:scale(1.2);background-color:#0000000d}.dark-mode .edit-btn:hover,.dark-mode .delete-btn:hover,.dark-mode .save-btn:hover,.dark-mode .cancel-btn:hover{background-color:#ffffff1a}.edit-mode{display:flex;width:100%;gap:10px}.edit-actions{display:flex;gap:8px}.priority-high .todo-text{border-left:4px solid #e74c3c;padding-left:8px}.priority-medium .todo-text{border-left:4px solid #f39c12;padding-left:8px}.priority-low .todo-text{border-left:4px solid #2ecc71;padding-left:8px}.empty-state{text-align:center;padding:30px;color:#95a5a6;font-style:italic;background-color:#f7f7f7;border-radius:12px;box-shadow:inset 0 0 10px #0000000d}.dark-mode .empty-state{background-color:#2c3e50;color:#bdc3c7;box-shadow:inset 0 0 10px #0003}.stats{display:flex;justify-content:center;margin:10px 0;padding:5px;font-size:14px;color:#777;background-color:#0000000d;border-radius:8px;font-weight:500}.dark-mode .stats{color:#bdc3c7;background-color:#ffffff0d}.celebration-container{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;pointer-events:none;z-index:1000}.celebration-message{background:linear-gradient(135deg,#6e48aa,#9d50bb);color:#fff;padding:16px 30px;border-radius:50px;font-size:24px;font-weight:700;box-shadow:0 4px 20px #00000040;text-align:center;max-width:80%}.dark-mode .celebration-message{background:linear-gradient(135deg,#4b6cb7,#182848);box-shadow:0 4px 20px #00000080}.todo-list::-webkit-scrollbar{width:8px}.todo-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.dark-mode .todo-list::-webkit-scrollbar-track{background:#2c3e50}.todo-list::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:10px}.dark-mode .todo-list::-webkit-scrollbar-thumb{background:#4a6484}.todo-list::-webkit-scrollbar-thumb:hover{background:#a5a5a5}.dark-mode .todo-list::-webkit-scrollbar-thumb:hover{background:#7f8c8d}.auth-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.auth-form-container{background:#fff;border-radius:16px;padding:40px;width:100%;max-width:450px;box-shadow:0 8px 24px #0003;transition:all .3s ease}.dark-mode .auth-form-container{background:#1a1a2e;color:#e4e4e4;box-shadow:0 8px 24px #0006}.auth-form-container h2{text-align:center;margin-bottom:30px;color:#2f3640}.dark-mode .auth-form-container h2{color:#e4e4e4}.auth-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-weight:500;font-size:14px;color:#555}.dark-mode .form-group label{color:#bdc3c7}.form-group input{padding:14px;border:2px solid #ccc;border-radius:8px;font-size:16px;transition:border .3s ease}.dark-mode .form-group input{background:#2c3e50;border-color:#4a6484;color:#e4e4e4}.form-group input:focus{border-color:#00a8ff;outline:none}.dark-mode .form-group input:focus{border-color:#3498db}.auth-button{padding:14px;background-color:#00a8ff;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease;margin-top:10px}.dark-mode .auth-button{background-color:#3498db}.auth-button:hover{background-color:#0097e6;transform:translateY(-2px)}.dark-mode .auth-button:hover{background-color:#2980b9}.auth-button:disabled{background-color:#95a5a6;cursor:not-allowed;transform:none}.auth-error{background-color:#ffebee;color:#e53935;padding:12px;border-radius:8px;margin-bottom:20px;font-size:14px;text-align:center}.dark-mode .auth-error{background-color:#e5393533;color:#ff6b6b}.auth-link{text-align:center;margin-top:25px;font-size:14px}.auth-link a{color:#00a8ff;font-weight:500;text-decoration:none;transition:color .3s ease}.dark-mode .auth-link a{color:#3498db}.auth-link a:hover{color:#0097e6;text-decoration:underline}.dark-mode .auth-link a:hover{color:#2980b9}.server-startup-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#fffffff2;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;border-radius:16px;z-index:1000}.dark-mode .server-startup-overlay{background:#1a1a2ef2}.server-startup-content{text-align:center;padding:30px 20px;max-width:300px}.startup-spinner{width:50px;height:50px;margin:0 auto 20px;border:4px solid #f3f3f3;border-top:4px solid #00a8ff;border-radius:50%;animation:spin 1s linear infinite}.dark-mode .startup-spinner{border-color:#4a6484;border-top-color:#3498db}.server-startup-content h3{color:#2f3640;font-size:18px;margin-bottom:10px;font-weight:600}.dark-mode .server-startup-content h3{color:#e4e4e4}.server-startup-content p{color:#666;font-size:14px;margin-bottom:15px;line-height:1.4}.dark-mode .server-startup-content p{color:#bdc3c7}.startup-tips{background:#00a8ff1a;padding:10px;border-radius:8px;border-left:3px solid #00a8ff}.dark-mode .startup-tips{background:#3498db26;border-left-color:#3498db}.startup-tips small{color:#0077c2;font-size:12px;font-weight:500;display:block}.dark-mode .startup-tips small{color:#3498db}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.auth-button:disabled{background-color:#95a5a6;cursor:not-allowed;transform:none;opacity:.7}.dark-mode .auth-button:disabled{background-color:#7f8c8d}.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.header-controls{display:flex;align-items:center;gap:15px}.user-menu{display:flex;flex-direction:row;align-items:center;gap:8px;background-color:#0000000d;padding:8px 12px;border-radius:10px;font-size:14px;font-weight:500}.dark-mode .user-menu{background-color:#ffffff1a}.username-icon{display:flex;align-items:center;justify-content:center;font-size:16px;color:#2f3640}.dark-mode .username-icon{color:#e4e4e4}.logout-btn{background:none;border:none;color:#e74c3c;cursor:pointer;padding:6px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .2s ease}.logout-btn:hover{background-color:#e74c3c1a;transform:scale(1.1)}@media (max-width: 1199px){.app{width:450px;padding:25px 35px}}@media (max-width: 991px){body{padding:20px;align-items:center}.app{width:90%;max-width:600px;margin-top:20px;padding:25px 30px}h1{font-size:32px;margin-bottom:25px}.filters{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px}.status-filters,.priority-filters{width:auto;flex-wrap:wrap;justify-content:center;gap:8px}.status-filters span,.priority-filters span{margin-right:2px;font-size:14px}.filters button{padding:6px 10px;font-size:14px}}@media (max-width: 767px){body{padding:15px;margin:0}.app{width:100%;max-width:none;margin-top:10px;padding:20px;border-radius:12px}h1{font-size:28px;margin-bottom:20px}.app-header{flex-direction:column;gap:15px;margin-bottom:20px;align-items:center}.header-controls{width:100%;justify-content:space-between}.user-menu{flex:none;justify-content:center;max-width:120px;min-width:100px;padding:6px 8px}.todo-input{flex-direction:column;gap:10px}input{border-radius:10px;border:2px solid #ccc;box-sizing:border-box;height:51px}.select-wrapper{width:100%}.priority-dropdown{width:100%;border-radius:10px;border:2px solid #ccc;height:51px;padding:14px 32px 14px 18px;box-sizing:border-box}.add-btn{border-radius:10px;padding:14px;width:100%;height:51px;box-sizing:border-box}.filters{flex-direction:column;gap:12px}.status-filters,.priority-filters{width:100%;justify-content:center;flex-wrap:wrap;gap:6px}.status-filters span,.priority-filters span{width:100%;text-align:center;margin-right:0;margin-bottom:5px;font-size:14px;font-weight:500}.filters button{padding:8px 12px;font-size:13px;min-width:60px}.todo-item{flex-direction:column;gap:10px;padding:16px}.left-content{width:100%;margin-bottom:5px}.right-actions{width:100%;justify-content:center;gap:15px}.edit-mode{flex-direction:column;gap:12px}.edit-input{border-radius:8px;margin-bottom:8px}.priority-edit-dropdown{width:100%;border-radius:8px;margin-bottom:8px}.edit-actions{justify-content:center;gap:15px}.todo-list{max-height:50vh}.celebration-message{font-size:20px;padding:14px 25px;margin:0 20px}}@media (max-width: 575px){.app{padding:18px}h1{font-size:26px;margin-bottom:18px}.filters button{padding:6px 8px;font-size:12px;min-width:50px}.status-filters,.priority-filters{gap:4px}.todo-item{padding:14px;font-size:16px}.edit-btn,.delete-btn,.save-btn,.cancel-btn{font-size:18px;padding:8px}}@media (max-width: 480px){body{padding:10px}.app{padding:15px;border-radius:10px}h1{font-size:24px;margin-bottom:15px}.app-header{gap:10px}.theme-toggle{font-size:20px;padding:6px}.user-menu{padding:6px 10px;font-size:12px;max-width:100px;min-width:90px;flex:none}input,.priority-dropdown,.add-btn{padding:12px;font-size:16px;height:48px;box-sizing:border-box}.priority-dropdown{padding:12px 28px 12px 16px}.filters{gap:8px}.status-filters span,.priority-filters span{font-size:12px;margin-bottom:3px}.filters button{padding:6px 8px;font-size:11px;min-width:45px}.todo-item{padding:12px;font-size:15px}.todo-text{font-size:15px}.checkbox-wrapper,.checkmark{width:20px;height:20px}.right-actions{gap:12px}.edit-btn,.delete-btn,.save-btn,.cancel-btn{font-size:16px;padding:6px}.celebration-message{font-size:18px;padding:12px 20px;margin:0 15px}.todo-list{max-height:45vh}.empty-state{padding:20px;font-size:14px}}@media (max-width: 319px){.app{padding:12px}h1{font-size:22px}.filters button{padding:4px 6px;font-size:10px;min-width:40px}.todo-item{padding:10px;font-size:14px}.celebration-message{font-size:16px;padding:10px 15px;margin:0 10px}}@media (max-width: 767px){.auth-container{padding:15px}.auth-form-container{padding:30px 25px;max-width:none;width:100%}.auth-form-container h2{font-size:24px;margin-bottom:25px}.form-group input,.auth-button{padding:12px;font-size:15px}}@media (max-width: 480px){.auth-container{padding:10px}.auth-form-container{padding:25px 20px}.auth-form-container h2{font-size:22px;margin-bottom:20px}.form-group{gap:6px}.form-group label{font-size:13px}.form-group input,.auth-button{padding:11px;font-size:14px}.auth-error{padding:10px;font-size:13px}.auth-link{font-size:13px;margin-top:20px}.server-startup-content{padding:25px 15px;max-width:280px}.startup-spinner{width:40px;height:40px;margin-bottom:15px}.server-startup-content h3{font-size:16px;margin-bottom:8px}.server-startup-content p{font-size:13px;margin-bottom:12px}.startup-tips{padding:8px}.startup-tips small{font-size:11px}}@media screen and (orientation: landscape) and (max-height: 500px){.app{margin-top:10px}.todo-list{max-height:30vh}.auth-container{align-items:flex-start;padding-top:10px}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.app{box-shadow:0 4px 12px #00000026}.dark-mode .app{box-shadow:0 4px 12px #0000004d}.todo-item{box-shadow:0 1px 3px #00000014}}@media (hover: none) and (pointer: coarse){.filters button,.edit-btn,.delete-btn,.save-btn,.cancel-btn,.theme-toggle,.logout-btn,.add-btn{min-height:44px;min-width:44px}.checkbox-wrapper{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:flex-start}input,.priority-dropdown{min-height:44px}}