/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
  --bg: #f8f8f8;
  --surface: #ffffff;
  --border: #e5e5e5;
  --text: #111111;
  --text-muted: #888888;
  --text-subtle: #555555;

  --need: #16a34a;
  --need-bg: #dcfce7;
  --want: #d97706;
  --want-bg: #fef3c7;
  --luxury: #7c3aed;
  --luxury-bg: #ede9fe;

  --radius: 8px;
  --radius-sm: 6px;
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 20px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.9rem; transition: opacity 0.15s;
}
.btn:hover { opacity: 0.85; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--text); color: #fff; width: 100%; padding: 12px; font-size: 0.95rem; }
.btn-full { width: 100%; }
.btn-ghost { background: none; color: var(--text-muted); font-size: 0.85rem; padding: 4px 8px; border-radius: 4px; }
.btn-ghost:hover { background: var(--border); color: var(--text); }
.btn-icon { background: none; color: var(--text-muted); font-size: 0.85rem; padding: 2px 5px; border-radius: 4px; }
.btn-icon:hover { background: var(--border); color: var(--text); }
.btn-oauth {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  padding: 12px 20px; border-radius: var(--radius-sm);
  font-size: 0.95rem; font-weight: 500; color: var(--text);
  transition: background 0.15s;
}
.btn-oauth:hover { background: var(--bg); }

/* ── Login page ─────────────────────────────────────────────────────────────── */
.page-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 40px 36px; width: 100%; max-width: 360px;
  text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.login-logo { font-size: 1.8rem; font-weight: 800; letter-spacing: -1px; margin-bottom: 6px; }
.login-tagline { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 32px; }
.login-buttons { display: flex; flex-direction: column; gap: 12px; }

/* ── Nav ────────────────────────────────────────────────────────────────────── */
.nav {
  background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; height: 56px; position: sticky; top: 0; z-index: 100;
}
.nav-logo { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.5px; }
.nav-links { display: flex; gap: 24px; }
.nav-link { font-size: 0.9rem; color: var(--text-muted); padding-bottom: 2px; }
.nav-link--active { color: var(--text); border-bottom: 2px solid var(--text); }
.nav-link:hover:not(.nav-link--active) { color: var(--text); }
.nav-user { display: flex; align-items: center; gap: 10px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--border); }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.container { max-width: 560px; margin: 0 auto; padding: 24px 16px 48px; }

/* ── Month nav ──────────────────────────────────────────────────────────────── */
.month-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.month-label { font-size: 1rem; font-weight: 700; }
.month-nav .btn-ghost { font-size: 1.2rem; padding: 2px 10px; }

/* ── Summary card ───────────────────────────────────────────────────────────── */
.summary-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; display: flex;
  align-items: center; gap: 20px; margin-bottom: 12px;
}
.donut-wrapper { flex-shrink: 0; }
.donut {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--border);
  -webkit-mask: radial-gradient(farthest-side, transparent 54%, black 55%);
  mask: radial-gradient(farthest-side, transparent 54%, black 55%);
}
.summary-detail { flex: 1; min-width: 0; }
.summary-total-label { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
.summary-total { font-size: 1.8rem; font-weight: 800; letter-spacing: -1px; margin-bottom: 8px; }
.summary-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.legend-item { font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.legend-need  { color: var(--need);    background: var(--need-bg); }
.legend-want  { color: var(--want);    background: var(--want-bg); }
.legend-luxury { color: var(--luxury); background: var(--luxury-bg); }

/* ── Category breakdown ─────────────────────────────────────────────────────── */
.category-breakdown { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.breakdown-row {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  display: flex; justify-content: space-between; align-items: center;
  border-left-width: 3px;
}
.breakdown-row--need    { border-left-color: var(--need); }
.breakdown-row--want    { border-left-color: var(--want); }
.breakdown-row--luxury  { border-left-color: var(--luxury); }
.breakdown-left { display: flex; align-items: center; gap: 10px; }
.breakdown-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.breakdown-dot--need    { background: var(--need); }
.breakdown-dot--want    { background: var(--want); }
.breakdown-dot--luxury  { background: var(--luxury); }
.breakdown-name { font-size: 0.9rem; font-weight: 600; }
.breakdown-count { font-size: 0.75rem; color: var(--text-muted); margin-top: 1px; }
.breakdown-right { text-align: right; }
.breakdown-amount { font-size: 1rem; font-weight: 700; }
.breakdown-amount--need    { color: var(--need); }
.breakdown-amount--want    { color: var(--want); }
.breakdown-amount--luxury  { color: var(--luxury); }
.breakdown-pct { font-size: 0.75rem; color: var(--text-muted); margin-top: 1px; }

/* ── Filter pills ────────────────────────────────────────────────────────────── */
.filter-pills { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.pill {
  padding: 5px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 600;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  cursor: pointer; transition: all 0.15s;
}
.pill--active, .pill:hover { background: var(--text); color: #fff; border-color: var(--text); }
.pill--need.pill--active   { background: var(--need);    border-color: var(--need);    color: #fff; }
.pill--want.pill--active   { background: var(--want);    border-color: var(--want);    color: #fff; }
.pill--luxury.pill--active { background: var(--luxury);  border-color: var(--luxury);  color: #fff; }

/* ── Entry rows ──────────────────────────────────────────────────────────────── */
.entries-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.entry-row {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  display: flex; justify-content: space-between; align-items: center;
  border-left-width: 3px;
}
.entry-row--need    { border-left-color: var(--need); }
.entry-row--want    { border-left-color: var(--want); }
.entry-row--luxury  { border-left-color: var(--luxury); }
.entry-info { min-width: 0; flex: 1; margin-right: 12px; }
.entry-name { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.entry-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.entry-amount { font-size: 1rem; font-weight: 700; }
.entry-amount--need    { color: var(--need); }
.entry-amount--want    { color: var(--want); }
.entry-amount--luxury  { color: var(--luxury); }
.entry-actions { display: flex; gap: 2px; }
.empty-state { text-align: center; color: var(--text-muted); padding: 40px 0; font-size: 0.9rem; }

/* ── Modal ───────────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.3);
  opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 200;
}
.modal-backdrop--visible { opacity: 1; pointer-events: auto; }
.modal-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 420px;
  background: var(--surface); box-shadow: -4px 0 24px rgba(0,0,0,0.1);
  transform: translateX(100%); transition: transform 0.25s ease; z-index: 201;
  overflow-y: auto; display: flex; flex-direction: column;
}
.modal-panel--open { transform: translateX(0); }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.modal-title { font-size: 1rem; font-weight: 700; }
.modal-close { font-size: 1.4rem; color: var(--text-muted); line-height: 1; padding: 2px 6px; }
.modal-form { padding: 24px; flex: 1; display: flex; flex-direction: column; gap: 16px; }

/* ── Form elements ────────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 0.8rem; font-weight: 600; color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.4px; }
.form-input {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; font-size: 0.95rem; background: var(--surface); color: var(--text);
  transition: border-color 0.15s;
}
.form-input:focus { outline: none; border-color: var(--text); }
textarea.form-input { resize: vertical; }
.form-group--inline { flex-direction: row; align-items: center; justify-content: space-between; }
.form-group--inline input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--text); }
.form-error { color: #dc2626; font-size: 0.85rem; padding: 8px 12px; background: #fef2f2; border-radius: var(--radius-sm); }