:root {
  --bg: #fbfbfd;
  --surface: #ffffff;
  --card: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --primary: #0071e3; /* Apple blue */
  --accent: #34c759; /* Apple green */
  --warning: #ff9f0a;
  --danger: #ff3b30;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
}

.app-header {
  background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.0));
}

.card {
  background: var(--card);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.card__image { background: #f5f5f7; }

.control select { background: #f5f5f7; color: var(--text); border-color: rgba(0,0,0,0.08); }
.control select:focus { box-shadow: 0 0 0 3px rgba(0,113,227,0.2); border-color: var(--primary); }

.count { background: #f5f5f7; border-color: rgba(0,0,0,0.08); }

.card__meta .chip { background: #f5f5f7; border-color: rgba(0,0,0,0.06); }

.app-footer { color: var(--muted); }