:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffe6;background-color:#0f172a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#60a5fa;text-decoration:inherit}a:hover{color:#93c5fd}*{box-sizing:border-box}body{margin:0;display:flex;justify-content:center;align-items:center;min-width:320px;height:100vh;background:linear-gradient(-45deg,#0f172a,#0f172a,#530246,#0e2d5f);background-size:400% 400%;animation:gradientBG 15s ease infinite}@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}h1{font-size:2.2rem;text-align:center;margin-bottom:20px;background:linear-gradient(90deg,#5865f2,#00c6ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.app{max-width:540px;width:100%;padding:20px;background:#152044;border-radius:16px;box-shadow:0 10px 30px #0006}.header{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:#0d1732;padding:8px;border-radius:12px;border:1px solid #243462;margin-bottom:10px}.input{flex:1 1 200px;padding:10px 12px;border:none;background:transparent;font-size:1rem;color:#e6e6e6;min-width:0}.input::placeholder{color:#6b7280}.addBtn,.clearBtn{padding:12px 14px;border:0;border-radius:12px;cursor:pointer}.addBtn{background:#3b82f6;color:#fff}.addBtn:hover{background:#2563eb}.addBtn:disabled{opacity:.6;cursor:not-allowed}.clearBtn{background:#223159;color:#d2dcff}.list{display:grid;gap:8px}.item{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#111a33;border:1px solid #243462;border-radius:12px;box-shadow:0 4px 10px #0003;transition:transform .2s ease,background .2s ease}.item:hover{background:#162040;transform:translateY(-2px)}.text.done{text-decoration:line-through;color:#6b7280}.checkbox{width:18px;height:18px}.delBtn{background:transparent;color:#ef4444;border:1px solid #7f1d1d;padding:6px 10px;border-radius:10px;cursor:pointer}.addBtn,.clearBtn,.delBtn{transition:all .2s ease}.delBtn:hover{background:#7f1d1d}.actions{display:flex;gap:8px}.editBtn{background:transparent;color:#10b981;border:1px solid #065f46;padding:6px 10px;border-radius:10px;cursor:pointer;transition:all .2s ease}.editBtn:hover{background:#065f46}.filter-buttons{display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:16px;gap:10px}.filter-btn{flex:1 1 auto;text-align:center;padding:8px 16px;border-radius:20px;background:#0c1630;border:1px solid #2a3a66;color:#e6e6e6;transition:all .2s}.filter-btn:hover{background:#223159}.filter-btn.active{background:#3b82f6;border-color:#3b82f6}.edit-mode{display:flex;gap:8px;align-items:center}.text-container{flex:1}.due-date{font-size:12px;margin-top:4px}.due-date.overdue{color:#ef4444;font-weight:600}.due-date.upcoming{color:#facc15}.date-input{padding:4px;border-radius:4px;border:1px solid #2a3a66;background:#0c1630;color:#e6e6e6}.footer,.app>div:last-child{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:14px;color:#98a2b3}.footer button{padding:8px 12px;font-size:.9rem}@media (max-width: 480px){.app{padding:12px;border-radius:12px}h1{font-size:1.6rem;margin-bottom:12px}.header{gap:6px;padding:6px}.input{padding:8px 10px;font-size:.9rem}.addBtn,.clearBtn,.delBtn,.editBtn{padding:8px 10px;font-size:.85rem}.item{padding:10px 12px;border-radius:10px}.due-date{font-size:11px}.footer{font-size:12px}}