:root{--bg:#FBF3F1;--card:#FFFCFB;--ink:#3B2F3F;--soft:#7C6B80;--line:#EEDCDD;--blush:#F6D8DC;--lav:#E1D8F3;--lav-d:#6A58A0;--err:#B3384E;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#241E27;--card:#2F2733;--ink:#F3E9F1;--soft:#BBA9BF;--line:#463B4B;--blush:#4A3340;--lav:#40375C;--lav-d:#CBBDF0;--err:#FF9AAE;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Nunito,system-ui,sans-serif;font-size:16px;line-height:1.5;padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
main{max-width:420px;margin:0 auto;padding:40px 16px}
h1,h2{font-family:Fraunces,Georgia,serif;margin:0 0 6px;line-height:1.2}
h1{font-size:32px}
.sub{color:var(--soft);margin:0 0 20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px}
.tabs{display:flex;gap:6px;background:var(--bg);border-radius:999px;padding:4px;margin-bottom:16px}
.tabs button{flex:1;border:0;background:none;border-radius:999px;padding:8px;font:inherit;font-weight:700;color:var(--soft);cursor:pointer}
.tabs button.on{background:var(--blush);color:var(--ink)}
label{display:block;font-weight:700;font-size:14px;margin:12px 0 4px}
input{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:14px;padding:10px 12px;font:inherit}
input:focus-visible,button:focus-visible{outline:3px solid var(--lav-d);outline-offset:2px}
.btn{width:100%;margin-top:18px;border:0;border-radius:999px;padding:11px;font:inherit;font-weight:700;background:var(--lav-d);color:#fff;cursor:pointer}
@media (prefers-color-scheme:dark){.btn{color:#241E27}}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.msg{margin-top:14px;font-size:14px;color:var(--soft)}
.msg.err{color:var(--err)}

/* ---------- Signed-in app ---------- */
main.wide{max-width:640px;padding-bottom:110px}
textarea{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:14px;padding:10px 12px;font:inherit;resize:vertical}
textarea:focus-visible{outline:3px solid var(--lav-d);outline-offset:2px}
.faint{color:var(--soft)}
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:8px;background:var(--card);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));z-index:5}
.tabbar button{background:none;border:0;border-radius:14px;padding:6px 18px;display:flex;flex-direction:column;align-items:center;font:inherit;font-size:12px;font-weight:700;color:var(--soft);min-width:96px;cursor:pointer}
.tabbar .ic{font-size:20px}
.tabbar button.on{background:var(--blush);color:var(--ink)}
.member{display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:10px 14px;margin-bottom:10px;font:inherit;color:var(--ink);cursor:pointer}
.av{flex:none;border-radius:50%;display:grid;place-items:center;font-family:Fraunces,Georgia,serif;font-weight:700;color:#3B2F3F;object-fit:cover}
.back{background:none;border:0;font:inherit;font-weight:700;color:var(--lav-d);padding:4px 0 10px;cursor:pointer}
.row{display:flex;gap:8px}
.row .btn{margin-top:14px}
.btn.sm{width:auto;margin:0;padding:8px 14px;font-size:14px}
.tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:6px 0 4px}
.dots{display:flex;gap:10px}
.dot{width:34px;height:34px;border-radius:50%;border:3px solid var(--card);box-shadow:0 0 0 1px var(--line);padding:0;cursor:pointer}
.dot.on{box-shadow:0 0 0 3px var(--lav-d)}
.prof{border-radius:26px;padding:14px;background:var(--pbg);color:var(--pink);margin:10px 0 14px}
.t-blush{--pbg:#F8DDE1;--pcard:#FFF8F8;--pink:#3B2F3F;--pacc:#C25D72}
.t-sage{--pbg:#D5E6D4;--pcard:#F8FCF6;--pink:#263A2B;--pacc:#4F7358}
.t-lav{--pbg:#E1D8F3;--pcard:#FBF9FF;--pink:#33284F;--pacc:#6A58A0}
.t-dusk{--pbg:#2E2A45;--pcard:#3B3658;--pink:#F1EBFA;--pacc:#F0B8C8}
.head{text-align:center;padding:10px 6px 16px}
.head .av{margin:0 auto 8px;border:4px solid var(--pcard)}
.head h2{font-size:28px;margin:0}
.head p{margin:4px 0 0;opacity:.85}
.pic{display:inline-block;font-size:14px;padding:4px 14px;margin-bottom:8px;border:1px solid currentColor;border-radius:999px;font-weight:700;cursor:pointer}
.pic:focus-within{outline:3px solid var(--pacc);outline-offset:2px}
.pb{background:var(--pcard);color:var(--pink);border-radius:16px;padding:14px 16px;margin-bottom:10px;display:block}
.pb h3{font-size:18px;color:var(--pacc);margin:0 0 6px}
.pb p{margin:0}
.pb label{color:var(--pink)}
.pb input,.pb textarea{background:transparent;color:var(--pink);border-color:color-mix(in srgb,var(--pink) 30%,transparent)}
.pb .btn{background:var(--pacc);color:var(--pcard)}
.pb .btn.ghost{background:transparent;color:var(--pink);border:1px solid color-mix(in srgb,var(--pink) 30%,transparent)}
.pb .mv{float:right;display:flex;gap:4px}
.pb .mv button{border:1px solid currentColor;background:none;color:inherit;border-radius:10px;width:34px;height:34px;opacity:.7;cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--pbg);padding:4px 12px;border-radius:999px;font-size:14px;font-weight:600}

/* ---------- Feed ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.row.end{justify-content:flex-end;margin-top:8px}
.row.end .btn{margin-top:0}
.post{display:flex;gap:12px}
.post .who,.post .name,.post .del{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.post .name{font-weight:700}
.post .name:hover{text-decoration:underline}
.post .when{color:var(--soft);font-size:13px;margin-left:8px}
.post .del{color:var(--soft);font-size:13px;margin-left:8px;text-decoration:underline}
.post .pbody{min-width:0}
.post p{margin:2px 0 0;overflow-wrap:anywhere}
.note{font-size:13px;color:var(--soft);text-align:center;margin:18px 0 0}
.post button:focus-visible{outline:3px solid var(--lav-d);outline-offset:2px;border-radius:6px}

/* ---------- Wall ---------- */
.wp{display:flex;gap:10px;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--pink) 15%,transparent)}
.wp .wpb{min-width:0}
.wp p{margin:2px 0 0;overflow-wrap:anywhere}
.wp .when{opacity:.7;font-size:13px;margin-left:8px}
.wp .del{background:none;border:0;padding:0;margin-left:8px;font:inherit;font-size:13px;color:inherit;opacity:.7;text-decoration:underline;cursor:pointer}
.pb .row.end{margin-bottom:6px}

/* ---------- Chat ---------- */
.tabbar button{min-width:0;flex:1;max-width:130px;padding:6px 4px;position:relative}
.badge{background:var(--lav-d);color:#fff;border-radius:999px;font-size:11px;font-weight:700;min-width:18px;padding:1px 6px;text-align:center}
@media (prefers-color-scheme:dark){.badge{color:#241E27}}
.tabbar .badge{position:absolute;top:2px;right:calc(50% - 26px)}
.badge[hidden]{display:none}
.member .grow{flex:1;min-width:0}
.thead{display:flex;align-items:center;gap:10px;position:sticky;top:0;background:var(--bg);padding:8px 0;z-index:3}
.thead .back{padding:4px 6px 4px 0}
.thread{display:flex;flex-direction:column;gap:6px;padding:8px 0 90px}
.bub{max-width:78%;padding:9px 14px;border-radius:20px 20px 20px 6px;background:var(--lav);overflow-wrap:anywhere}
.bub.me{align-self:flex-end;background:var(--blush);border-radius:20px 20px 6px 20px}
.stamp{align-self:center;font-size:12px;color:var(--soft);margin:6px 0 2px}
.center{text-align:center}
.msgbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,640px);display:flex;gap:8px;align-items:flex-end;background:var(--card);border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));z-index:5}
.msgbar textarea{flex:1;max-height:120px;resize:none;border-radius:18px}
.msgbar .btn{margin:0 0 2px}

/* ---------- Likes, comments, bulletins ---------- */
.post .pbody{flex:1}
.eng{margin-top:8px}
.eng .lk,.eng .cm{background:none;border:1px solid var(--line);border-radius:999px;padding:3px 12px;font:inherit;font-size:14px;color:var(--soft);cursor:pointer;margin-right:6px}
.eng .lk.on{color:#C25D72;border-color:#C25D72;background:color-mix(in srgb,#C25D72 10%,transparent)}
.eng button:focus-visible{outline:3px solid var(--lav-d);outline-offset:2px}
.cbox{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.cbox[hidden]{display:none}
.cmt{display:flex;gap:8px;padding:6px 0}
.cmb{min-width:0}
.cmb p{margin:0;overflow-wrap:anywhere}
.cmb .when{color:var(--soft);font-size:12px;margin-left:8px}
.cmb .del{background:none;border:0;padding:0;margin-left:8px;font:inherit;font-size:12px;color:var(--soft);text-decoration:underline;cursor:pointer}
.cf{display:flex;gap:8px;margin-top:8px}
.cf input{flex:1}
.cf .btn{margin:0}
.bs{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card)}
.bs-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--lav);font-family:Fraunces,Georgia,serif;font-weight:700;font-size:18px}
.bs-head .btn{margin:0}
.bform{padding:4px 14px 14px;border-bottom:1px solid var(--line)}
.bform[hidden]{display:none}
.bform .row .btn{margin-top:0}
.brow{display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:10px 14px;font:inherit;color:inherit;cursor:pointer}
.brow:nth-child(even){background:color-mix(in srgb,var(--blush) 35%,transparent)}
.brow .grow{flex:1;min-width:0}
.brow .subj{font-weight:700;color:var(--lav-d);overflow-wrap:anywhere}
.brow .stats{font-size:13px;white-space:nowrap}
.brow:focus-visible{outline:3px solid var(--lav-d);outline-offset:-3px}
.pad{padding:12px 14px;margin:0}
.bdetail h2{font-size:24px;margin-bottom:10px}
.byline{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.bbody{margin:0 0 12px;overflow-wrap:anywhere}
.bdetail>.del{background:none;border:0;padding:0;margin-bottom:10px;font:inherit;font-size:13px;color:var(--soft);text-decoration:underline;cursor:pointer;display:block}