.App{min-height:100vh;padding:20px}.container{max-width:1200px;margin:0 auto;background:#fff;border-radius:20px;padding:30px;box-shadow:0 20px 60px #0000004d;animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.auth-container{max-width:400px;margin:50px auto;background:#fff;border-radius:20px;padding:40px;box-shadow:0 20px 60px #0000004d;animation:slideUp .5s ease-in}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.auth-container h2{text-align:center;margin-bottom:30px;color:#333;font-size:28px;font-weight:600}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;color:#555;font-weight:500;font-size:14px}.form-group input,.form-group select{width:100%;padding:12px 15px;border:2px solid #e0e0e0;border-radius:10px;font-size:16px;transition:all .3s;font-family:inherit}.form-group input:focus,.form-group select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}button{width:100%;padding:12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;font-family:inherit}button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}button:active{transform:translateY(0)}button:disabled{opacity:.6;cursor:not-allowed}.auth-link{text-align:center;margin-top:20px;color:#666}.auth-link a{color:#667eea;text-decoration:none;font-weight:600;transition:color .3s}.auth-link a:hover{color:#764ba2;text-decoration:underline}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:15px;padding-bottom:20px;border-bottom:2px solid #f0f0f0}.header h1{color:#333;font-size:32px;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.user-info{display:flex;align-items:center;gap:15px;background:#f5f5f5;padding:10px 20px;border-radius:50px}.role-badge{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;background:#667eea;color:#fff;text-transform:uppercase}.role-badge.admin{background:#f44336}.logout-btn{padding:8px 20px;background:#f44336;width:auto;font-size:14px}.logout-btn:hover{background:#d32f2f;box-shadow:0 5px 15px #f443364d}.todo-form{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);padding:25px;border-radius:15px;margin-bottom:30px}.todo-form input,.todo-form textarea{width:100%;padding:12px 15px;margin-bottom:15px;border:2px solid transparent;border-radius:10px;font-size:16px;transition:all .3s;font-family:inherit}.todo-form input:focus,.todo-form textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.todo-form textarea{min-height:100px;resize:vertical}.todo-form button{width:auto;padding:12px 30px;background:linear-gradient(135deg,#667eea,#764ba2)}.todo-list{display:grid;gap:20px}.todo-item{background:#fff;border:2px solid #e0e0e0;border-radius:15px;padding:20px;transition:all .3s;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.todo-item:hover{transform:translateY(-3px);box-shadow:0 10px 30px #0000001a;border-color:#667eea}.todo-item.completed{opacity:.7;background:#f9f9f9;border-color:#4caf50}.todo-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:15px;flex-wrap:wrap;gap:10px}.todo-title{font-size:20px;font-weight:600;color:#333;flex:1}.todo-title input{font-size:18px;font-weight:600;padding:8px 12px;border:2px solid #e0e0e0;border-radius:8px;width:100%}.todo-description{color:#666;margin-bottom:15px;line-height:1.6}.todo-description textarea{width:100%;padding:10px;border:2px solid #e0e0e0;border-radius:8px;resize:vertical;font-family:inherit}.todo-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.todo-actions{display:flex;gap:10px}.edit-btn,.delete-btn,.save-btn,.cancel-btn{padding:6px 15px;font-size:14px;width:auto;border-radius:8px}.edit-btn{background:#4caf50}.edit-btn:hover{background:#45a049}.delete-btn{background:#f44336}.delete-btn:hover{background:#da190b}.save-btn{background:#2196f3}.save-btn:hover{background:#0b7dda}.cancel-btn{background:#9e9e9e}.cancel-btn:hover{background:#757575}.complete-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer}.complete-checkbox input{width:20px;height:20px;cursor:pointer}.complete-checkbox span{font-size:14px;color:#666}.user-email{font-size:12px;color:#999;margin-top:10px;padding:8px;background:#f5f5f5;border-radius:8px}.loading{text-align:center;padding:60px;font-size:18px;color:#666}.loading:after{content:"...";animation:dots 1.5s steps(4,end) infinite}@keyframes dots{0%,20%{content:"."}40%{content:".."}60%,to{content:"..."}}.error{background:#ffebee;color:#c62828;padding:12px 20px;border-radius:10px;margin-bottom:20px;text-align:center;border-left:4px solid #c62828;animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.success{background:#e8f5e9;color:#2e7d32;padding:12px 20px;border-radius:10px;margin-bottom:20px;text-align:center;border-left:4px solid #2e7d32}.stats{display:flex;gap:20px;justify-content:center;margin-bottom:20px;padding:15px;background:#f5f5f5;border-radius:10px}.stat-card{text-align:center;flex:1}.stat-number{font-size:24px;font-weight:700;color:#667eea}.stat-label{font-size:12px;color:#666;margin-top:5px}@media (max-width: 768px){.container{padding:20px}.header{flex-direction:column;align-items:stretch}.todo-header{flex-direction:column}.todo-actions{justify-content:flex-end}.stats{flex-direction:column;gap:10px}.auth-container{margin:20px;padding:30px 20px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}#root{min-height:100vh}