.app{flex-direction:column;max-width:600px;min-height:100vh;margin:0 auto;padding:40px 20px;display:flex}.header{text-align:center;margin-bottom:32px}.header h1{color:var(--text);margin-bottom:8px;font-size:32px}.subtitle{color:var(--text-secondary);font-size:15px}.main{background:var(--card-bg);box-shadow:var(--shadow);border-radius:12px;flex:1;padding:24px}.add-form{gap:12px;margin-bottom:20px;display:flex}.add-input{border:2px solid var(--border);border-radius:8px;outline:none;flex:1;padding:10px 16px;font-size:15px;transition:border-color .2s}.add-input:focus{border-color:var(--primary)}.add-btn{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:10px 24px;font-size:15px;transition:background .2s}.add-btn:hover{background:var(--primary-hover)}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.remaining{color:var(--text-secondary);font-size:14px}.filters{gap:6px;display:flex}.filter-btn{border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;background:0 0;border-radius:6px;padding:5px 14px;font-size:13px;transition:all .2s}.filter-btn:hover{border-color:var(--primary);color:var(--primary)}.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.task-list{list-style:none}.task-item{border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:14px 16px;transition:background .15s;display:flex}.task-item:last-child{border-bottom:none}.task-item:hover{background:#fafafa}.task-item.done .task-text{color:var(--text-secondary);text-decoration:line-through}.check-btn{cursor:pointer;-webkit-user-select:none;user-select:none;flex-shrink:0;font-size:20px}.task-text{flex:1;font-size:15px}.delete-btn{color:#ccc;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:16px;transition:all .15s}.delete-btn:hover{color:var(--danger);background:#ff4d4f14}.empty{text-align:center;color:var(--text-secondary);padding:48px 0;font-size:16px}.footer{text-align:center;color:var(--text-secondary);padding:24px 0 0;font-size:13px}*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f0f2f5;--card-bg:#fff;--text:#333;--text-secondary:#888;--primary:#4f6ef7;--primary-hover:#3b5de7;--success:#52c41a;--warning:#faad14;--danger:#ff4d4f;--border:#e8e8e8;--shadow:0 2px 8px #00000014}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}#root{min-height:100vh}