*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,Arial,sans-serif;background-attachment:fixed;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:90px 15px 80px;color:#fff;background-image:url(./tela-de-fundo-cTMnxv2a.jpg);background-color:#f0f0f0;background-size:cover;background-position:center;overflow-y:auto}.cyberpunk-navbar{position:fixed;top:0;left:0;right:0;background:linear-gradient(135deg,#0f172af2,#1e293beb,#0f172af2,#1e293beb,#0f172af2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:2px solid;border-image:linear-gradient(90deg,transparent 0%,rgba(6,182,212,.6) 25%,rgba(0,217,255,.8) 50%,rgba(6,182,212,.6) 75%,transparent 100%) 1;padding:16px 30px;z-index:1001;box-shadow:0 4px 30px #06b6d433,0 8px 60px #0000004d,inset 0 1px #ffffff1a,inset 0 -1px #06b6d433;animation:navbarGlow 5s ease-in-out infinite;transition:all .3s ease}.cyberpunk-navbar:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(6,182,212,.05) 25%,rgba(0,217,255,.1) 50%,rgba(6,182,212,.05) 75%,transparent 100%);pointer-events:none;animation:shimmer 3s ease-in-out infinite}.navbar-content{display:flex;justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto;width:100%;position:relative;z-index:2}.navbar-logo{display:flex;align-items:center;gap:15px;cursor:pointer;transition:all .3s ease}.navbar-logo:hover{transform:translateY(-1px)}.navbar-icon{font-size:2rem;background:linear-gradient(45deg,#00d9ff,#0ea5e9,#00d9ff);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:iconPulse 2.5s ease-in-out infinite,gradientShift 4s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(0,217,255,.6));text-shadow:0 0 20px rgba(0,217,255,.4)}.navbar-logo h1{color:#00d9ff;font-size:1.6rem;font-weight:800;margin:0;text-shadow:0 0 10px rgba(0,217,255,.6),0 0 20px rgba(0,217,255,.4),0 0 40px rgba(0,217,255,.2);letter-spacing:2px;animation:logoGlow 3.5s ease-in-out infinite;background:linear-gradient(45deg,#00d9ff,#fff,#00d9ff);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;animation:logoGlow 3.5s ease-in-out infinite,gradientShift 6s ease-in-out infinite}.navbar-menu{display:flex;gap:25px;align-items:center;list-style:none}.navbar-item{color:#e2e8f0;text-decoration:none;padding:12px 20px;border-radius:10px;font-weight:600;font-size:.95rem;transition:all .4s cubic-bezier(.4,0,.2,1);border:1px solid transparent;position:relative;overflow:hidden;background:#1e293b4d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);letter-spacing:.5px;text-transform:uppercase;font-size:.85rem}.navbar-item:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,217,255,.2),rgba(6,182,212,.3),rgba(0,217,255,.2),transparent);transition:left .6s cubic-bezier(.4,0,.2,1);z-index:-1}.navbar-item:hover:before{left:100%}.navbar-item:after{content:"";position:absolute;top:0;left:50%;width:0;height:2px;background:linear-gradient(90deg,#00d9ff,#0ea5e9);transition:all .4s ease;transform:translate(-50%)}.navbar-item:hover:after{width:100%}.navbar-item:hover{color:#00d9ff;background:#06b6d426;border-color:#06b6d466;box-shadow:0 0 20px #06b6d44d,inset 0 1px #ffffff1a;transform:translateY(-2px);text-shadow:0 0 10px rgba(0,217,255,.5)}.navbar-item.active{color:#00d9ff;background:#06b6d440;border-color:#06b6d480;box-shadow:0 0 15px #06b6d466,inset 0 1px #ffffff26;text-shadow:0 0 10px rgba(0,217,255,.6)}.navbar-item.active:after{width:100%;background:linear-gradient(90deg,#00d9ff,#fff,#00d9ff);height:3px;animation:activeBorder 2s ease-in-out infinite}.navbar-status{display:flex;align-items:center;gap:10px;font-size:.85rem;color:#e2e8f0e6;background:#0f172a99;padding:8px 15px;border-radius:20px;border:1px solid rgba(6,182,212,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:500;letter-spacing:.5px;text-transform:uppercase;font-size:.75rem}.status-dot{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#10b981,#059669);box-shadow:0 0 10px #10b981cc,0 0 20px #10b98166,inset 0 1px 2px #ffffff4d;animation:statusPulse 2.5s ease-in-out infinite;position:relative}.status-dot:after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(16,185,129,.3);animation:statusRing 2s ease-in-out infinite}.navbar-toggle{display:none;flex-direction:column;cursor:pointer;padding:10px;gap:5px;border-radius:8px;transition:all .3s ease;background:#1e293b66;border:1px solid rgba(6,182,212,.2)}.navbar-toggle:hover{background:#06b6d426;border-color:#06b6d466;box-shadow:0 0 15px #06b6d44d}.navbar-toggle span{width:28px;height:3px;background:linear-gradient(90deg,#00d9ff,#0ea5e9);border-radius:3px;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 0 8px #00d9ff99;position:relative}.navbar-toggle span:after{content:"";position:absolute;inset:0;background:inherit;border-radius:inherit;opacity:.5;animation:hamburgerGlow 2s ease-in-out infinite}.navbar-toggle.active span:nth-child(1){transform:rotate(45deg) translate(8px,8px);background:linear-gradient(90deg,#ef4444,#dc2626)}.navbar-toggle.active span:nth-child(2){opacity:0;transform:translate(20px)}.navbar-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(8px,-8px);background:linear-gradient(90deg,#ef4444,#dc2626)}.navbar-menu.mobile-open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:linear-gradient(135deg,#0f172afa,#1e293bf2,#0f172afa);-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);border-bottom:2px solid rgba(6,182,212,.4);border-left:1px solid rgba(6,182,212,.2);border-right:1px solid rgba(6,182,212,.2);border-radius:0 0 15px 15px;padding:25px;gap:20px;box-shadow:0 10px 40px #0006,0 0 30px #06b6d41a,inset 0 1px #ffffff1a;animation:slideDown .4s cubic-bezier(.4,0,.2,1)}@keyframes navbarGlow{0%,to{box-shadow:0 4px 30px #06b6d433,0 8px 60px #0000004d,inset 0 1px #ffffff1a,inset 0 -1px #06b6d433}50%{box-shadow:0 4px 35px #06b6d44d,0 8px 70px #0006,inset 0 1px #ffffff26,inset 0 -1px #06b6d44d}}@keyframes shimmer{0%{transform:translate(-100%);opacity:0}50%{opacity:1}to{transform:translate(100%);opacity:0}}@keyframes logoGlow{0%,to{text-shadow:0 0 10px rgba(0,217,255,.6),0 0 20px rgba(0,217,255,.4),0 0 40px rgba(0,217,255,.2)}50%{text-shadow:0 0 15px rgba(0,217,255,.8),0 0 30px rgba(0,217,255,.5),0 0 50px rgba(0,217,255,.3)}}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes iconPulse{0%,to{transform:scale(1);filter:drop-shadow(0 0 10px rgba(0,217,255,.6))}50%{transform:scale(1.05);filter:drop-shadow(0 0 15px rgba(0,217,255,.8))}}@keyframes statusPulse{0%,to{opacity:1;box-shadow:0 0 10px #10b981cc,0 0 20px #10b98166,inset 0 1px 2px #ffffff4d}50%{opacity:.8;box-shadow:0 0 15px #10b981,0 0 30px #10b98199,inset 0 1px 2px #fff6}}@keyframes statusRing{0%{transform:scale(1);opacity:1}to{transform:scale(1.5);opacity:0}}@keyframes activeBorder{0%,to{opacity:1;transform:translate(-50%) scaleX(1)}50%{opacity:.7;transform:translate(-50%) scaleX(1.1)}}@keyframes hamburgerGlow{0%,to{opacity:.5}50%{opacity:.8}}@keyframes slideDown{0%{opacity:0;transform:translateY(-15px)}to{opacity:1;transform:translateY(0)}}.app{background:#0f172ad9;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:16px;padding:2rem;width:100%;max-width:600px;margin-top:20px;margin-bottom:20px;border:2px solid rgba(6,182,212,.3);box-shadow:0 0 30px #06b6d433,inset 0 1px #ffffff1a;position:relative;z-index:1}.app:before{content:"";position:absolute;inset:0;border-radius:16px;padding:2px;background:linear-gradient(45deg,#06b6d466,#0ea5e933,#06b6d466);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}.app h1{color:#00d9ff;text-align:center;margin-bottom:2rem;font-size:2.2rem;font-weight:700;text-shadow:0 0 10px rgba(0,217,255,.5),0 0 20px rgba(0,217,255,.3);letter-spacing:1px;animation:glow 3s ease-in-out infinite}.app h2{color:#00d9ff;font-size:1.2rem;font-weight:600;margin-bottom:1rem;text-shadow:0 0 8px rgba(0,217,255,.4);letter-spacing:.5px}.todo-form,.search-filter{background:#1e293b99;border-radius:12px;padding:1.5rem;margin-bottom:2rem;border:1px solid rgba(6,182,212,.2)}.todo-form form{display:flex;flex-direction:column;gap:1rem}.todo-form input,.todo-form select,.search-filter input{background:#0f172acc;border:1px solid rgba(6,182,212,.3);border-radius:8px;padding:.75rem;color:#e2e8f0;font-size:1rem;width:100%}.todo-form input::placeholder,.search-filter input::placeholder{color:#e2e8f080}.todo-form input:focus,.todo-form select:focus,.search-filter input:focus{outline:none;border-color:#00d9ff;box-shadow:0 0 10px #00d9ff4d}.todo-form button{background:#06b6d44d;color:#00d9ff;border:1px solid rgba(6,182,212,.5);padding:.75rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;width:100%}.todo-form button:hover{background:#06b6d480;box-shadow:0 0 15px #06b6d466}.search-filter input{width:100%;margin-bottom:1rem}.filter-options{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.filter-options p{color:#e2e8f0;margin:0;font-weight:500;min-width:fit-content}.filter-options select{background:#0f172acc;border:1px solid rgba(6,182,212,.3);border-radius:8px;padding:.5rem;color:#e2e8f0;font-size:.9rem;flex:1;min-width:120px}.filter-options select:focus{outline:none;border-color:#00d9ff;box-shadow:0 0 8px #00d9ff4d}.todo-list{display:flex;flex-direction:column;gap:1.2rem}.todo{background:#1e293bb3;border-radius:12px;padding:1.5rem;border:1px solid rgba(6,182,212,.2);transition:all .3s ease;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden;animation:fadeIn .4s ease-out}.todo:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(to bottom,#00d9ff,#0ea5e9);border-radius:0 2px 2px 0}.todo:hover{background:#1e293be6;border-color:#06b6d480;box-shadow:0 8px 25px #0000004d,0 0 20px #06b6d41a;transform:translateY(-2px)}.content{flex:1;margin-left:1rem}.content p{color:#e2e8f0;font-size:1.1rem;font-weight:500;margin-bottom:.5rem;line-height:1.5;word-wrap:break-word;word-break:break-word}.category{color:#00d9ff!important;font-size:.9rem!important;font-weight:400!important;margin-bottom:0!important;opacity:.8}.todo>div:last-child{display:flex;gap:.8rem;margin-left:1rem;flex-shrink:0}button{padding:.6rem 1.2rem;border:1px solid transparent;cursor:pointer;font-size:.85rem;font-weight:600;border-radius:8px;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px;position:relative;overflow:hidden;white-space:nowrap}button:first-child{background:#10b98133;color:#10b981;border-color:#10b9814d}button:first-child:hover{background:#10b9814d;border-color:#10b981;box-shadow:0 0 15px #10b98166,inset 0 1px #ffffff1a;transform:translateY(-1px)}button:last-child{background:#ef444433;color:#ef4444;border-color:#ef44444d}button:last-child:hover{background:#ef44444d;border-color:#ef4444;box-shadow:0 0 15px #ef444466,inset 0 1px #ffffff1a;transform:translateY(-1px)}.todo.completed{opacity:.6;background:#0f172a80}.todo.completed .content p:first-child{text-decoration:line-through;color:#64748b}.todo.completed:before{background:#64748b}.princess-footer{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(135deg,#3b82f626,#93c5fd1f,#bae6fd14 60%,#dbeafe0d);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(147,197,253,.2);padding:12px 20px;text-align:center;z-index:1000;box-shadow:0 -4px 20px #3b82f61a,inset 0 1px #ffffff1a}.footer-text{color:#dbeafe;font-size:.95rem;font-weight:500;margin-bottom:4px;text-shadow:0 1px 3px rgba(0,0,0,.3);letter-spacing:.5px}.footer-subtitle{color:#dbeafeb3;font-size:.75rem;font-weight:300;font-style:italic;opacity:.8;text-shadow:0 1px 2px rgba(0,0,0,.2)}.footer-text .crown-emoji{display:inline-block;animation:crownGlow 4s ease-in-out infinite;filter:drop-shadow(0 0 3px rgba(255,215,0,.4))}.footer-text .sparkle-emoji{display:inline-block;animation:sparkle 3s ease-in-out infinite;filter:drop-shadow(0 0 2px rgba(147,197,253,.6))}.princess-footer:hover{background:linear-gradient(135deg,#3b82f633,#93c5fd29,#bae6fd1f 60%,#dbeafe14);border-top-color:#93c5fd4d}.princess-footer:hover .footer-text{color:#f0f9ff}.princess-footer:hover .footer-subtitle{opacity:1;color:#dbeafee6}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes glow{0%,to{text-shadow:0 0 10px rgba(0,217,255,.5),0 0 20px rgba(0,217,255,.3)}50%{text-shadow:0 0 15px rgba(0,217,255,.7),0 0 25px rgba(0,217,255,.4)}}@keyframes crownGlow{0%,to{transform:scale(1);filter:drop-shadow(0 0 3px rgba(255,215,0,.4))}50%{transform:scale(1.05);filter:drop-shadow(0 0 5px rgba(255,215,0,.6))}}@keyframes sparkle{0%,to{transform:rotate(0) scale(1);opacity:.8}25%{transform:rotate(-5deg) scale(1.1);opacity:1}75%{transform:rotate(5deg) scale(.95);opacity:.9}}@media (max-width: 1024px){.app{max-width:90%;margin-top:30px;margin-bottom:30px}}@media (max-width: 768px){body{padding:70px 10px}.cyberpunk-navbar{padding:14px 20px}.navbar-menu{display:none;position:absolute;top:100%;left:0;right:0;background:linear-gradient(135deg,#0f172afa,#1e293bf2);-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);border-radius:0 0 15px 15px;padding:20px;flex-direction:column;gap:15px;box-shadow:0 10px 40px #0006;animation:slideDown .4s ease-out}.navbar-menu.mobile-open{display:flex}.navbar-toggle{display:flex;flex-direction:column;gap:5px;padding:10px;background:#1e293b66;border:1px solid rgba(6,182,212,.2);border-radius:8px;cursor:pointer}.navbar-toggle span{width:28px;height:3px;background:linear-gradient(90deg,#00d9ff,#0ea5e9);border-radius:3px;transition:all .3s ease}.navbar-toggle.active span:nth-child(1){transform:rotate(45deg) translate(6px,6px)}.navbar-toggle.active span:nth-child(2){opacity:0}.navbar-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}.navbar-item{width:100%;text-align:center;padding:12px}.app{padding:1.5rem;max-width:95%;margin-top:20px;margin-bottom:20px}.todo{flex-direction:column;gap:1rem}.todo-actions{width:100%}}@media (max-width: 480px){body{padding-top:65px;padding-bottom:65px}.cyberpunk-navbar{padding:12px 15px}.navbar-menu{padding:15px}.navbar-toggle span{width:25px;height:2.5px}.app{padding:1rem;margin-top:15px;margin-bottom:15px}}@media (max-width: 360px){body{padding-top:60px;padding-bottom:60px}.navbar-toggle span{width:22px;height:2px}.app{padding:.8rem;margin-top:10px;margin-bottom:10px}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}