:root{--card-bg:#fbf6f1;--card-completed:#e6ffea;--card-prioritized:#fff8e6;--card-border:#fff;--transition-fast:.18s ease-in-out;--app-bg:#694a36}body{background:var(--app-bg);min-height:100vh;margin:0}.task-card{background:var(--card-bg);border:1px solid var(--card-border);width:fit-content;max-width:100%;transition:background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);border-radius:8px;flex-direction:row;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;padding:12px;display:flex}.task-card.completed{color:#4a4a4a;opacity:.85;background:#d3d3d3;border-color:#7a7a7a}.task-card.prioritized{background:var(--card-prioritized);border-color:#0d6efd;box-shadow:0 4px 12px #0d6efd1f}.task-card.completed.prioritized{background:linear-gradient(135deg, var(--card-prioritized), var(--card-completed))}button.btn-complete{color:#fff;background:#28a745;border:none;border-radius:6px;margin:0;padding:6px 10px}button.btn-decomplete{color:#fff;background:#d9dc35;border:none;border-radius:6px;margin:0;padding:6px 10px}button.btn-prioritize{color:#fff;background:#0d6efd;border:none;border-radius:6px;margin:0;padding:6px 10px}button.btn-deprioritize{color:#fff;background:#fd7e14;border:none;border-radius:6px;margin:0;padding:6px 10px}button.btn-deletetask{color:#fff;background:#dc3545;border:none;border-radius:6px;margin:0;padding:6px 10px}.task-filter{flex-direction:column;align-items:center;margin:12px 0 20px;display:flex}.filter-bar{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.filter-bar input{border:1px solid var(--card-border);border-radius:6px;padding:8px 10px}.filter-bar button{color:#fff;cursor:pointer;background:#000;border:none;border-radius:6px;padding:8px 10px}.top-section,.prioritized-section,.not-prioritized-section,.completed-section{flex-direction:column;align-items:center;margin-bottom:18px;display:flex}.completed-section{margin-top:24px;padding-top:8px}.top-section h3,.not-prioritized-section h3,.completed-section h3{text-align:center;color:#f9f7f7;margin:0 0 8px;font-size:1.1rem}
