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

:root {
  --ground:#FFFAF7; --surface:#FFFFFF; --surface-2:#FDF2F5;
  --ink:#2A1A24; --ink-soft:#6B5560; --ink-faint:#9A8490;
  --line:#EADDE3; --line-strong:#DCC7D1;
  --berry:#A3175B; --berry-ink:#FFFFFF; --berry-soft:#F7E4EC;
  --saffron:#C9760A; --saffron-soft:#FBEEDC;
  --veg:#2E7D32; --veg-soft:#E4F1E5;
  --danger:#B3261E; --danger-soft:#FBE9E7;
  --shadow:0 1px 2px rgba(42,26,36,.06), 0 8px 24px -14px rgba(42,26,36,.22);
  --display:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --body:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#171016; --surface:#211722; --surface-2:#2A1C28;
    --ink:#F8EEF3; --ink-soft:#C0A8B5; --ink-faint:#8E7683;
    --line:#3B2A35; --line-strong:#4C3846;
    --berry:#F5709F; --berry-ink:#24101A; --berry-soft:#3A1E2B;
    --saffron:#F0A94A; --saffron-soft:#3A2A16;
    --veg:#74CE79; --veg-soft:#1E3320;
    --danger:#F2907F; --danger-soft:#3A1D19;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --ground:#171016; --surface:#211722; --surface-2:#2A1C28;
  --ink:#F8EEF3; --ink-soft:#C0A8B5; --ink-faint:#8E7683;
  --line:#3B2A35; --line-strong:#4C3846;
  --berry:#F5709F; --berry-ink:#24101A; --berry-soft:#3A1E2B;
  --saffron:#F0A94A; --saffron-soft:#3A2A16;
  --veg:#74CE79; --veg-soft:#1E3320;
  --danger:#F2907F; --danger-soft:#3A1D19;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.7);
}

html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(4.9rem + env(safe-area-inset-bottom));
}
h1,h2,h3 { font-family:var(--display); font-weight:600; margin:0; line-height:1.15; text-wrap:balance; }
h1 { font-size:1.5rem; } h2 { font-size:1.15rem; }
p { margin:0; }
a { color:var(--berry); }
img { max-width:100%; display:block; }
button, input, select, textarea { font:inherit; color:inherit; }

.wrap { max-width:60rem; margin-inline:auto; padding:0 1rem; }

header.top {
  position:sticky; top:0; z-index:30; background:var(--ground);
  border-bottom:1px solid var(--line); padding:.8rem 0;
}
header.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { font-family:var(--display); font-size:1.1rem; text-decoration:none; color:var(--ink); }
.brand b { color:var(--berry); font-weight:600; }
.stamp { font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); letter-spacing:.05em; }

main { padding-top:1.25rem; }

.sec { margin-bottom:1.9rem; }
.sec-head { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; margin-bottom:.75rem; flex-wrap:wrap; }
.count { font-family:var(--mono); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); }

.card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:.9rem 1rem; box-shadow:var(--shadow); }
.list { display:flex; flex-direction:column; gap:.6rem; }
.row { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.who { font-weight:600; }
.meta { font-size:.85rem; color:var(--ink-soft); }
.amt { font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }

.pill { display:inline-flex; align-items:center; gap:.3rem; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.07em; text-transform:uppercase; padding:.22rem .5rem; border-radius:999px;
  background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line); white-space:nowrap; }
.pill.due { background:var(--danger-soft); color:var(--danger); border-color:transparent; }
.pill.soon { background:var(--saffron-soft); color:var(--saffron); border-color:transparent; }
.pill.good { background:var(--veg-soft); color:var(--veg); border-color:transparent; }
.pill.berry { background:var(--berry-soft); color:var(--berry); border-color:transparent; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.6rem 1rem;
  border-radius:999px; border:1px solid transparent; font-weight:600; cursor:pointer;
  text-decoration:none; font-size:.92rem; }
.btn:focus-visible { outline:3px solid var(--berry); outline-offset:2px; }
.btn-primary { background:var(--berry); color:var(--berry-ink); }
.btn-ghost { background:var(--surface); border-color:var(--line-strong); color:var(--ink); }
.btn-danger { background:var(--danger-soft); color:var(--danger); }
.btn-sm { padding:.4rem .75rem; font-size:.84rem; }
.btn-block { width:100%; }
.actions { display:flex; flex-wrap:wrap; gap:.45rem; }

.empty { padding:1.6rem 1rem; text-align:center; color:var(--ink-faint);
  border:1px dashed var(--line-strong); border-radius:14px; font-size:.92rem; }

.field { display:flex; flex-direction:column; gap:.3rem; margin-bottom:.85rem; }
.field label { font-family:var(--mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); }
.field input, .field select, .field textarea {
  background:var(--surface); border:1px solid var(--line-strong); border-radius:10px;
  padding:.7rem .8rem; width:100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline:2px solid var(--berry); border-color:transparent; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 .7rem; }
.grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:0 .7rem; }

.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr)); gap:.6rem; }
.tile { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:.85rem;
  display:flex; flex-direction:column; gap:.12rem; }
.tile .k { font-family:var(--mono); font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); }
.tile .v { font-family:var(--display); font-size:1.7rem; font-variant-numeric:tabular-nums; line-height:1.1; }
.tile .s { font-size:.78rem; color:var(--ink-faint); }

.tbl-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th, td { padding:.6rem .75rem; text-align:left; white-space:nowrap; }
th { font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); border-bottom:1px solid var(--line); }
td { border-bottom:1px solid var(--line); }
tr:last-child td { border-bottom:none; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono); }

/* gallery */
.filters { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.chip { display:inline-flex; align-items:center; gap:.3rem; padding:.35rem .7rem; border-radius:999px;
  border:1px solid var(--line-strong); background:var(--surface); font-size:.84rem;
  cursor:pointer; text-decoration:none; color:var(--ink); }
.chip.on { background:var(--berry); border-color:var(--berry); color:var(--berry-ink); font-weight:600; }
.chip .n { font-family:var(--mono); font-size:.72rem; opacity:.7; }

.grid-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr)); gap:.8rem; }
.dcard { background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; position:relative; }
.dcard img { aspect-ratio:1/1; object-fit:cover; width:100%; background:var(--surface-2); }
.dcard .body { padding:.6rem .7rem; display:flex; flex-direction:column; gap:.3rem; }
.dcard .t { font-weight:600; font-size:.9rem; line-height:1.25; }
.dcard .tags { display:flex; flex-wrap:wrap; gap:.25rem; }
.dcard .tag { font-size:.68rem; padding:.12rem .4rem; border-radius:999px; background:var(--berry-soft); color:var(--berry); }
.dcard .pick { position:absolute; inset-block-start:.5rem; inset-inline-start:.5rem; z-index:2; }
.dcard .pick input { width:1.4rem; height:1.4rem; accent-color:var(--berry); }
.dcard.selected { outline:3px solid var(--berry); outline-offset:-1px; }

.sharebar { position:fixed; inset-inline:0; bottom:calc(4.9rem + env(safe-area-inset-bottom));
  z-index:25; padding:0 1rem; display:none; }
.sharebar.show { display:block; }
.sharebar .inner { max-width:60rem; margin-inline:auto; background:var(--berry); color:var(--berry-ink);
  border-radius:999px; padding:.6rem .8rem .6rem 1.1rem; display:flex; align-items:center;
  justify-content:space-between; gap:.75rem; box-shadow:var(--shadow); }
.sharebar .btn-ghost { background:rgba(255,255,255,.16); border-color:transparent; color:var(--berry-ink); }

nav.tabs { position:fixed; inset-inline:0; bottom:0; z-index:40; background:var(--surface);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom);
  display:grid; grid-template-columns:repeat(6,1fr); }
nav.tabs a { display:flex; flex-direction:column; align-items:center; gap:.12rem; padding:.55rem .2rem .65rem;
  color:var(--ink-faint); font-size:.66rem; text-decoration:none; }
nav.tabs a.on { color:var(--berry); font-weight:600; }
nav.tabs svg { width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

.note { font-size:.82rem; color:var(--ink-faint); }
.warn { background:var(--saffron-soft); color:var(--saffron); border-radius:12px; padding:.7rem .9rem; font-size:.86rem; }
.err { background:var(--danger-soft); color:var(--danger); border-radius:12px; padding:.7rem .9rem; font-size:.88rem; margin-bottom:.9rem; }
.ok { background:var(--veg-soft); color:var(--veg); border-radius:12px; padding:.7rem .9rem; font-size:.88rem; margin-bottom:.9rem; }

.bar { height:.5rem; border-radius:99px; background:var(--berry); min-width:2px; }
.barwrap { background:var(--surface-2); border-radius:99px; overflow:hidden; }

.themebox { display:flex; flex-wrap:wrap; gap:.4rem; max-height:14rem; overflow-y:auto;
  padding:.6rem; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); }
.themebox label { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .6rem;
  border-radius:999px; border:1px solid var(--line); font-size:.83rem; cursor:pointer; }
.themebox input { accent-color:var(--berry); }
.themebox label:has(input:checked) { background:var(--berry-soft); border-color:var(--berry); color:var(--berry); font-weight:600; }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }