@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;font-weight:400;color-scheme:dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%}*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #f8fafb;--bg-secondary: #ffffff;--bg-card: #ffffff;--bg-hover: #f0f4f5;--text-primary: #2d3436;--text-secondary: #636e72;--text-muted: #b2bec3;--accent-primary: #74b9ff;--accent-secondary: #a29bfe;--accent-success: #55efc4;--accent-warning: #ffeaa7;--accent-danger: #ff7675;--priority-high: #ff7675;--priority-medium: #fdcb6e;--priority-low: #55efc4;--border-color: #e8ecef;--shadow: 0 4px 20px rgba(0, 0, 0, .06);--radius-sm: 10px;--radius-md: 16px;--radius-lg: 24px}body{font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;background:var(--bg-primary);min-height:100vh;color:var(--text-primary);line-height:1.6}.app-container{min-height:100vh;padding:20px 16px;max-width:480px;margin:0 auto}.todo-header{text-align:center;margin-bottom:20px;padding:16px 0}.todo-header h1{font-size:1.8rem;font-weight:700;color:var(--text-primary);margin-bottom:4px}.todo-header p{color:var(--text-secondary);font-size:.85rem}.todo-stats{background:var(--bg-card);border-radius:var(--radius-lg);padding:20px;margin-bottom:16px;box-shadow:var(--shadow)}.stats-grid{display:flex;justify-content:space-around;margin-bottom:16px}.stat-item{text-align:center}.stat-value{font-size:1.75rem;font-weight:700;color:var(--text-primary)}.stat-value.active-count{color:var(--accent-primary)}.stat-value.completed-count{color:var(--accent-success)}.stat-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px}.progress-container{margin-top:16px}.progress-bar{height:8px;background:var(--bg-hover);border-radius:4px;overflow:hidden;margin-bottom:8px}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-success));border-radius:4px;transition:width .4s ease}.progress-text{text-align:center;font-size:.8rem;color:var(--text-secondary)}.clear-btn{width:100%;padding:12px;margin-top:16px;background:transparent;border:1px solid rgba(255,118,117,.3);border-radius:var(--radius-md);color:var(--accent-danger);font-size:.85rem;cursor:pointer;transition:all .2s ease}.clear-btn:hover{background:#ff767514;border-color:var(--accent-danger)}.todo-card{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}.todo-input{padding:20px;display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--border-color)}.cyber-input{width:100%;padding:14px 16px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:1rem;transition:all .2s ease}.cyber-input:focus{outline:none;border-color:var(--accent-primary);background:var(--bg-secondary)}.cyber-input::placeholder{color:var(--text-muted)}.input-options{display:flex;align-items:center;gap:10px}.datetime-group{flex:1}.datetime-inputs{display:flex;align-items:center;gap:4px}.datetime-input{width:48px;padding:10px 6px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.85rem;text-align:center;transition:all .2s ease}.datetime-input.small{width:40px;padding:10px 4px}.datetime-input:focus{outline:none;border-color:var(--accent-primary);background:var(--bg-secondary)}.datetime-input::placeholder{color:var(--text-muted);font-size:.75rem}.datetime-sep{color:var(--text-muted);font-size:.85rem}.datetime-suffix{color:var(--text-muted);font-size:.75rem;margin-left:2px}.priority-select{padding:10px 12px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.85rem;cursor:pointer;transition:all .2s ease;min-width:60px}.priority-select:focus{outline:none;border-color:var(--accent-primary)}.priority-select option{background:var(--bg-card);color:var(--text-primary)}.add-btn{width:44px;height:44px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));border:none;border-radius:var(--radius-sm);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.add-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #74b9ff66}.add-icon{width:20px;height:20px;stroke:#fff;stroke-width:2.5;fill:none}.todo-filters{display:flex;gap:8px;padding:12px 20px;border-bottom:1px solid var(--border-color)}.filter-btn{flex:1;padding:10px 16px;background:var(--bg-primary);border:1px solid transparent;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.85rem;cursor:pointer;transition:all .2s ease}.filter-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.filter-btn.active{background:var(--accent-primary);color:#fff}.todo-list{list-style:none;max-height:400px;overflow-y:auto}.todo-list::-webkit-scrollbar{width:4px}.todo-list::-webkit-scrollbar-track{background:transparent}.todo-list::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:2px}.todo-item{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-color);transition:all .2s ease;position:relative}.todo-item:last-child{border-bottom:none}.todo-item:hover{background:var(--bg-hover)}.todo-item.completed{opacity:.6}.todo-item.completed .todo-text{text-decoration:line-through;color:var(--text-muted)}.todo-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:0 4px 4px 0}.todo-item.priority-high:before{background:var(--priority-high)}.todo-item.priority-medium:before{background:var(--priority-medium)}.todo-item.priority-low:before{background:var(--priority-low)}.todo-content{display:flex;align-items:center;flex:1;gap:12px;min-width:0}.checkbox{width:24px;height:24px;border:2px solid var(--border-color);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s ease}.checkbox:hover{border-color:var(--accent-primary)}.checkbox.checked{background:var(--accent-success);border-color:var(--accent-success)}.check-icon{width:12px;height:12px;stroke:transparent;stroke-width:3;fill:none;transition:stroke .2s ease}.checkbox.checked .check-icon{stroke:#fff}.todo-info{flex:1;min-width:0}.todo-text{color:var(--text-primary);font-size:.95rem;display:block}.todo-datetime{color:var(--text-muted);font-size:.75rem;margin-top:2px;display:block}.priority-badge{padding:4px 10px;border-radius:12px;font-size:.7rem;font-weight:600;flex-shrink:0}.priority-badge.priority-high{background:#ff767526;color:var(--priority-high)}.priority-badge.priority-medium{background:#fdcb6e33;color:#e17055}.priority-badge.priority-low{background:#55efc433;color:#00b894}.delete-btn{width:32px;height:32px;background:transparent;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s ease;flex-shrink:0;margin-left:8px}.todo-item:hover .delete-btn{opacity:1}.delete-btn:hover{background:#ff767526}.delete-btn .delete-icon{width:16px;height:16px;stroke:var(--accent-danger);stroke-width:2}.empty-state{text-align:center;padding:50px 24px}.empty-icon{width:64px;height:64px;margin:0 auto 16px;position:relative}.empty-icon svg{width:100%;height:100%;stroke:var(--text-muted);opacity:.4}.icon-ring{position:absolute;inset:-8px;border:1px solid var(--border-color);border-radius:50%;animation:rotate 10s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.empty-title{font-size:1rem;font-weight:600;color:var(--text-secondary);margin-bottom:4px}.empty-subtitle{font-size:.85rem;color:var(--text-muted)}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.todo-item{animation:fadeIn .3s ease}@media(max-width:480px){.app-container{padding:16px 12px}.todo-header h1{font-size:1.5rem}.input-options{flex-wrap:wrap;gap:8px}.datetime-group{order:1;width:100%}.priority-select,.add-btn{flex:1}.todo-item{padding:14px 16px}.delete-btn{opacity:.7}}