:root {
  color-scheme: dark;
  --ink: #f3ead7;
  --muted: #b9aa91;
  --night: #160f0d;
  --wood: #241713;
  --panel: #2d1d18;
  --line: #574033;
  --oxblood: #7b302c;
  --ochre: #d19b45;
  --green: #81916a;
  --danger: #e0a19a;
  --radius: 1.1rem;
}
* { box-sizing: border-box; }
html { background: var(--night); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 0%, rgb(123 48 44 / .18), transparent 32rem),
    linear-gradient(145deg, var(--night), #1e1511 60%, #17110e);
  font: 16px/1.55 ui-rounded, "SF Pro Rounded", "SF Pro Text", system-ui, sans-serif;
}
a { color: var(--ochre); }
button, input { font: inherit; }
.shell { width: min(100% - 2rem, 58rem); margin: 0 auto; padding: 2rem 0 4rem; }
.login-shell { width: min(100% - 2rem, 27rem); display: grid; min-height: 100vh; place-content: center; }
.mark { color: var(--ochre); font-size: .78rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .5rem; font: 650 clamp(2rem, 7vw, 3.6rem)/1.03 ui-serif, Georgia, serif; letter-spacing: -.035em; }
h2 { font: 650 1.4rem/1.2 ui-serif, Georgia, serif; }
.lede, .muted { color: var(--muted); }
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgb(53 34 27 / .94), rgb(36 23 19 / .97));
  box-shadow: 0 1.1rem 3rem rgb(0 0 0 / .17);
}
.login-card { padding: clamp(1.35rem, 6vw, 2.25rem); }
label { display: block; margin: 1.5rem 0 .45rem; font-weight: 700; }
input {
  width: 100%;
  min-height: 3rem;
  border: 1px solid #76604c;
  border-radius: .75rem;
  padding: .7rem .85rem;
  color: var(--ink);
  background: #160f0d;
}
input:focus, button:focus-visible, summary:focus-visible { outline: 3px solid var(--ochre); outline-offset: 3px; }
button {
  min-height: 3rem;
  border: 1px solid #d7a55a;
  border-radius: .75rem;
  padding: .68rem 1.1rem;
  color: #1c120d;
  background: var(--ochre);
  font-weight: 780;
  cursor: pointer;
  transition: transform 120ms ease, filter 160ms ease;
}
button:hover { filter: brightness(1.08); }
button:active { transform: scale(.98); }
.button-secondary { min-height: 2.75rem; color: var(--ink); border-color: var(--line); background: transparent; }
.form-actions { margin-top: 1rem; }
.error {
  margin: 1rem 0 0;
  border-left: 3px solid var(--danger);
  padding: .65rem .8rem;
  color: #f8d5d0;
  background: rgb(123 48 44 / .2);
}
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.topbar form { flex: 0 0 auto; }
.date { margin-bottom: 0; color: var(--muted); }
.metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin: 1.5rem 0 2rem; }
.metric { min-width: 0; padding: 1rem; }
.metric strong { display: block; font-size: clamp(1.35rem, 7vw, 2rem); line-height: 1.1; }
.metric span { color: var(--muted); font-size: .83rem; }
.metric small { display: block; margin-top: .35rem; color: var(--green); }
.entries { display: grid; gap: .75rem; }
.entry { padding: 1rem 1.1rem; }
.entry-head { display: flex; justify-content: space-between; gap: 1rem; }
.entry h3 { margin-bottom: .3rem; font-size: 1.02rem; }
.entry-data { color: var(--ochre); white-space: nowrap; font-size: .9rem; }
.note { margin: .55rem 0 0; color: var(--muted); font-style: italic; }
.history { margin-top: 2.5rem; }
details { border-top: 1px solid var(--line); }
summary { padding: 1rem .25rem; cursor: pointer; font-weight: 700; }
.history-body { padding: 0 .25rem 1rem; color: var(--muted); white-space: pre-wrap; }
.empty { padding: 1.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (min-width: 42rem) { .metrics { grid-template-columns: repeat(5, 1fr); } .shell { padding-top: 3rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }