Add grouped inventory goals with import completion notifications.

Players can create named goal groups, set absolute item targets from inventory, track progress in a new Goals tab, and get banners when uploads complete goals or entire groups.

Co-authored-by: Cursor <cursoragent@cursor.com>

static/app.js

@@ -7,6 +7,8 @@ let state = {
   inventory: { search: "", categories: new Set(), sort: "category", highlightEquipped: false, collapsedGroups: new Set() },
   skills: { search: "", sort: "level", sortAsc: false },
   quests: { tab: "story", filter: "all" },
+  goals: { filter: "all", collapsedGroups: new Set(), data: { groups: [], ungrouped: [] } },
+  goalModalItem: null,
   history: { olderId: null, newerId: null, diff: null },
   charts: {},
   inventoryTimeline: null,
@@ -67,6 +69,7 @@ async function init() {
   setupViewerBanner();
   setupNav();
   setupUpload();
+  setupGoalModal();
   await loadData();
 }
 
@@ -154,6 +157,7 @@ function setupUpload() {
     if (result.imported) {
       await loadData();
       notifyImportSuccess(result);
+      showGoalsCompletedBanner(result);
     } else if (result.reason === "duplicate") {
       alert(t("import.duplicate"));
     }
@@ -233,9 +237,13 @@ function renderImportReport(meta) {
 
 async function loadData() {
   try {
-    const res = await fetch(`${apiBase()}/snapshot/latest`);
+    const [res] = await Promise.all([
+      fetch(`${apiBase()}/snapshot/latest`),
+      loadGoals(),
+    ]);
     if (!res.ok) {
       showEmpty(getViewerId() ? t("empty.noSaveWeb") : t("empty.noSave"));
+      renderGoals();
       return;
     }
     state.data = await res.json();
@@ -243,6 +251,7 @@ async function loadData() {
     renderAll();
   } catch (err) {
     showEmpty(t("empty.loadError", { message: err.message }));
+    renderGoals();
   }
 }
 
@@ -259,6 +268,7 @@ function renderAll() {
   renderOverview(d);
   renderSkills(d);
   renderInventory(d);
+  renderGoals();
   renderEquipment(d);
   renderQuests(d);
   renderCombat(d);
@@ -560,7 +570,7 @@ function bindInventorySparklines(container) {
 function renderInventoryTable(d, inv) {
   const items = getFilteredInventoryItems(d, inv);
   const showTrend = inventoryTrendEnabled();
-  const colSpan = showTrend ? 4 : 3;
+  const colSpan = showTrend ? 5 : 4;
   const grouped = {};
   for (const item of items) {
     if (!grouped[item.category]) grouped[item.category] = [];
@@ -586,6 +596,9 @@ function renderInventoryTable(d, inv) {
         ${showTrend ? renderItemSparkCell(i) : ""}
         <td class="col-qty">${fmt(i.qty)}</td>
         <td class="col-key"><code>${esc(i.key)}</code></td>
+        <td class="col-actions">
+          <button type="button" class="goal-add-btn" data-item-key="${esc(i.key)}" data-item-name="${esc(i.name)}" data-item-qty="${i.qty}" title="${esc(t("inventory.addGoalFor", { name: i.name }))}" aria-label="${esc(t("inventory.addGoalFor", { name: i.name }))}">+</button>
+        </td>
       </tr>`).join("");
     return header + rows;
   }).join("");
@@ -611,6 +624,7 @@ function renderInventoryTable(d, inv) {
           ${trendCol}
           <col class="col-qty">
           <col class="col-key">
+          <col class="col-actions">
         </colgroup>
         <thead>
           <tr>
@@ -618,12 +632,23 @@ function renderInventoryTable(d, inv) {
             ${trendHeader}
             <th class="col-qty">${esc(t("inventory.qty"))}</th>
             <th class="col-key">${esc(t("inventory.id"))}</th>
+            <th class="col-actions">${esc(t("goals.actions"))}</th>
           </tr>
         </thead>
         <tbody>${groupRows}</tbody>
       </table>
     </div>`;
 
+  results.querySelectorAll(".goal-add-btn").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      openGoalModal({
+        key: btn.dataset.itemKey,
+        name: btn.dataset.itemName,
+        qty: Number(btn.dataset.itemQty),
+      });
+    });
+  });
+
   results.querySelectorAll(".inv-group-toggle").forEach((btn) => {
     btn.addEventListener("click", () => {
       const group = btn.dataset.group;
@@ -705,6 +730,332 @@ function renderInventory(d) {
   ensureInventoryTimeline().then(() => renderInventoryTable(d, inv));
 }
 
+async function loadGoals() {
+  try {
+    const res = await fetch(`${apiBase()}/goals`);
+    state.goals.data = res.ok ? await res.json() : { groups: [], ungrouped: [] };
+  } catch {
+    state.goals.data = { groups: [], ungrouped: [] };
+  }
+}
+
+function goalMatchesFilter(goal, filter) {
+  if (filter === "open") return !goal.completed_at;
+  if (filter === "done") return !!goal.completed_at;
+  return true;
+}
+
+function renderGoalRow(goal) {
+  const done = !!goal.completed_at;
+  const deleteBtn = done
+    ? `<button type="button" class="goal-delete-btn" data-goal-id="${goal.id}">${esc(t("goals.delete"))}</button>`
+    : "";
+  return `<tr>
+    <td>${esc(goal.item_name)}</td>
+    <td>
+      <div class="goal-progress-text">${fmt(goal.current_qty)} / ${fmt(goal.target_qty)}</div>
+      <div class="progress-bar"><div class="progress-fill" style="width:${goal.progress_pct}%"></div></div>
+    </td>
+    <td><span class="badge ${done ? "badge-success" : "badge-warning"}">${esc(done ? t("goals.done") : t("goals.open"))}</span></td>
+    <td class="goal-actions-cell">${deleteBtn}</td>
+  </tr>`;
+}
+
+function renderGoalsTableBody(goals) {
+  if (!goals.length) {
+    return `<tr><td colspan="4" class="empty-state">${esc(t("goals.empty"))}</td></tr>`;
+  }
+  return goals.map(renderGoalRow).join("");
+}
+
+function bindGoalActions(panel) {
+  panel.querySelectorAll(".goal-delete-btn").forEach((btn) => {
+    btn.addEventListener("click", async () => {
+      if (!confirm(t("goals.deleteConfirm"))) return;
+      const res = await fetch(`${apiBase()}/goals/${btn.dataset.goalId}`, { method: "DELETE" });
+      if (res.ok) await loadGoals();
+      renderGoals();
+    });
+  });
+
+  panel.querySelectorAll(".goal-group-delete").forEach((btn) => {
+    btn.addEventListener("click", async () => {
+      const name = btn.dataset.groupName;
+      if (!confirm(t("goals.deleteGroupConfirm", { name }))) return;
+      const res = await fetch(`${apiBase()}/goal-groups/${btn.dataset.groupId}`, { method: "DELETE" });
+      if (res.ok) await loadGoals();
+      renderGoals();
+    });
+  });
+
+  panel.querySelectorAll(".goal-clear-completed").forEach((btn) => {
+    btn.addEventListener("click", async () => {
+      const ids = (btn.dataset.goalIds || "").split(",").filter(Boolean);
+      for (const id of ids) {
+        await fetch(`${apiBase()}/goals/${id}`, { method: "DELETE" });
+      }
+      await loadGoals();
+      renderGoals();
+    });
+  });
+
+  panel.querySelectorAll(".goal-group-toggle").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const group = btn.dataset.group;
+      const expanded = btn.getAttribute("aria-expanded") === "true";
+      btn.setAttribute("aria-expanded", expanded ? "false" : "true");
+      if (expanded) state.goals.collapsedGroups.add(group);
+      else state.goals.collapsedGroups.delete(group);
+      panel.querySelectorAll(`.goal-item-row[data-group="${group}"]`).forEach((row) => {
+        row.classList.toggle("collapsed", expanded);
+      });
+    });
+  });
+}
+
+function renderGoals() {
+  const panel = document.getElementById("tab-goals");
+  const g = state.goals;
+  const filter = g.filter;
+  const data = g.data || { groups: [], ungrouped: [] };
+
+  const groupSections = data.groups.map((group) => {
+    const goals = (group.goals || []).filter((goal) => goalMatchesFilter(goal, filter));
+    if (!goals.length && filter !== "all") return "";
+    const completed = goals.filter((goal) => goal.completed_at).length;
+    const total = goals.length;
+    const sectionKey = `group-${group.id}`;
+    const expanded = !g.collapsedGroups.has(sectionKey);
+    const completedIds = goals.filter((goal) => goal.completed_at).map((goal) => goal.id);
+    const headerActions = `
+      ${completedIds.length ? `<button type="button" class="goal-clear-completed" data-goal-ids="${completedIds.join(",")}">${esc(t("goals.clearCompleted"))}</button>` : ""}
+      <button type="button" class="goal-group-delete" data-group-id="${group.id}" data-group-name="${esc(group.name)}">${esc(t("goals.deleteGroup"))}</button>`;
+    const rows = goals.length
+      ? goals.map((goal) => {
+          const row = renderGoalRow(goal);
+          return row.replace("<tr>", `<tr class="goal-item-row ${expanded ? "" : "collapsed"}" data-group="${sectionKey}">`);
+        }).join("")
+      : `<tr class="goal-item-row ${expanded ? "" : "collapsed"}" data-group="${sectionKey}"><td colspan="4" class="empty-state">${esc(t("goals.empty"))}</td></tr>`;
+
+    return `
+      <div class="card goals-group-card">
+        <table class="goals-table">
+          <tbody>
+            <tr class="inv-group-row goal-group-header">
+              <td colspan="4">
+                <button type="button" class="inv-group-toggle goal-group-toggle" data-group="${sectionKey}" aria-expanded="${expanded}">
+                  <span class="inv-group-title">${esc(group.name)}</span>
+                  <span class="inv-group-meta">${esc(t("goals.groupProgress", { completed, total }))}</span>
+                </button>
+                <span class="goal-group-actions">${headerActions}</span>
+              </td>
+            </tr>
+            ${rows}
+          </tbody>
+        </table>
+      </div>`;
+  }).join("");
+
+  const ungrouped = (data.ungrouped || []).filter((goal) => goalMatchesFilter(goal, filter));
+  const ungroupedSection = (filter === "all" || ungrouped.length) ? `
+    <div class="card goals-group-card">
+      <h3 class="goals-ungrouped-title">${esc(t("goals.ungrouped"))}</h3>
+      <table class="goals-table">
+        <thead>
+          <tr>
+            <th>${esc(t("goals.item"))}</th>
+            <th>${esc(t("goals.progress"))}</th>
+            <th>${esc(t("goals.status"))}</th>
+            <th>${esc(t("goals.actions"))}</th>
+          </tr>
+        </thead>
+        <tbody>${renderGoalsTableBody(ungrouped)}</tbody>
+      </table>
+    </div>` : "";
+
+  const hasAny = groupSections || ungrouped.length || filter === "all";
+
+  panel.innerHTML = `
+    <div class="toolbar goals-toolbar">
+      <select class="select-input" id="goals-filter">
+        <option value="all" ${filter === "all" ? "selected" : ""}>${esc(t("goals.filterAll"))}</option>
+        <option value="open" ${filter === "open" ? "selected" : ""}>${esc(t("goals.filterOpen"))}</option>
+        <option value="done" ${filter === "done" ? "selected" : ""}>${esc(t("goals.filterDone"))}</option>
+      </select>
+      <button type="button" class="upload-btn" id="goals-create-group">${esc(t("goals.createGroup"))}</button>
+    </div>
+    ${hasAny ? groupSections + ungroupedSection : `<div class="card"><p class="empty-state">${esc(t("goals.empty"))}</p></div>`}`;
+
+  document.getElementById("goals-filter").addEventListener("change", (e) => {
+    state.goals.filter = e.target.value;
+    renderGoals();
+  });
+
+  document.getElementById("goals-create-group").addEventListener("click", async () => {
+    const name = prompt(t("goals.createGroupPrompt"));
+    if (!name || !name.trim()) return;
+    const res = await fetch(`${apiBase()}/goal-groups`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name: name.trim() }),
+    });
+    if (!res.ok) {
+      alert(t("goals.groupCreateFailed"));
+      return;
+    }
+    await loadGoals();
+    renderGoals();
+  });
+
+  bindGoalActions(panel);
+}
+
+async function fetchGoalGroups() {
+  const res = await fetch(`${apiBase()}/goal-groups`);
+  return res.ok ? await res.json() : [];
+}
+
+function setupGoalModal() {
+  document.getElementById("goal-modal-cancel").addEventListener("click", closeGoalModal);
+  document.getElementById("goal-modal-backdrop").addEventListener("click", closeGoalModal);
+  document.getElementById("goal-modal-group").addEventListener("change", (e) => {
+    document.getElementById("goal-modal-new-group-wrap").hidden = e.target.value !== "new";
+  });
+  document.getElementById("goal-modal-submit").addEventListener("click", submitGoalModal);
+}
+
+function applyGoalModalI18n() {
+  document.getElementById("goal-modal-title").textContent = t("goals.modalTitle");
+  document.getElementById("goal-modal-qty-label").textContent = t("goals.targetQty");
+  document.getElementById("goal-modal-group-label").textContent = t("goals.selectGroup");
+  document.getElementById("goal-modal-new-group-label").textContent = t("goals.newGroupName");
+  document.getElementById("goal-modal-cancel").textContent = t("goals.cancel");
+  document.getElementById("goal-modal-submit").textContent = t("inventory.addGoal");
+}
+
+async function openGoalModal(item) {
+  state.goalModalItem = item;
+  applyGoalModalI18n();
+  const modal = document.getElementById("goal-modal");
+  const errEl = document.getElementById("goal-modal-error");
+  errEl.hidden = true;
+  errEl.textContent = "";
+
+  document.getElementById("goal-modal-item").textContent = `${item.name} — ${t("goals.currentQty", { qty: fmt(item.qty) })}`;
+  document.getElementById("goal-modal-qty").value = Math.max(item.qty + 1, 1);
+  document.getElementById("goal-modal-new-group").value = "";
+  document.getElementById("goal-modal-new-group-wrap").hidden = true;
+
+  const groups = await fetchGoalGroups();
+  const sel = document.getElementById("goal-modal-group");
+  sel.innerHTML = `
+    <option value="">${esc(t("goals.noGroup"))}</option>
+    ${groups.map((g) => `<option value="${g.id}">${esc(g.name)}</option>`).join("")}
+    <option value="new">${esc(t("goals.newGroup"))}</option>`;
+
+  modal.hidden = false;
+}
+
+function closeGoalModal() {
+  document.getElementById("goal-modal").hidden = true;
+  state.goalModalItem = null;
+}
+
+async function submitGoalModal() {
+  const item = state.goalModalItem;
+  if (!item) return;
+  const errEl = document.getElementById("goal-modal-error");
+  errEl.hidden = true;
+
+  const targetQty = parseInt(document.getElementById("goal-modal-qty").value, 10);
+  if (!targetQty || targetQty <= 0) {
+    errEl.textContent = t("goals.createFailed");
+    errEl.hidden = false;
+    return;
+  }
+
+  let groupId = null;
+  const groupVal = document.getElementById("goal-modal-group").value;
+  if (groupVal === "new") {
+    const name = document.getElementById("goal-modal-new-group").value.trim();
+    if (!name) {
+      errEl.textContent = t("goals.groupCreateFailed");
+      errEl.hidden = false;
+      return;
+    }
+    const gRes = await fetch(`${apiBase()}/goal-groups`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name }),
+    });
+    if (!gRes.ok) {
+      errEl.textContent = t("goals.groupCreateFailed");
+      errEl.hidden = false;
+      return;
+    }
+    const gData = await gRes.json();
+    groupId = gData.id;
+  } else if (groupVal) {
+    groupId = parseInt(groupVal, 10);
+  }
+
+  const res = await fetch(`${apiBase()}/goals`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ item_key: item.key, target_qty: targetQty, group_id: groupId }),
+  });
+  const result = await res.json();
+  if (!res.ok) {
+    errEl.textContent = result.error || t("goals.createFailed");
+    errEl.hidden = false;
+    return;
+  }
+
+  closeGoalModal();
+  await loadGoals();
+  renderGoals();
+}
+
+function showGoalsCompletedBanner(result) {
+  const el = document.getElementById("goals-completed-banner");
+  const completed = result.goals_completed || [];
+  const groupsDone = result.groups_completed || [];
+  if (!completed.length && !groupsDone.length) {
+    el.hidden = true;
+    el.innerHTML = "";
+    return;
+  }
+
+  const items = completed.map((goal) => {
+    const groupPrefix = goal.group_name
+      ? t("goals.completedItemGroup", { name: goal.group_name })
+      : "";
+    return `<li>${esc(t("goals.completedItem", {
+      group: groupPrefix,
+      name: goal.item_name,
+      current: fmt(goal.current_qty),
+      target: fmt(goal.target_qty),
+    }))}</li>`;
+  }).join("");
+
+  const groupLines = groupsDone.map((g) =>
+    `<li class="goal-group-completed-line">${esc(t("goals.groupCompleted", { name: g.name }))}</li>`
+  ).join("");
+
+  el.hidden = false;
+  el.className = "goals-completed-banner import-report import-report-info";
+  el.innerHTML = `
+    <div class="import-report-header">
+      <strong>${esc(t("goals.completedBannerTitle"))}</strong>
+      <button type="button" class="import-report-dismiss" title="${esc(t("actions.dismiss"))}">×</button>
+    </div>
+    <ul class="import-report-list">${items}${groupLines}</ul>`;
+
+  el.querySelector(".import-report-dismiss").addEventListener("click", () => {
+    el.hidden = true;
+  });
+}
+
 function renderEquipment(d) {
   document.getElementById("tab-equipment").innerHTML = `
     <div class="card">

static/locales/de.json

@@ -8,6 +8,7 @@
     "overview": "Übersicht",
     "skills": "Skills",
     "inventory": "Inventar",
+    "goals": "Ziele",
     "equipment": "Ausrüstung",
     "quests": "Quests",
     "combat": "Kampf",
@@ -119,7 +120,9 @@
     "groupMeta": "{count} Items · {qty} Stk.",
     "trend": "Verlauf",
     "trendExpand": "Klicken für großes Diagramm",
-    "trendExpandFor": "Mengenverlauf für {name}"
+    "trendExpandFor": "Mengenverlauf für {name}",
+    "addGoal": "Ziel hinzufügen",
+    "addGoalFor": "Ziel für {name} hinzufügen"
   },
   "equipment": {
     "title": "Ausrüstung"
@@ -181,6 +184,7 @@
   },
   "viewer": {
     "landingLead": "Erstelle deinen persönlichen Save-Viewer. Kein Konto – nur ein privater Link zu deinen Daten.",
+    "gameLink": "Idle Fantasy auf GitHub",
     "featureDashboard": "Skills, Inventar, Quests und Verlauf",
     "featureUpload": "Backups im Browser importieren",
     "featurePrivate": "Deine Daten bleiben nur in deinem Viewer",
@@ -194,5 +198,41 @@
     "copyLink": "Link kopieren",
     "copied": "Kopiert!",
     "copyPrompt": "Viewer-Link kopieren:"
+  },
+  "goals": {
+    "filterAll": "Alle",
+    "filterOpen": "Offen",
+    "filterDone": "Erledigt",
+    "createGroup": "Gruppe anlegen",
+    "createGroupPrompt": "Gruppenname:",
+    "groupProgress": "{completed} / {total} erledigt",
+    "ungrouped": "Ohne Gruppe",
+    "item": "Item",
+    "progress": "Fortschritt",
+    "status": "Status",
+    "actions": "Aktionen",
+    "open": "Offen",
+    "done": "Erledigt",
+    "delete": "Löschen",
+    "deleteGroup": "Gruppe löschen",
+    "deleteGroupConfirm": "Gruppe „{name}“ löschen? Ziele bleiben ohne Gruppe erhalten.",
+    "deleteConfirm": "Dieses Ziel löschen?",
+    "clearCompleted": "Erledigte entfernen",
+    "empty": "Noch keine Ziele. Lege Ziele im Inventar-Tab an.",
+    "loadError": "Ziele konnten nicht geladen werden",
+    "createFailed": "Ziel konnte nicht angelegt werden",
+    "groupCreateFailed": "Gruppe konnte nicht angelegt werden",
+    "modalTitle": "Ziel hinzufügen",
+    "cancel": "Abbrechen",
+    "targetQty": "Zielmenge",
+    "selectGroup": "Gruppe",
+    "noGroup": "Keine Gruppe",
+    "newGroup": "Neue Gruppe…",
+    "newGroupName": "Name der neuen Gruppe",
+    "currentQty": "Aktuell: {qty}",
+    "completedBannerTitle": "Ziele erreicht",
+    "completedItem": "{group}{name}: {current} / {target}",
+    "completedItemGroup": "{name}: ",
+    "groupCompleted": "Gruppe erledigt: {name}"
   }
 }

static/locales/en.json

@@ -8,6 +8,7 @@
     "overview": "Overview",
     "skills": "Skills",
     "inventory": "Inventory",
+    "goals": "Goals",
     "equipment": "Equipment",
     "quests": "Quests",
     "combat": "Combat",
@@ -119,7 +120,9 @@
     "groupMeta": "{count} items · {qty} pcs",
     "trend": "Trend",
     "trendExpand": "Click to enlarge chart",
-    "trendExpandFor": "Quantity history for {name}"
+    "trendExpandFor": "Quantity history for {name}",
+    "addGoal": "Add goal",
+    "addGoalFor": "Add goal for {name}"
   },
   "equipment": {
     "title": "Equipment"
@@ -181,6 +184,7 @@
   },
   "viewer": {
     "landingLead": "Create your personal save viewer. No account – just a private link to your data.",
+    "gameLink": "Idle Fantasy on GitHub",
     "featureDashboard": "Skills, inventory, quests and history",
     "featureUpload": "Import backups in the browser",
     "featurePrivate": "Your data stays in your viewer only",
@@ -194,5 +198,41 @@
     "copyLink": "Copy link",
     "copied": "Copied!",
     "copyPrompt": "Copy your viewer link:"
+  },
+  "goals": {
+    "filterAll": "All",
+    "filterOpen": "Open",
+    "filterDone": "Completed",
+    "createGroup": "Create group",
+    "createGroupPrompt": "Group name:",
+    "groupProgress": "{completed} / {total} done",
+    "ungrouped": "Ungrouped",
+    "item": "Item",
+    "progress": "Progress",
+    "status": "Status",
+    "actions": "Actions",
+    "open": "Open",
+    "done": "Done",
+    "delete": "Delete",
+    "deleteGroup": "Delete group",
+    "deleteGroupConfirm": "Delete group \"{name}\"? Goals will be kept as ungrouped.",
+    "deleteConfirm": "Delete this goal?",
+    "clearCompleted": "Remove completed",
+    "empty": "No goals yet. Add goals from the Inventory tab.",
+    "loadError": "Failed to load goals",
+    "createFailed": "Could not create goal",
+    "groupCreateFailed": "Could not create group",
+    "modalTitle": "Add goal",
+    "cancel": "Cancel",
+    "targetQty": "Target quantity",
+    "selectGroup": "Group",
+    "noGroup": "No group",
+    "newGroup": "New group…",
+    "newGroupName": "New group name",
+    "currentQty": "Current: {qty}",
+    "completedBannerTitle": "Goals reached",
+    "completedItem": "{group}{name}: {current} / {target}",
+    "completedItemGroup": "{name}: ",
+    "groupCompleted": "Group completed: {name}"
   }
 }

static/style.css

@@ -732,7 +732,21 @@ body.inv-chart-modal-open {
 .landing-lead {
   color: var(--text-muted);
   line-height: 1.5;
-  margin: 0 0 16px;
+  margin: 0 0 12px;
+}
+
+.landing-game-link {
+  margin: 0 0 20px;
+  font-size: 0.9rem;
+}
+
+.landing-game-link a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.landing-game-link a:hover {
+  text-decoration: underline;
 }
 
 .landing-features {
@@ -855,6 +869,92 @@ body.inv-chart-modal-open {
 
 .viewer-copy-btn:hover { background: var(--accent-dim); color: #fff; }
 
+/* Goals */
+.goals-toolbar { gap: 12px; flex-wrap: wrap; }
+.goals-group-card { margin-bottom: 16px; }
+.goals-ungrouped-title { margin: 0 0 12px; font-size: 1rem; }
+.goals-table { width: 100%; border-collapse: collapse; }
+.goals-table th,
+.goals-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
+.goal-progress-text { font-size: 0.85rem; margin-bottom: 4px; }
+.goal-actions-cell { white-space: nowrap; }
+.goal-delete-btn,
+.goal-group-delete,
+.goal-clear-completed {
+  padding: 4px 8px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: var(--bg-hover);
+  color: var(--text);
+  cursor: pointer;
+  font-size: 0.78rem;
+  margin-left: 6px;
+}
+.goal-delete-btn:hover,
+.goal-group-delete:hover,
+.goal-clear-completed:hover { background: var(--accent-dim); color: #fff; }
+.goal-group-header td { position: relative; }
+.goal-group-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-left: 12px;
+  vertical-align: middle;
+}
+.goal-item-row.collapsed { display: none; }
+.goal-add-btn {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: var(--bg-hover);
+  color: var(--accent);
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1;
+  font-weight: 700;
+}
+.goal-add-btn:hover { background: var(--accent-dim); color: #fff; }
+.col-actions { width: 48px; text-align: center; }
+.goals-completed-banner { margin-bottom: 12px; }
+.goal-group-completed-line { font-weight: 600; }
+
+.goal-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+.goal-modal[hidden] { display: none; }
+.goal-modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+}
+.goal-modal-card {
+  position: relative;
+  width: 100%;
+  max-width: 420px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 24px;
+  z-index: 1;
+}
+.goal-modal-card h3 { margin: 0 0 8px; }
+.goal-modal-item { color: var(--text-muted); margin: 0 0 16px; font-size: 0.9rem; }
+.goal-modal-field { display: block; margin-bottom: 12px; }
+.goal-modal-field span { display: block; margin-bottom: 4px; font-size: 0.85rem; color: var(--text-muted); }
+.goal-modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 16px;
+}
+
 @media (max-width: 768px) {
   .sidebar {
     position: relative;