*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}.container{max-width:600px;margin:0 auto;padding:40px 20px}.header{text-align:center;color:#fff;margin-bottom:40px}.header h1{font-size:3rem;font-weight:300;margin-bottom:10px}.header p{opacity:.9;font-size:1.1rem}.card{background:#fff;border-radius:12px;box-shadow:0 10px 40px #0000001a;padding:30px}.add-todo-form{display:flex;gap:10px;margin-bottom:30px}.add-todo-form input{flex:1;padding:14px 18px;border:2px solid #e0e0e0;border-radius:8px;font-size:16px;transition:border-color .3s}.add-todo-form input:focus{outline:none;border-color:#667eea}.add-todo-form button{padding:14px 28px;background:#667eea;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background .3s}.add-todo-form button:hover{background:#5568d3}.add-todo-form button:disabled{background:#ccc;cursor:not-allowed}.todo-list{list-style:none}.todo-item{display:flex;align-items:center;gap:15px;padding:16px;border-bottom:1px solid #f0f0f0;transition:background .2s}.todo-item:hover{background:#f8f9fa}.todo-item:last-child{border-bottom:none}.todo-checkbox{width:22px;height:22px;cursor:pointer;accent-color:#667eea}.todo-text{flex:1;font-size:16px;color:#333;transition:all .3s}.todo-text.completed{color:#999;text-decoration:line-through}.delete-btn{padding:8px 16px;background:#ff4757;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;transition:background .3s}.delete-btn:hover{background:#ee5a6f}.empty-state{text-align:center;padding:40px 20px;color:#999}.empty-state svg{width:80px;height:80px;margin-bottom:20px;opacity:.3}.loading{text-align:center;padding:40px;color:#999}.error{background:#ffe0e0;color:#d32f2f;padding:12px 16px;border-radius:8px;margin-bottom:20px}@media(max-width:480px){.add-todo-form{flex-direction:column}.add-todo-form button{width:100%}}.auth-container{max-width:400px;margin:0 auto;padding:40px 20px}.auth-card{background:#fff;border-radius:12px;box-shadow:0 10px 40px #0000001a;padding:40px 30px}.auth-card h2{text-align:center;color:#667eea;margin-bottom:30px;font-size:2rem}.auth-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-weight:600;color:#333;font-size:14px}.form-group input{padding:12px 16px;border:2px solid #e0e0e0;border-radius:8px;font-size:16px;transition:border-color .3s}.form-group input:focus{outline:none;border-color:#667eea}.form-group input:disabled{background:#f5f5f5;cursor:not-allowed}.auth-submit-btn{padding:14px;background:#667eea;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background .3s;margin-top:10px}.auth-submit-btn:hover:not(:disabled){background:#5568d3}.auth-submit-btn:disabled{background:#ccc;cursor:not-allowed}.auth-toggle{text-align:center;margin-top:20px;color:#666;font-size:14px}.toggle-btn{background:none;border:none;color:#667eea;font-weight:600;cursor:pointer;text-decoration:underline;padding:0}.toggle-btn:hover:not(:disabled){color:#5568d3}.toggle-btn:disabled{opacity:.5;cursor:not-allowed}.user-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:20px;border-bottom:2px solid #f0f0f0}.user-info-text{color:#666;font-size:14px}.user-info-text strong{color:#333;font-weight:600}.logout-btn{padding:8px 16px;background:#ff4757;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;transition:background .3s}.logout-btn:hover{background:#ee5a6f}