*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,system-ui,sans-serif}body{background:radial-gradient(circle at top,#111,#000 60%);color:#fff;min-height:100vh}.header{text-align:center;margin:40px 0 30px}.header h1{font-size:48px;font-weight:700}.header p{margin-top:8px;color:#aaa;font-size:15px}.addTodo{max-width:720px;margin:0 auto 25px;padding:20px;display:flex;align-items:center;gap:15px;background:linear-gradient(180deg,#1c1c1c,#141414);border-radius:18px;border:1px solid #2a2a2a}.inputfield{flex:1}.inputfield input{width:100%;height:52px;padding:0 18px;border-radius:12px;background:#222;border:1px solid #333;color:#fff;font-size:15px;outline:none}.inputfield input::placeholder{color:#777}.inputfield input:focus{border-color:#ff7a18}.addTodo button{height:52px;padding:0 24px;border-radius:12px;background:#ff7a18;color:#fff;border:none;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;white-space:nowrap}.addTodo button:hover{background:#ff8f3f}.filterTabs{max-width:720px;margin:0 auto 25px;padding:8px;display:flex;gap:10px;background:#161616;border:1px solid #2a2a2a;border-radius:14px}.filterTabs button{flex:1;padding:12px 0;border-radius:10px;background:transparent;border:none;color:#aaa;font-size:14px;cursor:pointer;transition:all .5s ease;outline:none}.filterTabs button:hover{color:#fff}.filterTabs button.active{color:#fff;background-color:#ff7a18}.todoContent{max-width:720px;margin:0 auto;background:#161616;border-radius:16px;border:1px solid #2a2a2a;text-align:center;padding:5px 0;color:#aaa}.todoFooter{max-width:720px;margin:20px auto 40px;display:flex;justify-content:space-between;align-items:center;color:#aaa;font-size:14px}.todosButton{display:flex;gap:12px}.todosButton button{padding:12px 18px;border-radius:10px;font-size:14px;border:none;cursor:pointer}.todosButton button:first-child{background:#2a2a2a;color:#fff}.todosButton button:last-child{background:#e53935;color:#fff}#popup{position:fixed;top:20px;right:20px;background-color:#2e2828a5;color:#f6f6f6;padding:10px 20px;border-radius:5px;box-shadow:0 2px 10px #0000004d;opacity:.9;z-index:1000}#animated{width:100%;height:5px;background:#ff8f3f;margin-top:5px;animation:slide 2s linear forwards}@keyframes slide{0%{width:100%}to{width:0}}.todo{display:flex;align-items:center;gap:12px;margin:5px auto;background:#1e1e1e;padding:14px 16px;border-radius:14px;color:#fff;box-shadow:0 6px 18px #00000059;max-width:700px;width:100%}.todo input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#ff9800}.todo input[type=text]{flex:1;background:transparent;border:none;outline:none;color:#fff;font-size:16px}.todo button{background:transparent;border:none;color:#fff;cursor:pointer;font-size:18px;padding:6px;border-radius:6px;transition:background .2s ease}.todo button:hover{background:#ffffff1f}.complete{text-decoration:line-through;opacity:.5}.todo input[type=text].active{border:1px solid #f4caa024;border-radius:6px;padding:5px 10px}.boxcomplete{opacity:.5}.Statistics{max-width:720px;margin:0 auto 40px;padding:24px;background:linear-gradient(180deg,#1c1c1c,#141414);border-radius:18px;border:1px solid #2a2a2a}.Statistics>p{font-size:20px;font-weight:600;margin-bottom:20px}.DisplayTab{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:24px}.box{background:#222;border-radius:14px;padding:20px 10px;text-align:center}.showtodono{font-size:34px;font-weight:700;margin-bottom:6px}.box:nth-child(1) .showtodono{color:#fff}.box:nth-child(2) .showtodono{color:#ff7a18}.box:nth-child(3) .showtodono{color:#2ecc71}.message{font-size:14px;color:#aaa}.progressSection{margin-top:10px}.progressHeader{display:flex;justify-content:space-between;align-items:center;color:#ccc;font-size:14px;margin-bottom:10px}.progressBar{width:100%;height:8px;background:#333;border-radius:20px;overflow:hidden}.progressFill{height:100%;background:linear-gradient(90deg,#ff7a18,#ff9f43);border-radius:20px;transition:width .3s ease}