:root { --bg:#f4efe4; --card:#fffdf8; --ink:#1d241f; --mut:#5d665f; --line:#ddd5c4; --green:#1f3d29; --green-ink:#f0e8d2; --acc:#d6783c; --chip:#ece5d5; --chip-on:#1f3d29; --chip-on-ink:#f4efe4; --warn:#9a4b12; --shadow:0 1px 2px rgba(0,0,0,.06); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#141a16; --card:#1c241e; --ink:#ece6d6; --mut:#a3ab9f; --line:#2c372f; --green:#2f5a3d; --green-ink:#f0e8d2; --chip:#26312a; --chip-on:#d6783c; --chip-on-ink:#1a1410; --warn:#f0a16a; } }
:root[data-theme="dark"] { --bg:#141a16; --card:#1c241e; --ink:#ece6d6; --mut:#a3ab9f; --line:#2c372f; --green:#2f5a3d; --green-ink:#f0e8d2; --chip:#26312a; --chip-on:#d6783c; --chip-on-ink:#1a1410; --warn:#f0a16a; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; padding-bottom:env(safe-area-inset-bottom); }
.wrap { max-width:640px; margin:0 auto; padding:0 16px; }
.top { background:var(--green); color:var(--green-ink); padding:calc(10px + env(safe-area-inset-top)) 0 10px; position:sticky; top:0; z-index:5; }
.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand { display:flex; align-items:center; gap:10px; }
.roof { width:26px; height:26px; background:var(--green-ink); clip-path:polygon(50% 0,100% 55%,78% 55%,78% 100%,22% 100%,22% 55%,0 55%); flex:none; }
.title { font-weight:700; font-size:18px; line-height:1.1; } .sub { font-size:13px; opacity:.85; }
.who { font-size:14px; text-align:right; opacity:.95; }
main { padding-top:14px; }
section { margin:0 0 22px; }
h2 { font-size:20px; margin:0 0 4px; } h2 small { font-weight:400; color:var(--mut); font-size:14px; margin-left:6px; }
.lead { color:var(--mut); margin:0 0 10px; font-size:15px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin:0 0 10px; box-shadow:var(--shadow); }
.card h3 { margin:0 0 2px; font-size:17px; } .card .note { color:var(--mut); font-size:14px; margin:0 0 8px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0; }
.chip { appearance:none; border:1px solid var(--line); background:var(--chip); color:var(--ink); border-radius:999px; padding:9px 13px; font:inherit; font-size:15px; min-height:40px; display:inline-flex; align-items:center; gap:6px; cursor:pointer; touch-action:manipulation; }
.chip.on { background:var(--chip-on); color:var(--chip-on-ink); border-color:var(--chip-on); }
.chip.mid { background:var(--chip-on); color:var(--chip-on-ink); opacity:.65; border-color:transparent; }
.chip .n { font-size:12px; background:rgba(0,0,0,.12); border-radius:999px; padding:1px 7px; min-width:20px; text-align:center; }
.chip.on .n { background:rgba(255,255,255,.22); }
.chip.sm { padding:5px 10px; min-height:32px; font-size:13px; }
.day { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--mut); margin:8px 0 2px; }
.btn { appearance:none; border:0; background:var(--green); color:var(--green-ink); border-radius:12px; padding:12px 16px; font:inherit; font-weight:600; min-height:44px; cursor:pointer; touch-action:manipulation; }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn.acc { background:var(--acc); color:#1a1410; }
.btn.sm { padding:8px 12px; min-height:36px; font-size:14px; }
.btn.wide { width:100%; }
.row { display:flex; align-items:center; gap:10px; }
.row.between { justify-content:space-between; }
.input, textarea.input { width:100%; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:10px; padding:10px 12px; font:inherit; min-height:44px; }
textarea.input { min-height:64px; resize:vertical; }
label.lbl { display:block; font-size:13px; color:var(--mut); margin:10px 0 4px; }
.mut { color:var(--mut); } .small { font-size:14px; } .tiny { font-size:12px; }
.tag { display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:2px 7px; border-radius:6px; background:var(--chip); color:var(--mut); margin-left:6px; vertical-align:middle; }
.tag.warn { background:transparent; border:1px solid var(--warn); color:var(--warn); }
.summary { background:var(--green); color:var(--green-ink); border-radius:14px; padding:14px; margin:0 0 14px; }
.summary b { font-size:18px; }
.hero { text-align:center; padding:40px 0; }
.hero h1 { font-size:26px; margin:0 0 8px; }
.list { list-style:none; margin:0; padding:0; }
.list li { padding:9px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.list li:last-child { border-bottom:0; }
.item .meta { color:var(--mut); font-size:13px; }
.names { color:var(--mut); font-size:13px; margin-top:4px; }
.feed li { display:block; font-size:15px; } .feed time { color:var(--mut); font-size:12px; margin-left:6px; }
dialog { border:0; border-radius:18px 18px 0 0; padding:0; width:100%; max-width:640px; margin:auto auto 0; background:var(--card); color:var(--ink); }
dialog::backdrop { background:rgba(0,0,0,.45); }
dialog form { padding:16px 16px calc(16px + env(safe-area-inset-bottom)); }
dialog h3 { margin:0 0 6px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:999px; font-size:14px; z-index:9; }
.foot { color:var(--mut); font-size:12px; padding:20px 16px 30px; text-align:center; }
.foot a { color:inherit; }
.plan pre { white-space:pre-wrap; font:13px/1.4 ui-monospace, Menlo, monospace; background:var(--chip); padding:10px; border-radius:10px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.filters { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin-bottom:6px; -webkit-overflow-scrolling:touch; }
.filters .chip { flex:none; }
.linkish { color:var(--acc); text-decoration:none; font-weight:600; }
.me { font-weight:600; }
.del { color:var(--mut); font-size:12px; background:none; border:0; padding:4px; cursor:pointer; }