/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Variables ── */
:root {
  --purple:       #1C1C1A;
  --purple-dark:  #2D2A26;
  --purple-light: #4a4540;
  --accent:       #C4956A;
  --bg:           #F7F3EE;
  --white:        #ffffff;
  --text:         #2D2A26;
  --muted:        #8a8278;
  --border:       #E8E0D4;
  --success:      #22c55e;
  --warning:      #f59e0b;
  --error:        #ef4444;
  --info:         #3b82f6;
  --primary:      #C4956A;
  --radius:       4px;
  --shadow:       0 2px 12px rgba(28,28,26,0.10);
}

/* ── Alerts ── */
.alert {
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.alert-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; }
.alert-icon svg { width: 16px; height: 16px; display: block; }
.alert-success { background: #f0fdf4; color: #166534; border-left: 4px solid var(--success); }
.alert-error   { background: #fef2f2; color: #991b1b; border-left: 4px solid var(--error); }
.alert-warning { background: #fffbeb; color: #92400e; border-left: 4px solid var(--warning); }
.alert-info    { background: #eff6ff; color: #1e40af; border-left: 4px solid var(--info); }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
}
.badge-green { background: #f0fdf4; color: #16a34a; }
.badge-amber { background: #fffbeb; color: #d97706; }
.badge-red   { background: #fef2f2; color: #dc2626; }
.badge-gray  { background: #f3f4f6; color: #6b7280; }

/* ── Alert auto-dismiss ── */
.alert { transition: opacity .5s, margin .5s, padding .5s, max-height .5s; max-height: 200px; overflow: hidden; }
.alert.fading { opacity: 0; max-height: 0; margin: 0; padding: 0; }