:root { --bg:#f5f7fa; --card:#fff; --text:#1b2733; --muted:#66758a; --line:#dde3ea; --pri:#1f4e79; --priText:#fff; --mine:#e3f1ff; --hol:#b42318; --ok:#17794a; }
@media (prefers-color-scheme: dark) { :root { --bg:#10161d; --card:#18212b; --text:#e6edf3; --muted:#93a3b5; --line:#2a3745; --pri:#4a90d9; --priText:#08121c; --mine:#1b3550; --hol:#ff8a7a; --ok:#4ccf8f; } }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--text); padding-bottom:calc(64px + env(safe-area-inset-bottom)); padding-top:env(safe-area-inset-top); }
main { max-width:720px; margin:0 auto; padding:12px; }
h1,h2,h3 { margin:.2em 0 .5em; } h2 { font-size:1.15rem; } h3 { font-size:1rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; margin:10px 0; }
label { display:block; font-size:.85rem; color:var(--muted); margin:8px 0 2px; }
input,select,button { font:inherit; padding:10px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--text); max-width:100%; }
input,select { width:100%; } input[type=checkbox] { width:auto; }
button { cursor:pointer; background:var(--pri); color:var(--priText); border:0; font-weight:600; }
button.sec { background:transparent; color:var(--pri); border:1px solid var(--pri); } button.danger { background:var(--hol); color:#fff; }
button.small { padding:5px 10px; font-size:.85rem; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .row > * { flex:1 1 auto; } .row > button { flex:0 0 auto; }
.muted { color:var(--muted); font-size:.9rem; }
nav { position:fixed; bottom:0; left:0; right:0; display:flex; background:var(--card); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
nav button { flex:1; background:none; color:var(--muted); border-radius:0; padding:14px 4px; font-size:.85rem; }
nav button.on { color:var(--pri); border-top:3px solid var(--pri); }
.month { position:sticky; top:0; background:var(--bg); padding:8px 0 4px; font-weight:700; z-index:1; }
.day { display:flex; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--card); margin:6px 0; }
.day.today { outline:2px solid var(--pri); } .day.past { opacity:.55; }
.dt { width:78px; flex:0 0 78px; } .dt b { display:block; } .dt span { font-size:.8rem; color:var(--muted); }
.tag { display:inline-block; font-size:.7rem; padding:1px 6px; border-radius:99px; border:1px solid var(--line); color:var(--muted); margin-top:2px; }
.tag.hol { color:var(--hol); border-color:var(--hol); } .tag.hi { color:var(--pri); border-color:var(--pri); }
.who { flex:1; display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start; }
.chip { padding:3px 9px; border-radius:99px; background:var(--bg); border:1px solid var(--line); font-size:.9rem; }
.chip.me { background:var(--mine); border-color:var(--pri); font-weight:700; } .chip i { font-style:normal; font-size:.7rem; color:var(--muted); margin-left:4px; }
table { width:100%; border-collapse:collapse; font-size:.85rem; } th,td { padding:5px 4px; text-align:right; border-bottom:1px solid var(--line); } th:first-child,td:first-child { text-align:left; }
.scroll { overflow-x:auto; } .bad { color:var(--hol); } .good { color:var(--ok); }
#toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(76px + env(safe-area-inset-bottom)); background:#222; color:#fff; padding:10px 16px; border-radius:10px; opacity:0; transition:opacity .2s; pointer-events:none; max-width:90%; z-index:20; }
#toast.show { opacity:1; }
dialog { border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--text); width:min(92vw,440px); padding:16px; } dialog::backdrop { background:rgba(0,0,0,.5); }