:root {
  --bg:          #faf6ee;
  --surface:     #ffffff;
  --surface2:    #f1ead9;
  --border:      #ddd3bd;
  --text:        #2d2a22;
  --muted:       #6f6753;
  --accent:      #3e6b35;
  --accent-strong: #2f5228;
  --fire:        #c65420;
  --ok:          #3e8a2e;
  --warn:        #b5820a;
  --danger:      #b3402a;
  --chart-grid:  #e7dfcc;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Alegreya Sans", "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}

a { color: var(--accent); }
a:hover { color: var(--accent-strong); }

header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.8rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.header-title {
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
}

.header-icon { color: var(--fire); margin-right: 0.45rem; }

.header-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.85rem;
}

button {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.42rem 1rem;
}

button:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

.btn-quiet {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
}

.btn-quiet:hover { background: var(--surface2); border-color: var(--border); color: var(--text); }

input, select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.42rem 0.6rem;
}

input:focus, select:focus { outline: none; border-color: var(--accent); }

.placeholder { color: var(--muted); font-size: 0.9rem; }
.error { color: var(--danger); font-size: 0.85rem; }
.hidden { display: none !important; }