:root{--bg-main:#f8fafc;--bg-card:#ffffff;--border-color:#e2e8f0;--text-main:#1e293b;--text-muted:#64748b;--primary:#3b82f6;--primary-hover:#2563eb;--success:#10b981;--danger:#ef4444;--hover-bg:#f1f5f9;--shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1)}.todo-theme{font-family:'Inter',system-ui,sans-serif;color:var(--text-main);background:var(--bg-main);padding:1.5rem;border-radius:1rem;min-height:600px;max-width:800px;margin:0 auto;box-shadow:var(--shadow)}.text-center{text-align:center}.text-right{text-align:right}.text-3xl{font-size:1.875rem}.font-bold{font-weight:700}.text-muted{color:var(--text-muted)}.text-primary{color:var(--primary)}.text-danger{color:var(--danger)}.text-sm{font-size:.85rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.flex{display:flex}.gap-2{gap:.5rem}.input-wrapper{position:relative;display:flex;box-shadow:0 2px 10px rgb(0 0 0 / .05);border-radius:.75rem;background:var(--bg-card)}.input-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--primary);width:20px;height:20px}.main-input{width:100%;padding:1.25rem 1rem 1.25rem 3rem;border:2px solid #fff0;border-radius:.75rem;font-size:1.1rem;background:#fff0;outline:none;transition:all 0.2s}.main-input:focus{border-color:var(--primary)}.btn-add{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);border-radius:.5rem;padding:.5rem}.tabs-nav{display:flex;border-bottom:2px solid var(--border-color);gap:1rem}.tab-btn{background:#fff0;border:none;color:var(--text-muted);padding:.75rem 1rem;font-weight:600;cursor:pointer;border-bottom:2px solid #fff0;margin-bottom:-2px;display:flex;align-items:center;gap:.5rem;transition:all 0.2s}.tab-btn:hover{color:var(--text-main)}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.tab-btn i{width:18px;height:18px}.tags-filter{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.tag-badge{background:var(--bg-card);border:1px solid var(--border-color);padding:.25rem .75rem;border-radius:2rem;font-size:.85rem;cursor:pointer;color:var(--text-muted);transition:all 0.2s}.tag-badge:hover{background:var(--hover-bg)}.tag-badge.active{background:var(--primary);color:#fff;border-color:var(--primary)}.task-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.task-item{background:var(--bg-card);border:1px solid var(--border-color);border-radius:.5rem;padding:.75rem 1rem;display:flex;align-items:center;gap:1rem;transition:all 0.2s;cursor:grab}.task-item:active{cursor:grabbing;box-shadow:var(--shadow)}.task-item.dragging{opacity:.5}.task-item.completed .task-text{text-decoration:line-through;color:var(--text-muted)}.task-drag-handle{color:#cbd5e1;cursor:grab}.task-checkbox{width:20px;height:20px;border-radius:50%;border:2px solid var(--border-color);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff0;transition:all 0.2s}.task-checkbox:hover{border-color:var(--primary)}.task-item.completed .task-checkbox{background:var(--success);border-color:var(--success);color:#fff}.task-checkbox i{width:14px;height:14px}.task-content{flex:1;display:flex;flex-direction:column}.task-text{font-size:1rem;outline:none}.task-meta{display:flex;gap:.5rem;font-size:.75rem;margin-top:.25rem}.meta-tag{color:var(--primary);font-weight:600}.meta-time{color:var(--text-muted);background:var(--hover-bg);padding:.1rem .4rem;border-radius:.25rem}.task-actions{display:flex;gap:.5rem;opacity:0;transition:opacity 0.2s}.task-item:hover .task-actions{opacity:1}.btn-icon{background:#fff0;border:none;cursor:pointer;color:var(--text-muted);padding:.25rem}.btn-icon:hover{color:var(--danger)}.btn-icon i{width:16px;height:16px}@media (max-width:640px){.task-actions{opacity:1}}.empty-icon{width:48px;height:48px;margin-bottom:1rem;opacity:.5}.focus-container{padding:3rem 1rem}.focus-task{font-size:2rem;font-weight:700;line-height:1.3;color:var(--text-main)}.btn-lg{padding:1rem 2rem;font-size:1.1rem;border-radius:2rem}.app-footer{display:flex;justify-content:space-between;align-items:center;padding-top:1.5rem;border-top:1px solid var(--border-color);flex-wrap:wrap;gap:1rem}.time-calc{display:flex;align-items:center;gap:.5rem;font-size:.95rem;color:var(--text-muted)}.time-calc i{width:18px;height:18px}.btn{background:#fff0;border:none;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;transition:all 0.2s;border-radius:.5rem}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover)}.btn-outline{border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-main)}.btn-outline:hover{background:var(--hover-bg)}.btn-sm{padding:.4rem .75rem;font-size:.85rem}.btn-text{background:#fff0;border:none;color:var(--primary);cursor:pointer;font-size:.85rem;text-decoration:underline}.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100px);background:var(--text-main);color:#fff;padding:.75rem 1.5rem;border-radius:2rem;font-weight:600;opacity:0;transition:all 0.3s;z-index:1000}.toast.show{transform:translateX(-50%) translateY(0);opacity:1}