:root {
  color-scheme: light;
  --paper:#f4f3ec;
  --ink:#202f28;
  --muted:#53675b;
  --line:#dce3d8;
  --green:#28533f;
  --wash:#edf3ed;
  font-family:"Segoe UI",system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
}
* {box-sizing:border-box}
body {margin:0;line-height:1.5}
main {max-width:1010px;margin:auto;padding:36px 20px 58px}
h1,h2,h3,p {margin:0}
h1,h2 {font-family:Georgia,serif;font-weight:500;letter-spacing:-.04em}
h1 {font-size:clamp(38px,6vw,60px);line-height:1.08}
h2 {font-size:30px;line-height:1.1}
h3 {font-size:15px}
.top,.toolbar {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.top {justify-content:space-between;margin-bottom:24px}
.layout {display:grid;grid-template-columns:1fr 1fr;gap:17px;align-items:start}
.card {padding:21px;background:#fff;border:1px solid var(--line);border-radius:16px}
.login {max-width:470px}
.login p,.settings p {margin-top:8px}
.fields {display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:16px}
.wide {grid-column:1/-1}
label {display:grid;gap:5px;font-size:13px;font-weight:650}
.check {display:flex;align-items:center}
.check input {width:auto}
button,input,select,textarea {font:inherit;color:inherit}
input,select,textarea {width:100%;min-width:0;border:1px solid #cbd6cb;border-radius:8px;background:#fcfdfa;padding:9px;font-size:16px}
input[type=file] {font-size:13px}
textarea {resize:vertical}
button {border:1px solid #ccd8cf;background:white;border-radius:8px;padding:8px 12px;font-weight:650;cursor:pointer}
button:hover {border-color:#417659}
button:disabled {opacity:.5;cursor:default}
:focus-visible {outline:3px solid #54866c;outline-offset:2px}
.primary {background:var(--green);border-color:var(--green);color:white}
.primary:hover {background:#1d4232}
.submit {margin-top:16px}
.submit .primary {flex:1}
summary {cursor:pointer;color:var(--green);font-weight:650}
#options {margin-top:13px}
#options summary,.muted,.notice,.error {font-size:13px}
.muted {color:var(--muted);overflow-wrap:anywhere}
.notice {margin:0 0 14px;padding:10px 13px;background:var(--wash);border-radius:8px}
.error {margin:8px 0;color:#882c28}
#form-note {margin-top:7px}
.tabs {display:flex;gap:6px;margin:15px 0 12px}
.tabs button {flex:1;font-size:13px}
.tabs [aria-pressed=true] {background:var(--wash);border-color:#96b39b}
.month-nav {display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-bottom:14px;text-align:center}
.month-nav button {min-width:38px;padding:4px 9px;font-size:19px}
dl {margin:8px 0 12px}
.metric {display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:4px 0;font-size:14px}
.metric dd {margin:0;text-align:right;font-variant-numeric:tabular-nums}
.metric.strong {font-weight:700}
.running {border-radius:10px;padding:12px;background:var(--wash)}
.review,.history,.settings {margin-top:17px}
.settings {margin-bottom:17px;display:grid;gap:13px}
.settings .toolbar {margin-top:6px}
.history h2 {margin-bottom:9px}
.item {display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:11px 0;border-bottom:1px solid #e4eae1}
.item:last-child {border-bottom:0}
.item b {overflow-wrap:anywhere}
.item-side {text-align:right}
.item .toolbar {margin-top:5px;justify-content:flex-end}
.item button,.compact button {font-size:12px;padding:4px 7px}
.compact {display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:9px}
dialog {color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;width:min(440px,calc(100% - 28px))}
dialog::backdrop {background:#17241fa8}
@media(max-width:670px) {
  main {padding:24px 13px 35px}
  .layout {grid-template-columns:1fr}
  .card {padding:16px}
  .item {grid-template-columns:minmax(0,1fr) auto}
}
[hidden] {display:none!important}