:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400}body{margin:0;min-width:320px;min-height:100vh}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);min-height:100vh;color:#fff}.app{max-width:900px;margin:0 auto;padding:20px}.loading{display:flex;justify-content:center;align-items:center;height:100vh;font-size:1.5rem;color:#e94560}.header{text-align:center;padding:30px 0;border-bottom:2px solid #e94560;margin-bottom:30px}.header h1{font-size:2.2rem;color:#e94560;margin-bottom:10px}.subtitle{color:#a0a0a0;font-size:1.1rem}.progress-container{background:#1f1f3a;border-radius:10px;padding:20px;margin-bottom:25px}.progress-bar{background:#2d2d4a;border-radius:10px;height:25px;overflow:hidden;margin-bottom:10px}.progress-fill{background:linear-gradient(90deg,#e94560,#ff6b6b);height:100%;border-radius:10px;transition:width .3s ease}.progress-text{text-align:center;color:#ccc;font-size:.95rem}.saving{color:#e94560;font-style:italic}.filters{display:flex;gap:10px;margin-bottom:25px;flex-wrap:wrap;justify-content:center}.filters button{background:#2d2d4a;border:1px solid #3d3d5a;color:#ccc;padding:10px 20px;border-radius:20px;cursor:pointer;font-size:.9rem;transition:all .2s ease}.filters button:hover{background:#3d3d5a}.filters button.active{background:#e94560;border-color:#e94560;color:#fff}.categories{display:flex;flex-direction:column;gap:20px}.category{background:#1f1f3a;border-radius:12px;overflow:hidden;border:1px solid #2d2d4a}.category-header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;background:#2d2d4a;cursor:pointer;transition:background .2s ease}.category-header:hover{background:#3d3d5a}.category-header h2{font-size:1.1rem;font-weight:600;display:flex;align-items:center;gap:10px}.toggle-icon{font-size:.8rem;color:#e94560}.category-progress{background:#e94560;color:#fff;padding:5px 12px;border-radius:15px;font-size:.85rem;font-weight:500}.tasks{padding:10px 0}.task{display:flex;align-items:center;padding:15px 20px;border-bottom:1px solid #2d2d4a;gap:15px;transition:background .2s ease}.task:last-child{border-bottom:none}.task:hover{background:#252550}.task.completed{opacity:.6}.task.completed .task-text{text-decoration:line-through;color:#888}.task.overdue{background:#e9456026;border-left:3px solid #e94560}.task.due-soon{background:#ffc1071a;border-left:3px solid #ffc107}.checkbox-container{position:relative;width:24px;height:24px;flex-shrink:0}.checkbox-container input{opacity:0;width:0;height:0}.checkmark{position:absolute;top:0;left:0;width:24px;height:24px;background:#2d2d4a;border:2px solid #4d4d6a;border-radius:6px;cursor:pointer;transition:all .2s ease}.checkbox-container:hover .checkmark{border-color:#e94560}.checkbox-container input:checked~.checkmark{background:#e94560;border-color:#e94560}.checkmark:after{content:"";position:absolute;display:none;left:7px;top:3px;width:6px;height:12px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-container input:checked~.checkmark:after{display:block}.task-content{flex:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.task-text{font-size:.95rem;color:#ddd}.priority{font-size:.7rem;padding:3px 8px;border-radius:10px;text-transform:uppercase;font-weight:600}.priority-high{background:#e9456033;color:#e94560}.priority-medium{background:#ffc10733;color:#ffc107}.priority-low{background:#28a74533;color:#28a745}.task-date{display:flex;align-items:center;gap:8px;flex-shrink:0}.date-input{background:#2d2d4a;border:1px solid #3d3d5a;color:#ccc;padding:8px 12px;border-radius:6px;font-size:.85rem;cursor:pointer}.date-input::-webkit-calendar-picker-indicator{filter:invert(1);cursor:pointer}.date-status{font-size:.75rem;color:#e94560;white-space:nowrap}.task.due-soon .date-status{color:#ffc107}.footer{text-align:center;padding:30px;color:#666;border-top:1px solid #2d2d4a;margin-top:30px}@media(max-width:600px){.app{padding:15px}.header h1{font-size:1.6rem}.task{flex-wrap:wrap}.task-content{flex-basis:calc(100% - 40px)}.task-date{flex-basis:100%;padding-left:40px;margin-top:10px}.filters{gap:8px}.filters button{padding:8px 15px;font-size:.8rem}}