:root{--primary: #2563eb;--dark: #0a2540;--light: #f4f8ff;--gray: #475569;--danger: #ef4444;--success: #10b981;--radius: 8px;--shadow: 0 10px 30px rgba(0, 64, 128, .12);--light-border: #e6efff}*{padding:0;margin:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{background:linear-gradient(135deg,#f4f8ff,#fff);color:var(--dark);line-height:1.5;min-height:100vh}.App{background:linear-gradient(135deg,#f4f8ff,#fff);min-height:100vh;padding:2rem 0}.container{max-width:700px;margin:0 auto;padding:0 1rem}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2.5rem;background:#fff;padding:1.5rem 2rem;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--light-border)}h1{color:var(--dark);font-size:2.2rem;font-weight:700;margin:0}.user-info{display:flex;align-items:center;gap:1.5rem}.username{color:var(--gray);font-size:.95rem;font-weight:500}.logout-btn{background-color:var(--danger);color:#fff;border:none;padding:.7rem 1.4rem;border-radius:var(--radius);cursor:pointer;font-weight:600;transition:all .2s;font-size:.9rem;box-shadow:0 2px 8px #ef444433}.logout-btn:hover{background-color:#dc2626;transform:translateY(-2px);box-shadow:0 4px 12px #ef44444d}.top{display:flex;gap:1rem;margin-bottom:2.5rem;background:#fff;padding:1.5rem;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--light-border)}input{flex:1;border:1px solid #c7d9ff;outline:none;padding:.9rem 1rem;border-radius:var(--radius);font-size:1rem;transition:all .2s;background:#fff;color:var(--dark)}input::placeholder{color:#a0aec0}input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #2563eb26}.add{background-color:var(--primary);color:#fff;border:none;padding:.9rem 1.8rem;border-radius:var(--radius);cursor:pointer;font-weight:600;transition:all .2s;font-size:1rem;box-shadow:0 4px 12px #2563eb4d}.add:hover{background-color:#1e4fd8;transform:translateY(-2px);box-shadow:0 6px 16px #2563eb66}.add:active{transform:translateY(0)}.list{display:flex;flex-direction:column;gap:1rem}.todo{position:relative;background-color:#fff;padding:1.2rem 1.4rem;border-radius:10px;box-shadow:0 8px 24px #0040801f;display:flex;justify-content:space-between;align-items:center;transition:transform .2s,box-shadow .2s;border:1px solid #e6efff;border-left:4px solid #2563eb}.todo:hover{transform:translateY(-2px);box-shadow:0 12px 30px #00408029;border-left-color:#1e4fd8}.text{color:#0a2540;font-size:1.05rem;font-weight:500;flex:1;padding-right:1rem;word-break:break-word}.icons{display:flex;gap:.5rem}.icon{cursor:pointer;width:32px;height:32px;font-size:1rem;display:flex;align-items:center;justify-content:center;border-radius:6px;background-color:#f8fafc;transition:background-color .2s,color .2s,box-shadow .2s}.icon.update{color:#0d9488}.icon.update:hover{background-color:#0d9488;color:#fff;box-shadow:0 4px 10px #0d948859}.icon.delete{color:#ef4444}.icon.delete:hover{background-color:#ef4444;color:#fff;box-shadow:0 4px 10px #ef444459}.auth-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#f3f7ff;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.auth-box{background:#fff;padding:40px;border-radius:12px;box-shadow:0 12px 32px #1e40af1f;width:100%;max-width:400px;border:1px solid #e2ecff}.auth-box h2{text-align:center;color:#0f2a44;margin-bottom:30px;font-size:28px;font-weight:700}.error-message{background-color:#ffe9ec;color:#b00020;padding:12px;border-radius:6px;margin-bottom:20px;border:1px solid #ffccd5;text-align:center;font-size:14px}.form-group label{display:block;margin-bottom:8px;color:#0f2a44;font-weight:600;font-size:14px}.form-group input{width:100%;padding:12px;border:1px solid #c6d6ff;border-radius:6px;font-size:14px;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.auth-box button[type=submit]{width:100%;padding:12px;background:#2563eb;color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:background .2s,transform .1s,box-shadow .2s}.auth-box button[type=submit]:hover:not(:disabled){background:#1e4fd8;transform:translateY(-1px);box-shadow:0 6px 18px #2563eb59}.auth-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#f4f8ff;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.auth-box{background:#fff;padding:40px;border-radius:12px;box-shadow:0 10px 30px #0040801f;width:100%;max-width:400px;border:1px solid #e6efff}.auth-box h2{text-align:center;color:#0a2540;margin-bottom:30px;font-size:28px;font-weight:700}.error-message{background-color:#ffecec;color:#b00020;padding:12px;border-radius:6px;margin-bottom:20px;border:1px solid #ffccd5;text-align:center;font-size:14px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;color:#0a2540;font-weight:600;font-size:14px}.form-group input{width:100%;padding:12px;border:1px solid #c7d9ff;border-radius:6px;font-size:14px;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb26}.auth-box button[type=submit]{width:100%;padding:12px;background:#2563eb;color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:background .2s,box-shadow .2s,transform .1s}.auth-box button[type=submit]:hover:not(:disabled){background:#1e4fd8;transform:translateY(-1px);box-shadow:0 6px 16px #2563eb4d}.auth-box button[type=submit]:disabled{opacity:.6;cursor:not-allowed}.switch-auth{text-align:center;margin-top:22px;color:#475569;font-size:14px}.switch-btn{background:none;border:none;color:#2563eb;cursor:pointer;font-weight:600;padding:0 4px;transition:color .2s}.switch-btn:hover{color:#1e4fd8;text-decoration:underline}