:root{--bg-color: #000000;--card-bg: rgba(15, 15, 20, .5);--glass-border: rgba(255, 255, 255, .06);--text-main: #e0e0e0;--text-dim: #555;--grid-line: rgba(0, 243, 255, .05);--grid-opacity-min: .08;--grid-opacity-max: .12;--particles-opacity: 1;--fx-accent-1: var(--neon-cyan);--fx-accent-2: var(--neon-purple);--neon-cyan: #00f3ff;--neon-purple: #bc13fe;--neon-green: #0aff60;--neon-red: #ff3333;--neon-dim: #333;--neon-gold: #ffd700;--glow-shadow: 0 0 15px rgba(0, 243, 255, .15);--base-size: 16px;--font-mono: "JetBrains Mono", "SF Mono", "Consolas", monospace}*{box-sizing:border-box;outline:none}html{font-size:var(--base-size)}body{margin:0;padding:0;background-color:var(--bg-color);color:var(--text-main);font-family:var(--font-mono);height:100vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;background-image:none;position:relative;z-index:0;isolation:isolate}#root{display:contents}.fx-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;image-rendering:auto}.fx-overlay{position:fixed;inset:0;z-index:900;background:#0000008c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:flex-start;justify-content:flex-end;padding:1.25rem 2.5rem}.fx-panel{width:360px;max-width:calc(100vw - 2.5rem);background:#0a0a0cb8;border:1px solid rgba(255,255,255,.08);border-radius:10px;box-shadow:0 12px 40px #0009,0 0 60px #00f3ff0f;padding:.9rem .9rem .8rem}.auth-overlay{position:fixed;inset:0;z-index:950;background:#000000a6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:1.25rem}.auth-panel{width:420px;max-width:calc(100vw - 2.5rem);background:#0a0a0cc7;border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 16px 60px #000000a6,0 0 80px #00f3ff14;padding:1rem}.auth-title{font-size:.8rem;letter-spacing:.18rem;text-transform:uppercase;color:#ffffff8c;margin-bottom:.85rem}.auth-field{display:grid;gap:.35rem;margin-bottom:.75rem}.auth-label{font-size:.78rem;color:#fff6;letter-spacing:.06rem;-webkit-user-select:none;user-select:none}.auth-input{width:100%;background:#00000073;border:1px solid rgba(255,255,255,.12);color:#ffffffd9;border-radius:10px;padding:.55rem .7rem;font-family:var(--font-mono)}.auth-input:focus{border-color:var(--fx-accent-1);box-shadow:0 0 0 3px #00f3ff1f,0 0 30px #00f3ff14}.auth-actions{display:flex;gap:10px;justify-content:flex-end;padding-top:.25rem}.auth-btn{background:#00000059;border:1px solid rgba(255,255,255,.12);color:#ffffffbf;border-radius:10px;padding:.45rem .9rem;font-family:var(--font-mono);cursor:pointer;transition:all .2s}.auth-btn:hover{border-color:var(--fx-accent-1);color:var(--fx-accent-1);box-shadow:0 0 18px #00f3ff2e,inset 0 0 10px #00f3ff0f}.auth-btn:disabled{opacity:.55;cursor:not-allowed}.fx-title{font-size:.8rem;letter-spacing:.18rem;text-transform:uppercase;color:#ffffff73;margin-bottom:.75rem}.fx-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:.5rem .25rem;border-top:1px solid rgba(255,255,255,.05)}.fx-row:first-of-type{border-top:none}.fx-label{font-size:.78rem;color:#ffffff59;letter-spacing:.06rem;-webkit-user-select:none;user-select:none}.fx-select{background:#00000073;border:1px solid rgba(255,255,255,.1);color:#ffffffbf;border-radius:8px;padding:.35rem .55rem;font-family:var(--font-mono);outline:none;min-width:180px}.fx-select:focus{border-color:var(--fx-accent-1);box-shadow:0 0 0 3px #00f3ff1f,0 0 30px #00f3ff14}.fx-row-toggle input[type=checkbox]{width:18px;height:18px;accent-color:var(--fx-accent-1)}.fx-row-colors{align-items:flex-start}.fx-colors{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex:1}.fx-color{width:38px;height:28px;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#00000073;cursor:pointer}.fx-actions{display:flex;gap:10px;justify-content:flex-end;padding-top:.75rem}.fx-btn{background:#00000059;border:1px solid rgba(255,255,255,.1);color:#ffffffb3;border-radius:8px;padding:.4rem .7rem;font-family:var(--font-mono);cursor:pointer;transition:all .2s}.fx-btn:hover{border-color:var(--fx-accent-1);color:var(--fx-accent-1);box-shadow:0 0 18px #00f3ff2e,inset 0 0 10px #00f3ff0f}.particles{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden;opacity:var(--particles-opacity)}.particle{position:absolute;width:2px;height:2px;background:var(--neon-cyan);border-radius:50%;opacity:0;animation:particleFloat 15s infinite;box-shadow:0 0 6px var(--neon-cyan)}@keyframes particleFloat{0%{opacity:0;transform:translateY(100vh) translate(0)}10%{opacity:.6}90%{opacity:.6}to{opacity:0;transform:translateY(-100px) translate(50px)}}.grid-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:60px 60px;opacity:var(--grid-opacity-max);animation:gridPulse 10s ease-in-out infinite}@keyframes gridPulse{0%,to{opacity:var(--grid-opacity-min)}50%{opacity:var(--grid-opacity-max)}}header{width:100%;max-width:95vw;padding:1.25rem 2.5rem;display:flex;justify-content:space-between;align-items:center;z-index:10;position:relative}header:after{content:"";position:absolute;bottom:0;left:5%;right:5%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,243,255,.2),rgba(188,19,254,.2),transparent);animation:headerLine 4s ease-in-out infinite}@keyframes headerLine{0%,to{opacity:.3}50%{opacity:.7}}.header-left{display:flex;align-items:center;gap:20px}.header-controls{display:flex;align-items:center;gap:10px}h1{font-size:.875rem;letter-spacing:.25rem;color:#ffffff4d;text-transform:uppercase;margin:0;font-weight:400;position:relative;animation:titleGlow 3s ease-in-out infinite}@keyframes titleGlow{0%,to{text-shadow:0 0 5px transparent;color:#ffffff4d}50%{text-shadow:0 0 10px rgba(0,243,255,.3);color:#ffffff80}}.btn-icon{background:transparent;border:1px solid rgba(255,255,255,.1);color:#ffffff80;width:2rem;height:2rem;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);transition:all .2s;font-size:.8rem}.btn-icon:hover{border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:0 0 15px #00f3ff4d,inset 0 0 10px #00f3ff1a;transform:translateY(-1px)}.btn-icon:active{transform:translateY(0) scale(.95)}.btn-clear{background:transparent;border:1px solid rgba(255,50,50,.3);color:#ff6464b3;padding:.4rem 1rem;font-size:.75rem;cursor:pointer;transition:all .3s ease;font-family:var(--font-mono);letter-spacing:1px}.btn-clear:hover{background:#ff32321a;border-color:#ff3232cc;box-shadow:0 0 20px #ff323266,inset 0 0 15px #ff32321a;color:#fff;text-shadow:0 0 8px rgba(255,50,50,.5);animation:dangerPulse .8s ease-in-out infinite}@keyframes dangerPulse{0%,to{box-shadow:0 0 20px #ff323266,inset 0 0 15px #ff32321a}50%{box-shadow:0 0 30px #ff323299,inset 0 0 20px #ff323226}}.btn-clear:active{transform:scale(.95)}#list-container{flex:1;width:95vw;max-width:none;padding:2.25rem 3.25rem 8rem;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:.75rem;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:rgba(0,243,255,.2) transparent}#list-container::-webkit-scrollbar{width:3px}#list-container::-webkit-scrollbar-track{background:transparent}#list-container::-webkit-scrollbar-thumb{background:#00f3ff26;border-radius:3px}#list-container::-webkit-scrollbar-thumb:hover{background:#00f3ff4d}.task-item{display:flex;align-items:flex-start;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--glass-border);padding:1rem 1.5rem;border-radius:4px;transition:all .2s cubic-bezier(.25,.8,.25,1);position:relative;animation:slideIn .4s ease-out forwards;opacity:0;transform:translateY(20px);-webkit-user-select:none;user-select:none;cursor:grab}.task-item:active{cursor:grabbing}.task-item.dragging{opacity:.8;background:#00000014;border-color:var(--item-glow-color, var(--input-glow-color, var(--neon-cyan)));transform:scale(1.02);box-shadow:0 10px 30px #00000080,0 0 55px var(--item-glow-focus, var(--input-glow-focus, rgba(0, 243, 255, .3)));z-index:100;animation:dragGlow .5s ease-in-out infinite alternate}@keyframes dragGlow{0%{box-shadow:0 10px 30px #00000080,0 0 55px var(--item-glow-focus, var(--input-glow-focus, rgba(0, 243, 255, .3)))}to{box-shadow:0 15px 40px #0009,0 0 75px var(--item-glow-color, var(--input-glow-color, rgba(0, 243, 255, .5)))}}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.task-item:hover{background:transparent;border-color:var(--item-glow-color, var(--input-glow-color, rgba(0, 243, 255, .25)));transform:translate(2px);box-shadow:0 6px 30px #00000073,0 0 38px var(--item-glow-focus, var(--input-glow-focus, rgba(0, 243, 255, .25))),inset 0 0 30px var(--item-glow-shadow, var(--input-glow-shadow, rgba(0, 243, 255, .08)))}.task-item:not(.done):first-child{background:transparent;border-color:#ff333340;box-shadow:0 0 25px #ff33331a,inset 0 0 20px #ff333308}.task-item:not(.done):first-child:hover{background:transparent;border-color:#ff333359;box-shadow:0 4px 25px #0006,0 0 25px #ff333326}.task-item:before{content:"";position:absolute;inset:0;border-radius:4px;opacity:0;z-index:-1;transition:opacity .3s,box-shadow .3s;box-shadow:0 0 32px var(--item-glow-focus, var(--input-glow-shadow, rgba(0, 243, 255, .15)))}.task-item:hover:before{opacity:1}.task-item:after{content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;opacity:0;background:linear-gradient(90deg,var(--item-glow-shadow, var(--input-glow-shadow, rgba(0, 243, 255, .04))) 0%,transparent 50%);transition:opacity .3s}.task-item:hover:after{opacity:1}.priority-bar{width:4px;height:100%;position:absolute;left:0;top:0;bottom:0;cursor:pointer;transition:all .3s ease;box-shadow:2px 0 10px #0000001a}.priority-bar:hover{width:6px;filter:brightness(1.3)}.p-normal{background:var(--neon-cyan);box-shadow:0 0 8px var(--neon-cyan);animation:glowCyan 2s ease-in-out infinite}@keyframes glowCyan{0%,to{box-shadow:0 0 8px var(--neon-cyan),0 0 15px #00f3ff4d}50%{box-shadow:0 0 12px var(--neon-cyan),0 0 25px #00f3ff80}}.p-high{background:var(--neon-purple);box-shadow:0 0 8px var(--neon-purple);animation:glowPurple 2s ease-in-out infinite}@keyframes glowPurple{0%,to{box-shadow:0 0 8px var(--neon-purple),0 0 15px #bc13fe4d}50%{box-shadow:0 0 12px var(--neon-purple),0 0 25px #bc13fe80}}.p-critical{background:var(--neon-red);box-shadow:0 0 10px var(--neon-red);animation:glowRed 1s ease-in-out infinite}@keyframes glowRed{0%,to{box-shadow:0 0 10px var(--neon-red),0 0 20px #f336}50%{box-shadow:0 0 15px var(--neon-red),0 0 35px #f339}}.p-low{background:var(--neon-dim)}.content{flex:1;margin-left:.75rem;font-size:1rem;line-height:1.6;white-space:pre-wrap;word-break:break-word;cursor:pointer;transition:color .3s;display:flex;align-items:center;flex-wrap:wrap;gap:.3rem}.images-grid{display:inline-flex;flex-wrap:wrap;gap:.4rem;align-items:center}.text-part+.images-grid{margin-left:.5rem}.task-content-img{max-width:120px;max-height:80px;width:auto;height:auto;object-fit:cover;border-radius:3px;border:1px solid rgba(255,255,255,.1);display:block;cursor:zoom-in;transition:all .25s cubic-bezier(.25,.8,.25,1);opacity:.85}.task-content-img:hover{transform:scale(1.08);border-color:var(--neon-cyan);box-shadow:0 0 15px #00f3ff66;opacity:1}.task-item.done{opacity:.5;background:transparent;border-color:#ffffff05;cursor:default}.task-item.done .priority-bar{cursor:pointer}.task-item.done .content{color:var(--text-dim)}.task-item.done .text-part{text-decoration:line-through;opacity:.8}.text-part{display:inline;transition:text-shadow .3s}.task-item:hover .text-part{text-shadow:0 0 20px rgba(255,255,255,.1)}.result-part{display:inline;color:var(--neon-cyan);text-decoration:none!important;margin-left:.5em;outline:none;min-width:10px;opacity:1!important;filter:none!important;text-shadow:0 0 8px rgba(0,243,255,.3);transition:all .3s}.result-part:hover{text-shadow:0 0 15px rgba(0,243,255,.6)}.result-part:focus{background:#00f3ff1a;border-radius:2px;box-shadow:0 0 15px #00f3ff4d;animation:resultGlow 1s ease-in-out infinite}@keyframes resultGlow{0%,to{box-shadow:0 0 15px #00f3ff4d}50%{box-shadow:0 0 25px #00f3ff80}}.task-item.done .task-content-img{opacity:.5;filter:grayscale(100%) brightness(.7)}.task-item.done .priority-bar{background:var(--neon-dim);box-shadow:none;animation:none}.task-item.done:hover{background:#1414144d;border-color:#ffffff0d}.task-item.done:after{display:none}.result-input{width:100%;background:transparent;border:1px solid transparent;color:var(--neon-cyan);padding:.5rem;margin-top:.25rem;border-radius:4px;font-family:var(--font-mono);font-size:.9rem;outline:none;transition:all .2s;display:none}.result-input.visible{display:block}.result-input:focus{border-color:var(--neon-cyan);background:#00000080}.result-input::placeholder{color:transparent;transition:color .2s}.result-input:focus::placeholder{color:#00f3ff4d}.meta{display:flex;align-items:center;gap:1rem;margin-left:1.25rem;opacity:0;transition:opacity .2s}.task-item:hover .meta{opacity:1}.timestamp{font-size:.75rem;color:#fff3;transition:all .3s}.task-item:hover .timestamp{color:#00f3ff66;text-shadow:0 0 5px rgba(0,243,255,.2)}.btn-delete{background:none;border:none;color:#ff323280;cursor:pointer;font-size:1rem;padding:.25rem;border-radius:4px;transition:all .2s}.btn-delete:hover{color:#f44;background:#ff00001a;text-shadow:0 0 10px rgba(255,0,0,.5);transform:scale(1.1)}.btn-edit{background:none;border:none;color:#ffffff4d;cursor:pointer;font-size:.9rem;padding:.25rem;border-radius:4px;transition:all .2s;display:none}.task-item.done .btn-edit{display:block}.btn-edit:hover{color:var(--neon-cyan);background:#00f3ff1a;text-shadow:0 0 10px rgba(0,243,255,.5);transform:scale(1.1)}.input-wrapper{position:fixed;bottom:2rem;width:100%;max-width:800px;z-index:100;padding:0 1.25rem;display:flex;flex-direction:column;align-items:flex-start}.image-preview-container{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px;padding:8px;background:#0a0a0acc;border:1px solid var(--neon-cyan);border-radius:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-height:0;max-height:150px;overflow-y:auto;width:100%;display:none}.image-preview-container.active{display:flex;animation:previewSlideIn .3s ease-out}@keyframes previewSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.preview-item{position:relative;height:80px;border-radius:4px;overflow:hidden;border:1px solid rgba(255,255,255,.2);transition:transform .2s,box-shadow .2s,border-color .2s}.preview-item:hover{transform:scale(1.05);box-shadow:0 0 15px #00f3ff4d;border-color:var(--neon-cyan)}.preview-img{height:100%;width:auto;display:block}.btn-remove-preview{position:absolute;top:0;right:0;background:#000000b3;color:var(--neon-red);width:20px;height:20px;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.btn-remove-preview:hover{background:#ff33334d;transform:scale(1.1);text-shadow:0 0 8px var(--neon-red)}.input-box{width:100%;background:#08080ce6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--input-glow-color, rgba(0, 243, 255, .4));border-radius:8px;padding:1rem 1.25rem;font-family:var(--font-mono);font-size:1rem;color:#fff;box-shadow:0 0 20px var(--input-glow-shadow, rgba(0, 243, 255, .1)),inset 0 0 30px #0000004d;transition:all .3s ease;resize:none;height:3.5rem;overflow:hidden;position:relative}.input-wrapper:after{content:"";position:absolute;bottom:0;left:1.25rem;right:1.25rem;height:calc(3.5rem + 2px);border-radius:8px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--input-glow-color, rgba(0, 243, 255, .5)),transparent);background-size:200% 100%;opacity:0;z-index:-1;transition:opacity .3s}.input-wrapper:focus-within:after{opacity:1;animation:borderSweep 2s linear infinite}@keyframes borderSweep{0%{background-position:-200% 0}to{background-position:200% 0}}.input-box:focus{box-shadow:0 0 30px var(--input-glow-focus, rgba(0, 243, 255, .25)),0 0 60px var(--input-glow-shadow, rgba(0, 243, 255, .1));background:#050505f2;height:6.25rem;border-color:var(--input-glow-color, var(--neon-cyan));animation:inputPulse 2s ease-in-out infinite}@keyframes inputPulse{0%,to{box-shadow:0 0 30px var(--input-glow-focus, rgba(0, 243, 255, .25)),0 0 60px var(--input-glow-shadow, rgba(0, 243, 255, .1))}50%{box-shadow:0 0 40px var(--input-glow-focus, rgba(0, 243, 255, .35)),0 0 80px var(--input-glow-shadow, rgba(0, 243, 255, .15))}}.input-box::placeholder{color:var(--input-placeholder-color, rgba(0, 243, 255, .3))}#lightbox{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000e6;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;padding:40px}#lightbox.visible{opacity:1;pointer-events:auto;animation:lightboxFadeIn .3s ease-out}@keyframes lightboxFadeIn{0%{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}to{opacity:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}#lightbox{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#lightbox img{max-width:100%;max-height:100%;box-shadow:0 0 50px #00f3ff33,0 0 100px #000c;border:1px solid rgba(0,243,255,.3);cursor:zoom-out;animation:imgPopIn .3s ease-out}@keyframes imgPopIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}#lightbox .close-hint{position:absolute;top:20px;right:30px;color:#fff;font-size:24px;cursor:pointer;font-family:var(--font-mono);transition:all .3s;text-shadow:0 0 10px rgba(255,255,255,.3)}#lightbox .close-hint:hover{color:var(--neon-red);text-shadow:0 0 20px rgba(255,51,51,.6);transform:scale(1.2) rotate(90deg)}@media(max-width:768px){header{padding:1rem 1.25rem}#list-container{padding:1.25rem 1.5rem 8rem}.input-wrapper{bottom:1.25rem}}
