*{margin:0;padding:0;box-sizing:border-box}body{font-family:-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-color:#f5f5f5;color:#333}#root{width:100%;min-height:100vh}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;position:relative;background:radial-gradient(circle at 20% 50%,rgba(240,147,251,.15) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(245,87,108,.15) 0%,transparent 50%),radial-gradient(circle at 40% 80%,rgba(168,237,234,.1) 0%,transparent 50%),linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);background-attachment:fixed;background-size:100% 100%}.login-card{background:#ffffff1a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:3rem 2.5rem;border-radius:24px;border:2px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #0000004d,0 2px 8px #0003,inset 0 1px 1px #ffffff1a;width:100%;max-width:450px;margin:0 auto;transition:transform .3s ease,box-shadow .3s ease}.login-card:hover{transform:translateY(-4px);box-shadow:0 12px 48px #0006,0 4px 12px #0000004d}.login-title{margin-top:0;margin-bottom:2rem;text-align:center;font-size:2rem;font-weight:700;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.3);background:linear-gradient(135deg,#f093fb,#f5576c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.login-form{display:flex;flex-direction:column;gap:1.5rem}.form-group{margin-bottom:0}.form-label{display:block;margin-bottom:.75rem;font-weight:600;color:#fff;font-size:.95rem;text-shadow:0 1px 3px rgba(0,0,0,.3)}.form-input{width:100%;padding:1rem;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.2);border-radius:12px;font-size:1rem;box-sizing:border-box;color:#fff;transition:all .3s ease;box-shadow:inset 0 2px 4px #0000001a}.form-input::placeholder{color:#ffffff80}.form-input:focus{outline:none;background:#ffffff26;border-color:#f093fb99;box-shadow:0 0 0 3px #f093fb33,inset 0 2px 4px #0000001a}.error-message{padding:1rem;margin-bottom:0;background:#ff6b6b33;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fcc;border:2px solid rgba(255,107,107,.4);border-radius:12px;font-size:.9rem;font-weight:500;box-shadow:0 4px 6px #0000001a}.login-button{width:100%;padding:1rem;background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;border:none;border-radius:12px;font-size:1.05rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #f093fb66,0 2px 6px #0003;margin-top:.5rem}.login-button:hover:not(.loading){transform:translateY(-2px);box-shadow:0 6px 20px #f093fb80,0 4px 10px #0000004d;background:linear-gradient(135deg,#f5576c,#f093fb)}.login-button:active:not(.loading){transform:translateY(0);box-shadow:0 2px 8px #f093fb66,0 1px 3px #0003}.login-button.loading{background:#fff3;cursor:not-allowed;opacity:.7;box-shadow:none}.form-input:-webkit-autofill,.form-input:-webkit-autofill:hover,.form-input:-webkit-autofill:focus{-webkit-text-fill-color:white;-webkit-box-shadow:0 0 0px 1000px rgba(255,255,255,.1) inset;transition:background-color 5000s ease-in-out 0s}.todo-item{display:flex;align-items:center;gap:1rem;padding:1.25rem;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;box-shadow:0 4px 6px #0000001a,0 1px 3px #00000014;cursor:default;transition:all .5s ease;border:1px solid rgba(255,255,255,.8)}.todo-item:hover{transform:translateY(-2px);box-shadow:0 8px 16px #00000026,0 4px 6px #0000001a;background:#fff}.todo-item.completed{opacity:.95;background:linear-gradient(135deg,#a8edea66,#9ae6b466);border:1px solid rgba(154,230,180,.7)}.todo-item.completed:hover{opacity:1;transform:translateY(-1px)}.todo-item.dragging{opacity:.8;transform:scale(1.01) translateY(-1px);box-shadow:0 10px 20px #0003}.drag-handle{cursor:grab;font-size:1.4rem;color:#a0aec0;-webkit-user-select:none;user-select:none;padding:0 .75rem 0 0;transition:color .5s ease,transform .5s ease}.drag-handle:hover{color:#4a5568;transform:scale(1.1)}.drag-handle:active{cursor:grabbing;color:#e53e3e}.todo-content{flex:1;cursor:pointer}.todo-title{margin:0 0 .25rem;font-size:1.1rem;font-weight:600;color:#2d3748}.todo-item.completed .todo-title{text-decoration:line-through;font-style:italic;color:#718096}.todo-description{margin:0;color:#718096;font-size:.9rem;line-height:1.5}.todo-actions{display:flex;gap:.5rem}.toggle-button,.delete-button{width:40px;height:40px;border:none;border-radius:50%;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:all .5s ease;box-shadow:0 3px 6px #00000026}.toggle-button{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.toggle-button:hover{transform:scale(1.1);box-shadow:0 6px 12px #f093fb80}.toggle-button.completed{background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;transform:scale(1.05)}.toggle-button.completed:hover{background:linear-gradient(135deg,#38a169,#2f855a);box-shadow:0 4px 8px #38a16980}.delete-button{background:linear-gradient(135deg,#ff6b6b,#ee5a6f);color:#fff}.delete-button:hover{transform:scale(1.1);box-shadow:0 6px 12px #ff6b6b80}.todo-metadata{margin-top:0;padding-top:0;border-top:none;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s ease-out,opacity .4s ease-in}.todo-metadata.expanded{margin-top:.75rem;padding-top:.75rem;border-top:1px solid #e2e8f0;max-height:200px;opacity:1}.todo-meta-item{margin:.5rem 0;display:flex;align-items:center;gap:.5rem}.todo-meta-item strong{color:#4a5568;font-weight:600}.todo-item.completed .todo-title{text-decoration:line-through;font-style:italic;color:#fff}.todo-item.completed .todo-description,.todo-item.completed .todo-metadata,.todo-item.completed .todo-meta-item{color:#c6c6c6}.todo-item.completed .todo-meta-item strong{color:#fff;font-weight:600}.todo-list-container{position:relative;width:50%;margin:0 auto;z-index:3}.todos-list{display:flex;flex-direction:column;gap:.75rem}.empty-message{text-align:center;color:#999;padding:2rem}.filter-container{display:flex;gap:1rem;margin-bottom:1.5rem;width:100%}.filter-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;border:1px solid rgba(255,255,255,.8);box-shadow:0 4px 6px #0000001a,0 1px 3px #00000014;cursor:pointer;transition:all .3s ease}.filter-btn:hover{transform:translateY(-2px);box-shadow:0 8px 16px #00000026,0 4px 6px #0000001a;background:#fff}.filter-btn.active{background:linear-gradient(135deg,#f093fb,#f5576c);border:1px solid rgba(240,147,251,.7);transform:translateY(-2px);box-shadow:0 6px 12px #f093fb80}.filter-btn.active .filter-label,.filter-btn.active .filter-count{color:#fff}.filter-label{font-size:1rem;font-weight:600;color:#2d3748;transition:color .3s ease}.filter-count{font-size:1.5rem;font-weight:700;color:#718096;transition:color .3s ease}.add-todo-form{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:2rem;padding:2rem;background-color:#ffffff14;border-radius:12px;box-shadow:0 6px 18px #00000080;border:1px solid rgba(255,255,255,.15)}.todo-input{padding:1rem 1.25rem;background-color:transparent;border:1px solid rgba(255,255,255,.3);border-radius:8px;font-size:1rem;color:#f0f0f0;transition:border-color .3s,box-shadow .3s}.todo-input::placeholder{color:#fff9}.todo-input:focus{outline:none;border-color:#00bcd4;box-shadow:0 0 0 3px #00bcd466}.add-button{padding:1rem 1.25rem;background-color:#00bcd4;color:#001f3f;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .3s,transform .1s;letter-spacing:.5px;box-shadow:0 4px 10px #00bcd44d}.add-button:hover{background-color:#0097a7;box-shadow:0 6px 15px #00bcd480}.add-button:active{transform:translateY(1px)}.add-button:disabled{background-color:#00bcd44d;color:#fff9;cursor:not-allowed;box-shadow:none}.raining-container{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:0}.falling-image{position:absolute;object-fit:cover;opacity:.7;animation:fall linear infinite;pointer-events:auto;cursor:pointer;will-change:transform;transition:opacity .3s ease,filter .3s ease,transform .3s ease}.falling-image:hover{opacity:1;filter:drop-shadow(0 0 10px rgba(255,255,255,.8));transform:scale(1.1);animation-play-state:paused}@keyframes fall{0%{transform:translateY(0)}to{transform:translateY(calc(100vh + 600px))}}.app-title{font-size:5rem;font-weight:900;text-align:center;margin:3rem 0 4rem;color:#fff;letter-spacing:.2em;text-transform:uppercase;position:relative;z-index:5;pointer-events:none;text-shadow:0 0 10px rgba(255,255,255,.8),0 0 20px rgba(255,255,255,.6),0 0 30px rgba(255,105,180,.6),0 4px 8px rgba(0,0,0,.4),0 8px 16px rgba(0,0,0,.3);animation:titleGlow 3s ease-in-out infinite}@keyframes titleGlow{0%,to{text-shadow:0 0 10px rgba(255,255,255,.8),0 0 20px rgba(255,255,255,.6),0 0 30px rgba(255,105,180,.6),0 4px 8px rgba(0,0,0,.4)}50%{text-shadow:0 0 20px rgba(255,255,255,1),0 0 30px rgba(255,255,255,.8),0 0 40px rgba(255,105,180,.8),0 4px 8px rgba(0,0,0,.4)}}.main-container{min-height:100vh;padding:2rem;position:relative;z-index:10;background:radial-gradient(circle at 20% 50%,rgba(240,147,251,.15) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(245,87,108,.15) 0%,transparent 50%),radial-gradient(circle at 40% 80%,rgba(168,237,234,.1) 0%,transparent 50%),linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);background-attachment:fixed;background-size:100% 100%}body{background:#1a1a2e;margin:0;padding:0;overflow-x:hidden}html{background:#1a1a2e;scroll-behavior:smooth}.header-buttons{position:fixed;top:1.5rem;right:1.5rem;display:flex;gap:1rem;z-index:100}.logout-button,.upload-button{padding:.75rem 1.5rem;background-color:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3);border-radius:12px;color:#fff;font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 6px #0000001a}.logout-button:hover,.upload-button:hover{background-color:#ffffff4d;transform:translateY(-2px);box-shadow:0 6px 12px #0003}.logout-button:active,.upload-button:active{transform:translateY(0)}.upload-button{background:linear-gradient(135deg,#f093fb4d,#f5576c4d);border:2px solid rgba(240,147,251,.5)}.upload-button:hover{background:linear-gradient(135deg,#f093fb66,#f5576c66);border-color:#f093fbb3}.upload-button:disabled{opacity:.6;cursor:not-allowed;transform:none}