:root {
  --color-sun: #F9A825;
  --color-peach: #FFCC80;
  --color-lavender: #CE93D8;
  --color-sand: #FFF8E1;
  --color-sky: #B3E5FC;
  --color-calm: #80CBC4;
  --color-bg: #FFFBF5;
  --color-surface: #FFFFFF;
  --color-text: #3E2723;
  --color-text-secondary: #795548;
  --color-border: #EFEBE9;
  --color-success: #66BB6A;
  --color-warning: #FFA726;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(62, 39, 35, 0.08);
  --shadow-md: 0 4px 12px rgba(62, 39, 35, 0.1);
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  min-height: 44px;
  min-width: 44px;
}

input, textarea, select { font: inherit; color: inherit; }

/* Page shell */
.shell { min-height: 100dvh; display: flex; flex-direction: column; }
.shell-header {
  background: linear-gradient(135deg, var(--color-peach), var(--color-lavender));
  padding: 20px;
}
.shell-title { font-size: 28px; font-weight: 700; }
.shell-main { flex: 1; padding: 20px; padding-bottom: 96px; }

/* Bottom nav */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-around;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 6px 4px;
}
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 11px; opacity: 0.6; padding: 6px 8px; border-radius: var(--radius-sm);
}
.nav-item.active { opacity: 1; background: var(--color-sand); }
.nav-icon { font-size: 20px; }

/* Card */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.card-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.card-section-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; }

/* Buttons */
.btn-primary {
  width: 100%; padding: 14px;
  background: var(--color-sun); color: var(--color-text);
  border-radius: var(--radius-md); font-weight: 600; font-size: 16px;
}
.btn-secondary {
  width: 100%; padding: 12px;
  background: var(--color-sand); border-radius: var(--radius-sm);
  font-weight: 600; margin-bottom: 8px; font-size: 16px;
}
.btn-light {
  flex: 1; padding: 14px;
  background: var(--color-calm); border-radius: var(--radius-md); font-weight: 600;
}
.btn-danger {
  width: 100%; padding: 12px;
  background: #FFCDD2; color: #C62828;
  border-radius: var(--radius-sm); font-weight: 600; margin-bottom: 8px;
}

/* Inputs */
.input, .textarea, .select {
  width: 100%; padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-size: 16px;
}
.textarea { resize: vertical; min-height: 60px; }
label { font-weight: 600; display: block; margin: 12px 0 8px; }