:root{color:#374151;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f3f4f6;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html,body{min-width:320px;min-height:100vh;margin:0;padding:0}body{min-height:100vh}#root{width:100%;min-height:100vh}.app-background{background:radial-gradient(circle at 85% 10%,#ec489929,#0000 25%),radial-gradient(circle at 10% 90%,#db277724,#0000 25%),linear-gradient(135deg,#061326 0%,#081a36 48%,#050f22 100%);justify-content:center;align-items:flex-start;width:100%;min-height:100vh;padding:45px 20px;display:flex;position:relative;overflow:hidden}.decor{pointer-events:none;z-index:0;position:absolute}.decor-one{filter:blur(2px);background:linear-gradient(135deg,#ec48998c,#9d174d14);border-radius:45% 55% 60% 40%;width:300px;height:300px;animation:8s ease-in-out infinite floatOne;bottom:-130px;left:-140px}.decor-two{filter:blur(8px);background:radial-gradient(circle,#ec489961,#ec489900);border-radius:50%;width:170px;height:170px;animation:7s ease-in-out infinite floatTwo;top:-60px;right:-70px}.decor-three{border:2px solid #ec4899;border-radius:50%;width:10px;height:10px;animation:2.5s ease-in-out infinite pulseDot;bottom:12%;right:8%;box-shadow:0 0 15px #ec4899b3,0 0 30px #ec489940}.todo-container{z-index:2;-webkit-backdrop-filter:blur(20px);background:linear-gradient(135deg,#0f1e39f0,#07142ae8);border:1px solid #94a3b833;border-radius:25px;width:100%;max-width:1025px;padding:45px;animation:.8s ease-out containerAppear;position:relative;box-shadow:0 30px 80px #00000073,inset 0 1px #ffffff0a}.todo-header{align-items:center;gap:22px;margin-bottom:38px;display:flex;position:relative}.brand-icon{color:#fff;background:linear-gradient(135deg,#ec4899,#db2777);border-radius:23px;flex-shrink:0;justify-content:center;align-items:center;width:92px;height:92px;font-size:42px;animation:4s ease-in-out infinite iconFloat;display:flex;box-shadow:0 12px 30px #ec489952,inset 0 1px 1px #ffffff40}.header-content{flex:1}.eyebrow{color:#f472b6;letter-spacing:2px;margin:0 0 7px;font-size:14px;font-weight:700}.todo-header h1{color:#f8fafc;letter-spacing:-1.5px;margin:0;font-size:clamp(32px,4vw,48px);font-weight:700;line-height:1.1;display:inline-block;position:relative}.todo-header h1:after{content:"";background:linear-gradient(90deg,#0000,#ec4899,#0000);border-radius:50%;width:150px;height:4px;animation:3s ease-in-out infinite underlineGlow;position:absolute;bottom:-12px;left:22%;transform:rotate(-2deg)}.header-description{color:#94a3b8;margin:14px 0 0;font-size:16px}.theme-button{color:#fff;cursor:pointer;background:#ec489929;border:1px solid #ec48994d;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;font-size:19px;transition:transform .3s,background .3s,box-shadow .3s;display:flex}.theme-button:hover{background:#ec4899;transform:rotate(25deg)scale(1.08);box-shadow:0 0 20px #ec489966}.add-task-section{gap:15px;margin-bottom:30px;display:flex}.task-input-wrapper{flex:1;position:relative}.task-input-wrapper input{color:#f8fafc;box-sizing:border-box;background:#081831b3;border:2px solid #ec48998c;border-radius:16px;outline:none;width:100%;height:70px;padding:0 24px 0 60px;font-size:17px;transition:border-color .3s,box-shadow .3s,background .3s}.task-input-wrapper input::placeholder{color:#64748b}.task-input-wrapper input:focus{background:#081831e6;border-color:#ec4899;box-shadow:0 0 0 4px #ec489914,0 0 25px #ec48991f}.input-icon{color:#ec4899;pointer-events:none;font-size:21px;position:absolute;top:50%;left:23px;transform:translateY(-50%)}.add-task-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ec4899,#db2777);border:none;border-radius:16px;justify-content:center;align-items:center;gap:12px;height:70px;padding:0 28px;font-size:16px;font-weight:700;transition:transform .25s,box-shadow .25s,filter .25s;display:flex;box-shadow:0 10px 25px #ec489938}.add-task-button:hover{filter:brightness(1.08);transform:translateY(-3px);box-shadow:0 15px 35px #ec489959}.add-task-button:active{transform:translateY(0)scale(.98)}.statistics{grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:30px;display:grid}.stat-card{background:linear-gradient(145deg,#1a2d4eb3,#0d1d38a6);border:1px solid #64748b2e;border-radius:17px;align-items:center;gap:15px;padding:20px;transition:transform .3s,border-color .3s,background .3s;display:flex;box-shadow:inset 0 1px #ffffff06}.stat-card:hover{background:linear-gradient(145deg,#233559d9,#0f203dcc);border-color:#ec48994d;transform:translateY(-4px)}.stat-icon{color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:54px;height:54px;font-size:20px;display:flex}.stat-icon.pink{background:linear-gradient(135deg,#ec4899,#db2777);box-shadow:0 7px 20px #ec489940}.stat-icon.blue{background:linear-gradient(135deg,#6366f1,#4f46e5);box-shadow:0 7px 20px #6366f140}.stat-card p{color:#94a3b8;margin:0 0 3px;font-size:14px}.stat-card strong{color:#f472b6;font-size:27px;font-weight:700}.filter-buttons{gap:10px;margin-bottom:22px;display:flex}.filter{color:#cbd5e1;cursor:pointer;background:#0919328c;border:1px solid #64748b59;border-radius:12px;align-items:center;gap:8px;padding:11px 18px;font-size:14px;font-weight:600;transition:color .25s,background .25s,border-color .25s,transform .25s;display:flex}.filter:hover{color:#fff;border-color:#ec489973;transform:translateY(-2px)}.filter.active{color:#fff;background:linear-gradient(135deg,#ec4899,#db2777);border-color:#0000;box-shadow:0 8px 20px #ec489933}.tasks-section{flex-direction:column;gap:12px;display:flex}.task-item{background:linear-gradient(135deg,#162a49b8,#0c1c36a6);border:1px solid #475b7a52;border-radius:15px;align-items:center;gap:16px;min-height:72px;padding:0 20px;transition:transform .25s,border-color .25s,background .25s,box-shadow .25s;animation:.45s both taskAppear;display:flex;box-shadow:inset 0 1px #ffffff06}.task-item:hover{background:linear-gradient(135deg,#1c3253d9,#0e203dcc);border-color:#ec489952;transform:translate(4px);box-shadow:0 8px 25px #0000002e}.complete-button{color:#061326;cursor:pointer;background:0 0;border:2px solid #ec4899;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:13px;transition:background .3s,transform .3s,box-shadow .3s;display:flex}.complete-button:hover{background:#ec489926;transform:scale(1.12)}.task-item.completed .complete-button{background:#ec4899;border-color:#ec4899;animation:.35s checkPop;box-shadow:0 0 15px #ec489940}.task-name{color:#f1f5f9;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:16px;font-weight:500;transition:color .3s;overflow:hidden}.task-item.completed .task-name{color:#64748b;-webkit-text-decoration:line-through #64748b;text-decoration:line-through #64748b}.delete-button{color:#ec4899;cursor:pointer;background:0 0;border:none;border-radius:9px;justify-content:center;align-items:center;width:38px;height:38px;font-size:17px;transition:color .25s,background .25s,transform .25s;display:flex}.delete-button:hover{color:#fff;background:#ec489926;transform:scale(1.08)}.delete-button:active{transform:scale(.9)}.empty-state{text-align:center;background:#08172e66;border:1px dashed #64748b66;border-radius:16px;padding:55px 20px;animation:.5s emptyAppear}.empty-icon{color:#ec4899;background:#ec48991a;border:1px solid #ec48994d;border-radius:50%;justify-content:center;align-items:center;width:65px;height:65px;margin:0 auto 16px;font-size:25px;animation:3s ease-in-out infinite emptyFloat;display:flex}.empty-state h3{color:#f1f5f9;margin:0 0 7px;font-size:18px}.empty-state p{color:#64748b;margin:0;font-size:14px}.todo-footer{color:#94a3b8;border-top:1px solid #475b7a40;justify-content:center;align-items:center;gap:13px;margin-top:35px;padding-top:24px;font-size:15px;display:flex}.todo-footer svg{color:#ec4899;font-size:18px;animation:2s ease-in-out infinite heartBeat}.todo-footer .rocket{font-size:17px;animation:2s ease-in-out infinite rocketFloat}@keyframes containerAppear{0%{opacity:0;transform:translateY(25px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes iconFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes underlineGlow{0%,to{opacity:.6;transform:rotate(-2deg)scaleX(.9)}50%{opacity:1;transform:rotate(-2deg)scaleX(1)}}@keyframes taskAppear{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes checkPop{0%{transform:scale(.7)}60%{transform:scale(1.18)}to{transform:scale(1)}}@keyframes emptyAppear{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes emptyFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes heartBeat{0%,to{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(1)}}@keyframes rocketFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)rotate(-5deg)}}@keyframes floatOne{0%,to{transform:translate(0)rotate(0)}50%{transform:translate(25px,-20px)rotate(8deg)}}@keyframes floatTwo{0%,to{transform:translate(0)}50%{transform:translate(-15px,20px)}}@keyframes pulseDot{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}@media (width<=850px){.app-background{padding:25px 15px}.todo-container{padding:30px}.statistics{gap:12px}.stat-card{padding:16px}}@media (width<=650px){.app-background{padding:15px 10px}.todo-container{border-radius:20px;padding:22px}.todo-header{gap:14px}.brand-icon{border-radius:17px;width:65px;height:65px;font-size:29px}.todo-header h1{font-size:28px}.header-description{font-size:13px}.theme-button{display:none}.add-task-section{flex-direction:column}.add-task-button{width:100%}.statistics{grid-template-columns:1fr}.stat-card{padding:15px}.filter-buttons{padding-bottom:4px;overflow-x:auto}.filter{white-space:nowrap}.task-item{padding:0 14px}.todo-footer{font-size:13px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}