/* Bauhaus: warm paper, primary colors, geometric forms and clear hierarchy. */
:root {
  --paper: #f4f0e6;
  --surface: #fffdf7;
  --ink: #202020;
  --red: #bd352b;
  --blue: #2449a4;
  --yellow: #f0c43d;
  --accent: var(--red);
  --line: #d4cfc3;
  --muted: #68645c;
  --green: var(--blue);
  --chart-0: var(--red);
  --chart-1: var(--blue);
  --chart-2: var(--yellow);
  --chart-3: var(--ink);
  --chart-4: #8c8173;
  --chart-5: #c7bdab;
  color: var(--ink);
  background: var(--paper);
}
::selection { background: var(--yellow); color: var(--ink); }
.project-summary {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 24px;
  margin-bottom: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.project-summary > div { flex: 1; min-width: 0; }
.project-summary h2 { font-size: 18px; overflow-wrap: anywhere; }
.project-summary p { margin-top: 8px; color: var(--muted); font-size: 12px; }
.project-status { color: var(--blue); font-size: 12px; }
button:focus-visible, a:focus-visible { outline-color: var(--blue); }
.sidebar { background: var(--paper); border-color: var(--ink); }
.workspace-label { margin-top: 0; }
.brand { font-weight: 800; }
.brand-mark { background: var(--red); border: 2px solid var(--ink); border-radius: 0; }
.brand small, .workspace-label, .sidebar-note, .local-note,
.breadcrumb, .topbar-right > span, .page-heading p, .hero p,
.stat-label, .stat-value small, .stat p, .section-heading h2 small,
.section-heading > span, .stage-step b, .stage-step small,
.empty, .empty p, .task-starter p, .explore, footer,
.chip, .entry-meta, .diary-copy > p, .entry-actions button,
.task-row small, .task-row.done b, .stage-row p, .stage-row small,
.budget-summary > div > span, .budget-summary p, th, td small,
.category-label > span, .category-label b, .footnote,
.purchase-card p, .muted, .settings-panel > p, .settings-panel dt,
.modal-body > p, .photo-upload span, .confirm-check {
  color: var(--muted);
}
.nav-item {
  color: var(--ink);
  border-radius: 0;
  font-weight: 650;
  transition: background-color 260ms cubic-bezier(.22, 1, .36, 1),
              color 200ms ease-out;
}
.nav-item.active { background: var(--blue); color: white; font-weight: 650; }
@media (hover: hover) and (pointer: fine) {
  .nav-item:not(.active):hover { background: var(--yellow); color: var(--ink); }
}
/* Selected state also wins over the base stylesheet's hover rule. */
.nav-item.active:hover { background: var(--blue); color: white; }
.nav-item small { background: var(--surface); color: var(--ink); border-radius: 0; }
.sidebar-note > .icon { color: var(--red); }
.local-note { border-color: var(--line); }
.local-note span, .hero-status i { background: var(--blue); }
.topbar { background: var(--paper); border-color: var(--ink); }
.breadcrumb span { color: var(--muted); }
.breadcrumb b { color: var(--ink); font-weight: 650; }
.avatar { background: var(--yellow); color: var(--ink); border: 1px solid var(--ink); font-weight: 700; }
.eyebrow { color: var(--blue); font-weight: 700; letter-spacing: 2px; }
h1 { font-weight: 800; letter-spacing: -.5px; }
.btn { border-radius: 0; font-weight: 600; }
.btn.primary { background: var(--red); border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.btn.primary:hover { background: #a72b23; box-shadow: 1px 1px 0 var(--ink); transform: translate(1px,1px); }
.btn.secondary { background: var(--surface); border-color: var(--ink); color: var(--ink); }
.btn.secondary:hover { background: var(--yellow); }
.hero { background: #e9e4d8; border: 1px solid var(--ink); border-radius: 0; }
.hero-content { max-width: 62%; }
.hero h2 { font-family: inherit; color: var(--ink); font-weight: 800; letter-spacing: 0; }
.pill { background: var(--yellow); border-color: var(--ink); color: var(--ink); border-radius: 0; font-weight: 600; }
.hero-status { color: var(--ink); }
.hero-bottom button, .section-heading > button, .task-starter button,
.explore button, .budget-summary button, .full-photos span { color: var(--blue); font-weight: 600; }
.house-art { width: 44%; right: 10px; bottom: 0; opacity: 1; }
.stat, .panel, .diary-card { background: var(--surface); border-color: var(--line); border-radius: 0; }
.stat { border-top: 4px solid var(--ink); }
.stat:nth-child(1) { border-top-color: var(--blue); }
.stat:nth-child(2) { border-top-color: var(--red); }
.stat:nth-child(3) { border-top-color: var(--yellow); }
.stat-value { color: var(--ink); font-weight: 750; font-variant-numeric: tabular-nums; }
.stat-label .icon { color: var(--ink); }
.section-heading h2 { font-weight: 750; }
.mini-track { background: #e4dfd3; border-radius: 0; }
.mini-track span { background: var(--blue); border-radius: 0; }
.stage-step:before { background: var(--line); }
.stage-step > span { background: var(--paper); color: var(--muted); border-color: #a8a194; }
.stage-step.done > span { background: var(--blue); border-color: var(--blue); }
.stage-step.active > span { background: var(--yellow); border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 4px #f7edc8; }
.stage-step.active b, .stage-step.active small { color: var(--ink); font-weight: 600; }
.empty > .icon { color: var(--blue); }
.empty h3, .task-starter b { color: var(--ink); }
.task-dot { border-color: var(--ink); border-radius: 0; }
.tip-card { background: var(--yellow); border-color: var(--ink); border-radius: 0; }
.tip-card > span, .tip-card h3, .tip-card p, .tip-card > button { color: var(--ink); }
.tip-card h3 { font-family: inherit; font-weight: 800; }
.demo-banner { background: var(--yellow); color: var(--ink); border-bottom: 1px solid var(--ink); }
.chip { border-radius: 0; }
.chip.selected { background: var(--ink); border-color: var(--ink); color: white; }
.chip:hover { border-color: var(--ink); }
.search { background: var(--surface); border-color: #a8a194; border-radius: 0; }
.search .icon, .search input { color: var(--ink); }
.diary-grid > .empty, .purchase-grid > .empty { border-color: #a8a194; border-radius: 0; background: var(--surface); }
.diary-cover > span { background: #202020db; border-radius: 0; }
.tag { background: var(--paper); border-color: var(--line); color: #514d45; border-radius: 0; }
.tag.done { background: #e6ebfa; border-color: #b3bfe0; color: var(--blue); }
.tag.active { background: var(--yellow); border-color: #d0ab35; color: var(--ink); }
.entry-title { font-weight: 650; }
.diary-card.compact { border-color: var(--line); }
.compact .diary-cover { border-radius: 0; }
.task-row input, .confirm-check input { accent-color: var(--blue); }
.icon-btn { color: #68645c; border-radius: 0; }
.icon-btn:hover { background: var(--yellow); color: var(--ink); }
.progress-summary { background: var(--blue); border-color: var(--ink); border-radius: 0; }
.progress-summary b, .progress-summary span { color: white; }
.progress-summary .mini-track { background: #ffffff40; }
.progress-summary .mini-track span { background: var(--yellow); }
.stage-number { color: var(--muted); border-color: #a8a194; }
.stage-row.done .stage-number { background: var(--blue); border-color: var(--blue); color: white; }
.stage-row.active .stage-number { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.budget-summary h2 { font-weight: 750; }
.green-text { color: var(--blue); }
.danger-text, .form-error { color: var(--red); }
th { background: var(--paper); }
td { border-color: var(--line); }
.amount { color: var(--ink); font-weight: 650; }
.purchase-icon { background: var(--yellow); color: var(--ink); border: 1px solid var(--ink); border-radius: 0; }
.purchase-bottom b { color: var(--ink); font-weight: 750; }
.contact-avatar { background: var(--blue); color: white; border: 1px solid var(--ink); font-weight: 700; }
.contact-card:nth-child(3n+2) .contact-avatar { background: var(--red); }
.contact-card:nth-child(3n+3) .contact-avatar { background: var(--yellow); color: var(--ink); }
.contact-card h3, .purchase-card h3 { font-weight: 650; }
dialog { background: var(--surface); color: var(--ink); border: 2px solid var(--ink); border-radius: 0; box-shadow: 8px 8px 0 #20202060; }
dialog::backdrop { background: #20202077; backdrop-filter: blur(2px); }
.modal-heading { border-bottom: 2px solid var(--ink); }
.modal-heading h2 { font-weight: 750; }
.field { color: #514d45; }
.field input, .field select, .field textarea { background: var(--surface); color: var(--ink); border-color: #a8a194; border-radius: 0; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 2px #2449a426; }
.field input::placeholder, .field textarea::placeholder { color: #7c766b; }
.photo-upload { background: var(--paper); color: var(--blue); border-color: var(--blue); border-radius: 0; }
.photo-previews img, .full-photos img { border-radius: 0; }
.photo-previews button { background: var(--ink); }
#toast { background: var(--ink); border: 1px solid var(--ink); border-radius: 0; box-shadow: 4px 4px 0 var(--yellow); }
@media (max-width: 900px) {
  .hero-content { max-width: 75%; }
  .house-art { width: 41%; right: -10px; bottom: 0; }
}
@media (max-width: 640px) {
  .page-heading { align-items: center; }
  .page-heading > .btn { margin-top: 0; }
  .project-summary { padding: 18px; gap: 16px; flex-wrap: wrap; }
  .project-summary > div { flex-basis: 100%; }
  .project-summary .btn { margin-left: auto; }
  .sidebar { background: var(--paper); border-top: 2px solid var(--ink); border-right: 0; backdrop-filter: none; }
  .hero-content { max-width: 100%; }
  .hero { min-height: 325px; }
  .hero h2 { font-size: 25px; }
  .hero-bottom { margin-top: 110px; }
  .house-art { width: 145px; height: 130px; right: 12px; bottom: 45px; opacity: 1; }
  .budget-summary > div:first-child { border-color: var(--line); }
}