@import"https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&family=Share+Tech+Mono&family=VT323&display=swap";:root{--primary-color: #00f0ff;--secondary-color: #ff00ff;--alert-color: #ff2a2a;--bg-color: #050505;--panel-bg: rgba(0, 20, 30, .85);--grid-color: rgba(0, 240, 255, .1)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}@keyframes flicker{0%{opacity:.98}5%{opacity:1}10%{opacity:.99}15%{opacity:1}25%{opacity:.99}35%{opacity:1}45%{opacity:.99}55%{opacity:1}65%{opacity:.99}75%{opacity:1}85%{opacity:.99}95%{opacity:1}to{opacity:.98}}@keyframes scanline{0%{transform:translateY(-100%)}to{transform:translateY(100%)}}@keyframes textGlitch{0%{text-shadow:2px 0 var(--secondary-color),-2px 0 var(--alert-color)}25%{text-shadow:-2px 0 var(--secondary-color),2px 0 var(--alert-color)}50%{text-shadow:2px 0 var(--alert-color),-2px 0 var(--primary-color)}75%{text-shadow:-2px 0 var(--primary-color),2px 0 var(--secondary-color)}to{text-shadow:2px 0 var(--secondary-color),-2px 0 var(--alert-color)}}@keyframes pulse-glow{0%{box-shadow:0 0 5px var(--primary-color),inset 0 0 5px var(--primary-color)}50%{box-shadow:0 0 15px var(--primary-color),inset 0 0 10px var(--primary-color)}to{box-shadow:0 0 5px var(--primary-color),inset 0 0 5px var(--primary-color)}}body{font-family:Share Tech Mono,monospace;background-color:var(--bg-color);color:var(--primary-color);min-height:100vh;overflow:hidden;position:relative;background-image:linear-gradient(var(--grid-color) 1px,transparent 1px),linear-gradient(90deg,var(--grid-color) 1px,transparent 1px);background-size:30px 30px;background-position:center center}body:before{content:" ";display:block;position:fixed;top:0;left:0;bottom:0;right:0;background:linear-gradient(#12101000 50%,#00000040 50%),linear-gradient(90deg,#ff00000f,#00ff0005,#0000ff0f);z-index:1000;background-size:100% 2px,3px 100%;pointer-events:none}body:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,transparent 50%,rgba(0,240,255,.05) 51%,transparent 51%);background-size:100% 4px;animation:scanline 6s linear infinite;pointer-events:none;z-index:1001}.screen-wrapper{height:100vh;height:100dvh;padding:20px 20px 60px;position:relative;overflow-y:auto;overflow-x:hidden;animation:flicker .15s infinite}.container{max-width:800px;margin:0 auto;border:1px solid var(--primary-color);background:var(--panel-bg);position:relative;clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);padding:2px}.container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--primary-color);z-index:-1;clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px)}.container:after{content:"";position:absolute;top:1px;left:1px;right:1px;bottom:1px;background:var(--panel-bg);z-index:-1;clip-path:polygon(19.5px 0,100% 0,100% calc(100% - 19.5px),calc(100% - 19.5px) 100%,0 100%,0 19.5px)}.header{padding:20px;border-bottom:1px solid var(--primary-color);position:relative;background:linear-gradient(90deg,rgba(0,240,255,.05) 0%,transparent 100%)}.header:before{content:"SYS.VER.3.2";position:absolute;top:5px;right:10px;font-size:10px;color:var(--primary-color);opacity:.7;letter-spacing:2px}.header h1{font-family:Rajdhani,sans-serif;font-weight:700;font-size:32px;color:#fff;text-transform:uppercase;letter-spacing:6px;text-align:center;text-shadow:0 0 10px var(--primary-color);margin:10px 0}.header-subtitle{text-align:center;font-size:12px;color:var(--secondary-color);letter-spacing:4px;text-transform:uppercase;margin-bottom:10px}.system-status{display:flex;justify-content:space-between;font-size:10px;color:var(--primary-color);text-transform:uppercase;margin-bottom:15px;border-bottom:1px dashed rgba(0,240,255,.3);padding-bottom:5px}.status-indicator{width:6px;height:6px;background:var(--secondary-color);display:inline-block;box-shadow:0 0 5px var(--secondary-color);animation:blink 1s infinite;margin-right:5px}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.controls{padding:20px;background:#0003}.add-item-form{display:flex;flex-direction:column;gap:15px}.input-row{display:flex;gap:10px;position:relative}input,select{background:#00000080;border:1px solid var(--primary-color);color:#fff;font-family:Share Tech Mono,monospace;font-size:16px;padding:12px;width:100%;outline:none;transition:all .3s ease;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}input:focus,select:focus{background:#00f0ff1a;box-shadow:0 0 15px #00f0ff4d;border-color:#fff}input::placeholder{color:#00f0ff80}button{background:#00f0ff1a;border:1px solid var(--primary-color);color:var(--primary-color);font-family:Rajdhani,sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:2px;padding:10px 20px;cursor:pointer;transition:all .3s ease;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}button:hover{background:var(--primary-color);color:#000;box-shadow:0 0 20px var(--primary-color);text-shadow:none}button:active{transform:translateY(2px)}#addItemBtn{background:var(--primary-color);color:#000;font-weight:700}#addItemBtn:hover{background:#fff;box-shadow:0 0 20px #fff}.toggle-container{display:flex;justify-content:center;margin-top:20px}.toggle-switch{display:flex;gap:10px}.toggle-option{background:transparent;border:1px solid rgba(0,240,255,.3);color:#00f0ff80;clip-path:none}.toggle-option.active{border-color:var(--secondary-color);color:var(--secondary-color);box-shadow:0 0 10px #ff00ff4d;text-shadow:0 0 5px var(--secondary-color)}.todo-list{padding:20px}.todo-list::-webkit-scrollbar{width:6px}.todo-list::-webkit-scrollbar-track{background:#000}.todo-list::-webkit-scrollbar-thumb{background:var(--primary-color)}.category-group{margin-bottom:25px;position:relative;border-left:1px solid rgba(0,240,255,.2);padding-left:15px}.category-header{font-family:Rajdhani,sans-serif;font-size:14px;color:#fff;margin-bottom:10px;display:inline-block;padding:2px 8px;background:var(--secondary-color);clip-path:polygon(0 0,100% 0,95% 100%,0 100%);text-shadow:0 1px 2px #000;position:relative;left:-16px}.todo-item{background:#0009;border:1px solid rgba(0,240,255,.3);padding:15px;margin-bottom:10px;display:flex;align-items:flex-start;gap:15px;transition:all .3s ease;position:relative}.todo-item:hover{border-color:var(--primary-color);background:#00f0ff0d;box-shadow:-5px 0 0 var(--primary-color)}.todo-item.completed{opacity:.5;border-color:#333}.todo-item.completed .todo-text{text-decoration:line-through;color:#555}.checkbox{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:20px;height:20px;border:2px solid var(--secondary-color);background:transparent;cursor:pointer;position:relative;flex-shrink:0;margin-top:2px}.checkbox:checked{background:var(--secondary-color);box-shadow:0 0 10px var(--secondary-color)}.checkbox:checked:after{content:"✔";position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);color:#000;font-size:14px}.todo-text{flex:1;font-size:16px;line-height:1.4;word-break:break-word}.button-group{display:flex;gap:5px}.control-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,240,255,.4);background:transparent;color:var(--primary-color);font-size:14px;padding:0;clip-path:none}.control-btn:hover{background:var(--primary-color);color:#000}.control-btn.delete{border-color:var(--alert-color);color:var(--alert-color)}.control-btn.delete:hover{background:var(--alert-color);color:#fff;box-shadow:0 0 10px var(--alert-color)}.subtasks-container{margin-top:10px;width:100%;padding-left:5px}.subtask-input-row{margin-bottom:8px;display:flex;gap:5px}.subtask-input{font-size:14px;padding:8px;height:auto}.subtask-btn{padding:5px 10px;font-size:12px}.chevron{cursor:pointer;margin-top:4px;transition:transform .3s;color:var(--secondary-color)}.chevron.expanded{transform:rotate(90deg)}.status-bar{position:fixed;bottom:0;left:0;width:100%;background:#000;border-top:2px solid var(--secondary-color);padding:8px 20px;display:flex;justify-content:space-between;font-size:12px;color:#fff;z-index:2000;box-shadow:0 -5px 20px #f0f3}.status-bar span{display:inline-block;margin-right:15px}.status-bar span span{color:var(--secondary-color);font-weight:700}#auth-screen .container{width:100%;max-width:400px;border:2px solid var(--alert-color);box-shadow:0 0 30px #ff2a2a33}#auth-screen .header h1{color:var(--alert-color);text-shadow:0 0 10px var(--alert-color)}#auth-screen input{border-color:var(--alert-color)}#auth-screen input:focus{box-shadow:0 0 15px #ff2a2a66}#auth-screen button{border-color:var(--alert-color);color:var(--alert-color);background:#ff2a2a1a}#auth-screen button:hover{background:var(--alert-color);color:#fff;box-shadow:0 0 20px var(--alert-color)}.modal{display:none;position:fixed;z-index:3000;left:0;top:0;width:100%;height:100%;background-color:#000000e6;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal.show{display:block}.modal-content{background:#0a0a0a;border:1px solid var(--secondary-color);margin:10% auto;padding:30px;width:90%;max-width:500px;box-shadow:0 0 50px #f0f3;clip-path:polygon(30px 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%,0 30px)}.modal-header h2{color:var(--secondary-color);text-transform:uppercase;letter-spacing:3px;margin-bottom:20px;border-bottom:1px solid #333;padding-bottom:10px}.close-modal{float:right;font-size:28px;font-weight:700;color:#fff;cursor:pointer;background:none;border:none;clip-path:none;padding:0}.close-modal:hover{color:var(--alert-color);text-shadow:0 0 10px var(--alert-color);background:none;box-shadow:none}.color-picker{height:45px;padding:0;border:1px solid var(--primary-color);background:#000}.category-item{display:flex;justify-content:space-between;padding:10px;border-bottom:1px solid #222;color:#fff}.delete-category{color:var(--alert-color);border:1px solid var(--alert-color);font-size:10px;padding:2px 5px}.delete-category:hover{background:var(--alert-color);color:#fff}.auth-container{padding:40px;text-align:center;min-width:300px}@media(max-width:600px){.screen-wrapper{padding:10px}.container{clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}.container:before{clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}.container:after{clip-path:polygon(9.5px 0,100% 0,100% calc(100% - 9.5px),calc(100% - 9.5px) 100%,0 100%,0 9.5px)}.header,.controls,.todo-list,.auth-container{padding:15px}.auth-container{min-width:auto;width:100%}.header h1{font-size:24px;letter-spacing:3px}}.todo-item{flex-direction:column;align-items:stretch;gap:10px}.todo-header-row{display:flex;justify-content:space-between;align-items:center;width:100%}.todo-left-controls{display:flex;align-items:center;gap:10px}.todo-body-row{width:100%;padding-left:35px;padding-right:5px}.todo-text{display:block;width:100%}.todo-item .priority-indicator{margin-right:5px}.button-group{margin-left:auto}
