/* HEDEFLER — görsel katman */
.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.goal-card {
  display: grid; gap: 10px;
  padding: 15px 17px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
}
.goal-card.done { opacity: .62; }
.goal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.goal-head h3 { margin: 3px 0 2px; font-size: .98rem; }
.goal-head p { margin: 0; color: var(--muted); font-size: .82rem; }
.goal-period {
  font-size: .66rem; font-weight: 700;
  letter-spacing: .09em;
  color: var(--accent);
  text-transform: uppercase;
}
.goal-pct {
  font-size: 1.3rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.goal-bar {
  height: 7px;
  border-radius: 999px;
  background: var(--surface-muted);
  overflow: hidden;
}
.goal-bar i {
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #7c5cd6));
  transition: width .5s var(--ease);
}
.goal-card.done .goal-bar i { background: var(--green); }
.goal-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.goal-foot small { color: var(--faint); font-size: .76rem; }
.goal-actions { display: flex; gap: 5px; }
.goal-empty {
  grid-column: 1 / -1;
  display: grid; justify-items: center; gap: 7px;
  padding: 40px 18px;
  text-align: center;
  color: var(--faint);
  border: 1px dashed var(--line);
  border-radius: var(--radius-l);
  background: var(--surface-soft);
}
.goal-empty strong { color: var(--ink); font-size: 1rem; }
.goal-form {
  margin-top: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
}
.goal-form h3 { margin: 0 0 12px; }