:root{color-scheme:light dark;--bg:#f6f4ee;--panel:#fff;--ink:#1c1b18;--ink2:#57554d;--line:#dcd9cf;--field:#8d897d;--a:#1d5c47;--onA:#fff;--focus:#1f5fbf;
--bad:#8f1f19;--badbg:#fbe5e2;--ok:#1d5c47;--okbg:#e3efe9;--warn:#7a4200;--warnbg:#fcefdc;--info:#1f4a8f;--infobg:#e5ecf8;--mute:#57554d;--mutebg:#ecebe4}
:root[data-theme="dark"]{color-scheme:dark;--bg:#141311;--panel:#1b1a18;--ink:#edebe4;--ink2:#aaa79d;--line:#3a3833;--field:#77736a;--a:#7fcca9;--onA:#0c1f18;--focus:#8ab4ff;
--bad:#f4aca5;--badbg:#3a1a17;--ok:#7fcca9;--okbg:#1d3329;--warn:#f5c98d;--warnbg:#33240f;--info:#a9c6f5;--infobg:#1a2638;--mute:#aaa79d;--mutebg:#262522}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
#app{max-width:640px;margin:0 auto;padding:16px 16px calc(40px + env(safe-area-inset-bottom,0px))}
body.admin #app{max-width:860px}
.boot{color:var(--ink2)}
.ic{flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:4px 0 14px}
.eyebrow{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
h1{margin:2px 0 0;font-size:24px;line-height:1.2;font-weight:650}
h2{margin:8px 0 4px;font-size:20px}
.theme{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font:500 13px/1 inherit;cursor:pointer}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}
.tab{min-height:44px;padding:0 14px;border:0;border-bottom:3px solid transparent;background:none;color:var(--ink2);font:600 15px/1 inherit;cursor:pointer}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--a)}
.form,.done{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:16px}
.grp{display:flex;flex-direction:column;gap:6px}
label,.lbl{font-weight:600;font-size:14px}
.field{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--field);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit}
textarea.field{resize:vertical;min-height:110px}
.field.sm{min-height:40px;width:auto;padding:6px 10px;font-size:14px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.row.end{justify-content:flex-end}
.segs{display:grid;grid-template-columns:1fr 1fr}
.seg{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:1px solid var(--field);border-radius:10px;background:var(--bg);color:var(--ink);font:600 14px/1.2 inherit;cursor:pointer}
.seg.on{background:var(--a);border-color:var(--a);color:var(--onA)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--field);border-radius:10px;background:var(--panel);color:var(--ink);font:600 14px/1 inherit;cursor:pointer}
.btn.sm{min-height:36px;padding:0 12px;font-size:13px}
.btn.primary{background:var(--a);border-color:var(--a);color:var(--onA);min-width:120px}
.btn[disabled]{opacity:.6;cursor:progress}
.hint{margin:0;font-size:13px;color:var(--ink2)}
.err{margin:0;padding:10px 12px;border-radius:8px;background:var(--badbg);color:var(--bad);font-size:14px}
.empty{color:var(--ink2);text-align:center;padding:24px 0}
.shot{position:relative;display:inline-block;max-width:100%}
.shot img{display:block;max-width:100%;max-height:220px;border:1px solid var(--line);border-radius:8px}
.shot .x{position:absolute;top:6px;right:6px;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;background:rgb(0 0 0/.65);color:#fff;cursor:pointer}
.who summary{cursor:pointer;font-size:14px;color:var(--ink2);min-height:32px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:3px}
.who .grp{margin-top:10px}
.who .hint{margin-top:10px}
.done{align-items:flex-start}
.done p{margin:0;color:var(--ink2)}
.tick{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--okbg);color:var(--ok)}
.cards{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;scroll-margin-top:16px}
.card.flash{outline:2px solid var(--a)}
.meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:13px;color:var(--ink2)}
.meta .app{font-weight:600;color:var(--ink)}
.meta .when{margin-left:auto}
.pill{padding:2px 9px;border-radius:999px;font-size:12px;font-weight:650}
.pill.new{background:var(--infobg);color:var(--info)}.pill.planned{background:var(--warnbg);color:var(--warn)}.pill.done{background:var(--okbg);color:var(--ok)}.pill.not_planned{background:var(--mutebg);color:var(--mute)}
.msg{margin:10px 0 6px;white-space:pre-wrap;overflow-wrap:anywhere}
.who-line{margin:8px 0 0;font-size:14px;font-weight:600}
.unv{font-weight:400;color:var(--ink2);font-size:12px}
.ctx{margin:0 0 8px;font-size:12px;color:var(--ink2);overflow-wrap:anywhere}
.ua{font-size:12px;color:var(--ink2);margin-bottom:8px}.ua p{margin:4px 0}
.replybox{margin-top:10px;padding:10px 12px;border-radius:8px;background:var(--okbg);color:var(--ink)}
.replybox p{margin:4px 0 0;white-space:pre-wrap}
.admin-row{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;margin-top:10px}
.admin-row textarea{flex:1 1 220px;min-height:60px}
.chips{margin-bottom:10px}
.chip{min-height:36px;padding:0 12px;border:1px solid var(--field);border-radius:999px;background:var(--panel);color:var(--ink);font:600 13px/1 inherit;cursor:pointer}
.chip.on{background:var(--a);border-color:var(--a);color:var(--onA)}
img.full{display:block;max-width:100%;border:1px solid var(--line);border-radius:8px;margin:8px 0}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:14px;transition:.18s}
#toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){#toast{transition:none}}
@media (max-width:480px){.meta .when{margin-left:0;flex-basis:100%}h1{font-size:21px}}