*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}:root{--bg-primary: #0d0d0d;--bg-secondary: #1a1a1a;--bg-card: #252525;--bg-hover: #2f2f2f;--text-primary: #ffffff;--text-secondary: #a0a0a0;--text-muted: #666666;--accent: #646cff;--accent-hover: #535bf2;--success: #4ade80;--warning: #fbbf24;--danger: #f87171;--border: #333333;--shadow: rgba(0, 0, 0, .3)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.5}.app{max-width:700px;margin:0 auto;padding:2rem 1rem}.header{text-align:center;margin-bottom:2rem}.header h1{font-size:2rem;font-weight:600;margin-bottom:.25rem}.subtitle{color:var(--text-secondary);font-size:.95rem}.task-form{background:var(--bg-secondary);border-radius:12px;padding:1.25rem;margin-bottom:1.5rem;border:1px solid var(--border)}.form-row{display:flex;gap:.75rem}.form-row+.form-row{margin-top:.75rem}.task-input{flex:1;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:.75rem 1rem;color:var(--text-primary);font-size:1rem;transition:border-color .2s}.task-input:focus{outline:none;border-color:var(--accent)}.task-input::placeholder{color:var(--text-muted)}.form-options{flex-wrap:wrap}.date-input,.priority-select{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:.5rem .75rem;color:var(--text-primary);font-size:.9rem;cursor:pointer;transition:border-color .2s}.date-input:focus,.priority-select:focus{outline:none;border-color:var(--accent)}.priority-select{min-width:100px}.add-btn{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:.5rem 1.25rem;font-size:.9rem;font-weight:500;cursor:pointer;transition:background .2s}.add-btn:hover{background:var(--accent-hover)}.filter-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:1rem}.filter-tabs{display:flex;gap:.5rem}.filter-tab{background:transparent;border:1px solid var(--border);border-radius:20px;padding:.4rem .9rem;color:var(--text-secondary);font-size:.85rem;cursor:pointer;transition:all .2s}.filter-tab:hover{background:var(--bg-card);color:var(--text-primary)}.filter-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}.filter-tab .count{margin-left:.3rem;opacity:.8}.sort-select-wrapper{display:flex;align-items:center;gap:.5rem;color:var(--text-secondary);font-size:.85rem}.sort-select{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:.35rem .6rem;color:var(--text-primary);font-size:.85rem;cursor:pointer}.sort-select:focus{outline:none;border-color:var(--accent)}.task-list{display:flex;flex-direction:column;gap:.5rem}.task-item{background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;padding:.9rem 1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:all .2s}.task-item:hover{background:var(--bg-hover)}.task-item.completed{opacity:.6}.task-item.completed .task-title{text-decoration:line-through;color:var(--text-secondary)}.task-item.overdue:not(.completed){border-color:var(--danger);border-left:3px solid var(--danger)}.task-item.editing{flex-direction:column;align-items:stretch;gap:.75rem}.task-left{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}.task-title{font-size:.95rem;word-break:break-word}.task-right{display:flex;align-items:center;gap:.6rem;flex-shrink:0}.checkbox-container{position:relative;width:22px;height:22px;cursor:pointer;flex-shrink:0}.checkbox-container input{position:absolute;opacity:0;cursor:pointer}.checkmark{position:absolute;top:0;left:0;width:22px;height:22px;background:var(--bg-card);border:2px solid var(--border);border-radius:6px;transition:all .2s}.checkbox-container:hover .checkmark{border-color:var(--accent)}.checkbox-container input:checked~.checkmark{background:var(--success);border-color:var(--success)}.checkmark:after{content:"";position:absolute;display:none;left:6px;top:2px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-container input:checked~.checkmark:after{display:block}.task-date{font-size:.8rem;color:var(--text-secondary);background:var(--bg-card);padding:.2rem .5rem;border-radius:4px}.task-date.overdue-date{color:var(--danger);background:#f871711a}.priority-badge{font-size:.75rem;font-weight:500;padding:.2rem .6rem;border-radius:4px;text-transform:uppercase;letter-spacing:.3px}.priority-high{background:#f8717126;color:var(--danger)}.priority-medium{background:#fbbf2426;color:var(--warning)}.priority-low{background:#4ade8026;color:var(--success)}.edit-btn,.delete-btn{background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:.3rem;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center}.edit-btn:hover{color:var(--accent);background:#646cff1a}.delete-btn:hover{color:var(--danger);background:#f871711a}.edit-input{background:var(--bg-card);border:1px solid var(--accent);border-radius:8px;padding:.6rem .9rem;color:var(--text-primary);font-size:.95rem;width:100%}.edit-input:focus{outline:none}.edit-options{display:flex;gap:.5rem;flex-wrap:wrap}.save-btn,.cancel-btn{border:none;border-radius:6px;padding:.4rem .8rem;font-size:.85rem;cursor:pointer;transition:opacity .2s}.save-btn{background:var(--accent);color:#fff}.save-btn:hover{background:var(--accent-hover)}.cancel-btn{background:var(--bg-card);color:var(--text-secondary);border:1px solid var(--border)}.cancel-btn:hover{background:var(--bg-hover)}.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-muted)}.empty-state svg{margin-bottom:1rem;opacity:.4}.empty-state p{font-size:.95rem}@media(max-width:500px){.app{padding:1.5rem .75rem}.filter-bar{flex-direction:column;align-items:stretch}.filter-tabs,.sort-select-wrapper{justify-content:center}.task-item{flex-direction:column;align-items:stretch;gap:.75rem}.task-right{justify-content:flex-end}}