/* Shared across all three pages - this site has no build step, so plain
   linked CSS (rather than a bundler) is how "shared" works here. Colors
   match the other three household apps' design for visual consistency. */
:root {
  --bg: #f7f7f5;
  --panel: #ffffff;
  --border: #ddd8d0;
  --text: #2a2a28;
  --muted: #7a756c;
  --accent: #3d6b52;
}

body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

.app-header {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.6rem 1.5rem; background: var(--panel); border-bottom: 1px solid var(--border);
}
.app-header-brand { display: flex; align-items: center; }
.app-header-brand img { height: 36px; width: auto; display: block; }
.app-header-modules { display: flex; gap: 1.25rem; flex: 1; }
.app-header-modules a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 0.9rem; }
.app-header-modules a.active { color: var(--accent); }
.app-header-user { display: flex; gap: 0.75rem; align-items: center; color: var(--muted); font-size: 0.9rem; }
.app-header-user button {
  cursor: pointer; border-radius: 4px; border: 1px solid var(--border);
  background: var(--panel); padding: 0.4rem 0.8rem; color: var(--text); font-size: 0.9rem;
}