/* community_app.css · The StarLegends Community (/community) · Nov 10, 2026 */
:root{
  --gd:#04440a; --g:#067a08; --g2:#0a8f0c; --gl:#eaf6ea; --o:#f28705; --o2:#dc7400; --ol:#fff2e1;
  --ink:#16231a; --ink2:#2c3b31; --dim:#66756b; --line:#e3ebe5; --bg:#f2f5f2; --card:#fff;
  --r:14px; --sh:0 2px 10px rgba(16,40,20,.06); --sh2:0 14px 36px rgba(16,40,20,.16);
}
*{box-sizing:border-box}
body{margin:0;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:var(--bg);font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{margin:0 0 .4em;line-height:1.2}
.i{width:1em;height:1em;flex:0 0 auto;display:inline-block;vertical-align:-.14em}
.hide{display:none!important}.mut{color:var(--dim)}.center{text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 20px;border-radius:999px;border:2px solid transparent;font:inherit;font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap;transition:transform .12s}
.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.6;cursor:default;transform:none}
.btn.g{background:var(--g);color:#fff}.btn.o{background:var(--o);color:#fff;box-shadow:0 6px 16px rgba(242,135,5,.25)}
.btn.line{background:#fff;border-color:var(--line);color:var(--ink)}.btn.line.g{border-color:var(--g);color:var(--g)}
.btn.sm{min-height:34px;padding:0 14px;font-size:13px}
.ib{border:none;background:none;color:var(--dim);width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:19px;cursor:pointer}
.ib:hover{background:var(--bg)}

/* avatars & badges */
.av{width:42px;height:42px;border-radius:50%;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--g2),var(--gd)) center/cover}
.av.hq{background:linear-gradient(135deg,var(--g),var(--o));font-size:11px}
.av.sm{width:32px;height:32px;font-size:11.5px}.av.lg{width:56px;height:56px;font-size:18px}.av.xl{width:110px;height:110px;font-size:34px;border:4px solid #fff;box-shadow:var(--sh)}
.bdg{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:99px;margin-left:6px;vertical-align:1px;background:var(--gl);color:var(--g)}
.bdg .i{font-size:11px}.bdg.hq{background:var(--ol);color:var(--o2)}.bdg.pin{background:#e6efff;color:#2563eb}.bdg.rv{background:#fde8e8;color:#c0392b}
.cnt{display:none;position:absolute;top:2px;right:2px;min-width:17px;height:17px;border-radius:99px;background:#e11d48;color:#fff;font-size:10px;font-weight:800;line-height:17px;text-align:center;padding:0 4px;font-style:normal}

/* top bar */
.cbar{position:sticky;top:0;z-index:40;background:var(--gd);color:#fff;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.cbar .in{max-width:1240px;margin:0 auto;padding:0 16px;height:62px;display:flex;align-items:center;gap:12px}
.cbar .logo img{height:38px;width:auto}
.cbar .sp{flex:1}
.srch{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border-radius:99px;padding:0 14px;height:40px;width:240px}
.srch input{border:none;background:none;color:#fff;font:inherit;outline:none;width:100%}.srch input::placeholder{color:rgba(255,255,255,.7)}
.tnav{display:flex;gap:4px;margin-left:8px}
.tnav a{position:relative;width:52px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:22px;color:rgba(255,255,255,.82)}
.tnav a .lb{display:none}
.tnav a:hover{background:rgba(255,255,255,.1)}.tnav a.on{color:#fff;background:rgba(255,255,255,.14);box-shadow:inset 0 -3px 0 var(--o)}
.tb{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:600;font-size:13.5px;padding:8px 14px;border-radius:99px;border:1.5px solid rgba(255,255,255,.5)}
.tb.o{background:var(--o);border-color:var(--o)}
.mebtn{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:none;color:#fff;font:inherit;font-weight:600;font-size:13.5px;border-radius:99px;padding:4px 12px 4px 4px;cursor:pointer}
@media (max-width:980px){.srch{width:auto;flex:1;max-width:240px}.tnav{display:none}.hide-s{display:none!important}}
@media (max-width:560px){.srch{display:none}.cbar .sp{flex:1}}

/* layout */
.clay{max-width:1240px;margin:0 auto;padding:18px 16px 90px;display:grid;grid-template-columns:250px minmax(0,1fr) 300px;gap:20px;align-items:start}
.clay.embed{padding-top:12px}
.cleft,.cright{position:sticky;top:80px;max-height:calc(100vh - 96px);overflow:auto;scrollbar-width:thin}
.clay.embed .cleft,.clay.embed .cright{top:12px}
@media (max-width:1180px){.clay{grid-template-columns:220px minmax(0,1fr)}.cright{display:none}}
@media (max-width:860px){.clay{grid-template-columns:minmax(0,1fr);padding:12px 10px 90px}.cleft{display:none}}
.mecard{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px}
.mecard:hover{background:#fff}.mecard b{display:block;font-size:14px}.mecard small{color:var(--dim);font-size:12px}
.lnav{display:grid;gap:2px;margin:6px 0 12px}
.lnav a{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;font-weight:500;color:var(--ink2)}
.lnav a .i{font-size:20px;color:var(--g)}
.lnav a:hover{background:#fff}.lnav a.on{background:#fff;font-weight:700;color:var(--gd);box-shadow:var(--sh)}
.lnav a .cnt{position:static;margin-left:auto}
.lnav.sm a{font-size:13.5px;padding:8px 12px}.lnav.sm .i{font-size:18px;color:var(--dim)}
.lnav a.portal{background:var(--gd);color:#fff;margin-top:6px}.lnav a.portal .i{color:#fff}
.lsec{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:6px 12px}
.bnav{display:none}
@media (max-width:980px){
  .bnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .bnav a{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:10.5px;font-weight:600;color:var(--dim);padding:5px 0}
  .bnav a .i{font-size:22px}.bnav a.on{color:var(--gd)}.bnav .cnt{top:0;right:calc(50% - 22px)}
}

/* cards */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:16px;margin:0 0 14px}
.card h3{font-size:15px;margin-bottom:10px}
.ptitle{margin:4px 2px 14px}.ptitle h2{font-size:21px;display:flex;align-items:center;gap:8px}.ptitle h2 .i{color:var(--g)}.ptitle p{margin:0;color:var(--dim)}
.empty{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 18px;color:var(--dim)}
.empty>.i{font-size:34px;color:var(--g)}.empty b{color:var(--ink);font-size:15px}
.note{background:#fff6dc;border-radius:12px;padding:10px 14px;margin:0 0 14px;font-size:13.5px}

/* composer */
.comp .row{display:flex;gap:10px}
.comp textarea{flex:1;min-height:52px;resize:vertical;border:none;background:var(--bg);border-radius:14px;padding:12px 14px;font:inherit;font-size:15px;color:var(--ink);outline:none}
.row2{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.row2 select{flex:1;min-width:150px;max-width:280px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;background:#fff}
.row2 .btn{margin-left:auto}
.tb2{display:inline-flex;align-items:center;gap:6px;color:var(--ink2);font-weight:600;font-size:13.5px;padding:7px 12px;border-radius:10px;cursor:pointer}.tb2 .i{color:#16a34a;font-size:19px}.tb2:hover{background:var(--bg)}
.prev{position:relative;display:inline-block;margin:10px 0 0 52px}.prev img{max-height:170px;border-radius:12px}.prev button{position:absolute;top:6px;right:6px;width:28px;height:28px;border:none;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* posts */
.post{padding:14px 16px 6px}
.ph{display:flex;gap:10px;align-items:center}
.who{flex:1;min-width:0}.who b{font-size:14.5px}.who small{display:block;color:var(--dim);font-size:12px}.who small a:hover{text-decoration:underline}
.pb{margin:10px 0 0;font-size:15px;line-height:1.55;word-wrap:break-word}.pb a{color:var(--g);text-decoration:underline}
.pb.clip{max-height:9.4em;overflow:hidden}
.seemore{border:none;background:none;color:var(--dim);font:inherit;font-weight:600;cursor:pointer;padding:4px 0;display:inline-block}
.pimg{margin:10px -16px 0;background:#000}.pimg img{width:100%;max-height:600px;object-fit:contain;cursor:zoom-in}
.pc{display:flex;justify-content:space-between;font-size:13px;color:var(--dim);margin-top:10px}.pc a:hover{text-decoration:underline}
.pa{display:flex;border-top:1px solid var(--line);margin-top:8px;padding-top:4px}
.pa button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border:none;background:none;color:var(--dim);font:inherit;font-weight:600;font-size:13.5px;padding:8px;border-radius:10px;cursor:pointer}
.pa button .i{font-size:18px}.pa button:hover{background:var(--bg)}
.pa button.on{color:#e11d48}.pa button.on .i{fill:#e11d48}
.cms{padding:2px 0}
.cm{display:flex;gap:8px;margin-top:8px}
.bub{background:var(--bg);border-radius:16px;padding:8px 12px;font-size:14px;line-height:1.45;word-wrap:break-word}.bub b{font-size:13px}
.ct{font-size:11.5px;color:var(--dim);margin:3px 0 0 10px}.ct button{border:none;background:none;color:var(--dim);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;padding:0 0 0 10px}
.cin{display:flex;gap:8px;align-items:center;margin:8px 0}.cin input{flex:1;min-width:0;border:none;background:var(--bg);border-radius:99px;padding:10px 14px;font:inherit;outline:none}
.cin .ib{color:var(--g)}
.edit{margin-top:10px}.edit textarea{width:100%;min-height:90px;border:1px solid var(--line);border-radius:12px;padding:10px;font:inherit}
.zoom{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;cursor:zoom-out}.zoom img{max-width:96vw;max-height:94vh}
@media (max-width:600px){.card{border-radius:0;margin:0 -10px 10px}.pimg{margin:10px -16px 0}}

/* groups */
.ghead{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.ghead>div{flex:1;min-width:200px}.ghead h2{font-size:19px}.ghead p{margin:0 0 4px;color:var(--ink2)}.ghead small{color:var(--dim)}
.gi{width:52px;height:52px;border-radius:14px;background:var(--gl);display:flex;align-items:center;justify-content:center;font-size:26px;flex:0 0 auto}
.grow{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px}.grow:hover{background:var(--bg)}
.grow>span:nth-child(2){flex:1;min-width:0}.grow b{display:block}.grow small{display:block;color:var(--dim);font-size:12.5px;line-height:1.4}.grow em{font-style:normal;font-size:11.5px;color:var(--g);font-weight:600}
.grow>.i{color:var(--dim)}.grow.dim{opacity:.75}
.locked{background:linear-gradient(135deg,#fff,#fff7ec)}.locked h3 .i{color:var(--o)}
.chips b{display:flex;gap:6px;align-items:center;font-size:13.5px;margin-bottom:8px}.chips b .i{color:var(--g)}
.crow{display:flex;gap:8px;flex-wrap:wrap}.crow a{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border-radius:99px;padding:6px 12px;font-size:13px;font-weight:600}.crow a:hover{background:var(--gl)}

/* people */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;border:1px solid var(--line);border-radius:14px;padding:14px 10px;background:#fff}
.pcard .nm b{font-size:14px}.pcard small{color:var(--dim);font-size:12px;min-height:18px}.pcard .bdg{margin:0}.pcard .btn{margin-top:4px;width:100%}
.hscroll{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:none}.hscroll::-webkit-scrollbar{display:none}.hscroll .pcard{flex:0 0 160px}
.srch2{display:flex;gap:8px}.srch2 input{flex:1;border:1px solid var(--line);border-radius:99px;padding:9px 14px;font:inherit}
.prof{padding:0;overflow:hidden}
.prof .cover{height:170px;background:linear-gradient(120deg,var(--gd),var(--g2) 60%,var(--o)) center/cover}
.prof .pin{display:flex;gap:16px;align-items:flex-end;padding:0 20px;margin-top:-50px;flex-wrap:wrap}
.prof .pt{flex:1;min-width:200px;padding-bottom:6px;padding-top:58px}.prof .pt h2{font-size:22px;margin:0}.prof .pt p{margin:2px 0;color:var(--ink2)}.prof .pt small{color:var(--dim);display:flex;align-items:center;gap:4px}
.pacts{display:flex;gap:8px;padding-bottom:10px;flex-wrap:wrap}
.prof .bio{padding:6px 20px 0;color:var(--ink2)}
.prof .fl{display:flex;gap:6px;padding:12px 20px 18px;flex-wrap:wrap}
.form label{display:block;font-weight:600;font-size:13px;margin:12px 0 0}.form input,.form textarea{width:100%;margin-top:5px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;font-weight:400}
.form textarea{min-height:100px}.form .btn{margin-top:16px}
.avrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* messages */
.thr,.ntf{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px}.thr:hover,.ntf:hover{background:var(--bg)}
.thr>span{flex:1;min-width:0}.thr small{display:block;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thr em{font-style:normal;font-size:11.5px;color:var(--dim);text-align:right}.thr em i{display:block;margin-left:auto;margin-top:3px;min-width:19px;height:19px;line-height:19px;border-radius:99px;background:#e11d48;color:#fff;font-style:normal;font-weight:700;text-align:center;font-size:11px;width:fit-content;padding:0 5px}
.thr.un b{color:var(--gd)}.thr.un small{color:var(--ink);font-weight:600}
.ntf>span{flex:1;font-size:13.5px}.ntf small{display:block;color:var(--dim);font-size:11.5px}.ntf.un{background:#f1f9f1}
.chat{display:flex;flex-direction:column;height:calc(100vh - 120px);min-height:420px;padding:0;overflow:hidden}
.clay.embed .chat{height:calc(100vh - 40px)}
.chd{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line)}
.chd a{display:flex;align-items:center;gap:8px}.chd small.on{color:#16a34a;margin-left:6px;font-size:12px}
.cbody{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:6px;background:#fafcfa}
.cbody .mut.c{margin:auto}
.msg{max-width:78%;align-self:flex-start}.msg>div{background:#fff;border:1px solid var(--line);border-radius:18px 18px 18px 6px;padding:8px 13px;word-wrap:break-word}
.msg.me{align-self:flex-end}.msg.me>div{background:var(--g);color:#fff;border-color:var(--g);border-radius:18px 18px 6px 18px}.msg.me a{color:#fff}
.msg small{display:block;font-size:10.5px;color:var(--dim);margin:2px 8px 0}.msg.me small{text-align:right}
.cfoot{display:flex;gap:8px;align-items:flex-end;padding:10px;border-top:1px solid var(--line)}
.cfoot textarea{flex:1;resize:none;border:none;background:var(--bg);border-radius:20px;padding:10px 14px;font:inherit;max-height:120px;outline:none}
.cfoot .send{background:var(--g);color:#fff}.cfoot.note{align-items:center;justify-content:space-between;gap:10px;background:#fff6dc;margin:0;border-radius:0}
@media (max-width:980px){.chat{height:calc(100vh - 150px)}}

/* right column */
.rcard{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:16px;margin-bottom:14px}
.rcard .rh{display:flex;gap:7px;align-items:center;font-weight:700;font-size:13.5px;margin-bottom:8px}.rcard .rh .i{color:var(--o)}
.rcard.cta{background:linear-gradient(150deg,var(--gd),var(--g));color:#fff}
.rcard.cta .ic,.rcard.up .ic{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:8px}
.rcard.cta b,.rcard.up b{font-size:16px;line-height:1.3;display:block}.rcard.cta p,.rcard.up p{font-size:13px;opacity:.92;margin:6px 0 12px}
.rcard.cta .btn,.rcard.up .btn{width:100%;margin-top:6px}.rcard.cta .btn.line{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.rcard.up{background:linear-gradient(150deg,#fff8ee,#ffe8c7)}.rcard.up .ic{background:var(--o);color:#fff}
.teas{display:flex;gap:10px;align-items:center;width:100%;text-align:left;border:none;background:none;font:inherit;padding:8px 6px;border-radius:10px;cursor:pointer;color:var(--ink)}
.teas:hover{background:var(--bg)}.teas>.i:first-child{font-size:22px;color:var(--g)}.teas>.i:last-child{color:var(--o);font-size:15px}
.teas span{flex:1;min-width:0}.teas b{display:block;font-size:13px}.teas small{display:block;color:var(--dim);font-size:11.5px;line-height:1.35;filter:blur(2.2px);user-select:none}
.more{display:flex;align-items:center;gap:4px;justify-content:center;color:var(--g);font-weight:600;font-size:13px;margin-top:8px}
.ql{display:flex;gap:10px;align-items:center;padding:8px 6px;border-radius:10px;font-weight:500;font-size:13.5px}.ql:hover{background:var(--bg)}.ql .i{color:var(--g);font-size:18px}
.pp{display:flex;gap:10px;align-items:center;padding:6px 0}.pp .nm{flex:1;min-width:0}.pp b{font-size:13px}.pp small{display:block;color:var(--dim);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp .ib{color:var(--g);background:var(--gl)}.pp .sent{color:var(--g);font-size:18px;padding:0 9px}

/* menus, modal, toast */
.pmenu{position:absolute;z-index:120;background:#fff;border-radius:12px;box-shadow:var(--sh2);padding:6px;min-width:200px}
.pmenu button{display:flex;gap:10px;align-items:center;width:100%;border:none;background:none;font:inherit;font-size:14px;padding:10px 12px;border-radius:8px;cursor:pointer;text-align:left;color:var(--ink)}
.pmenu button:hover{background:var(--bg)}.pmenu .i{color:var(--g);font-size:18px}
.cmodal{position:fixed;inset:0;z-index:150;background:rgba(4,30,8,.55);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:40px 14px}
.cmodal .box{position:relative;background:#fff;border-radius:20px;max-width:640px;width:100%;padding:28px;box-shadow:var(--sh2)}
.cmodal .x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:none;background:var(--bg);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}
.unlock{text-align:center}.unlock .big{width:70px;height:70px;border-radius:50%;background:var(--ol);color:var(--o);display:inline-flex;align-items:center;justify-content:center;font-size:34px;margin-bottom:10px}
.unlock .big.g{background:var(--gl);color:var(--g)}
.unlock h2{font-size:21px}.unlock p{color:var(--ink2)}
.ugrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:16px 0;text-align:left}
.ugrid div{border:1px solid var(--line);border-radius:12px;padding:12px}.ugrid div.on{border-color:var(--o);background:var(--ol)}
.ugrid .i{font-size:24px;color:var(--g)}.ugrid b{display:block;font-size:13.5px;margin:6px 0 2px}.ugrid small{color:var(--dim);font-size:12px;line-height:1.4;display:block}
.ubtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.steps3 a{border:1px solid var(--line);border-radius:12px;padding:14px 8px}.steps3 a:hover{border-color:var(--g);background:var(--gl)}
.steps3 .i{font-size:26px;color:var(--g)}.steps3 b{display:block;margin-top:6px}.steps3 small{color:var(--dim);font-size:12px}
@media (max-width:520px){.steps3{grid-template-columns:1fr}}
.rules .rule{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.rules .rule>span{font-size:22px}.rules .rule b{display:block}.rules .rule small{color:var(--dim)}
.rules .btn{margin-top:16px}
#ctoast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:99px;font-weight:600;font-size:13.5px;opacity:0;transition:.25s;z-index:300;pointer-events:none;max-width:90vw;text-align:center}
#ctoast.show{opacity:1;transform:translateX(-50%)}#ctoast.bad{background:#b42318}
.boot{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--dim)}.boot img{width:160px}

/* signed out */
.land .lhero{position:relative;background:#0b3d10 center/cover;color:#fff}
.land .lhero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,40,10,.9),rgba(4,40,10,.65) 55%,rgba(4,40,10,.35))}
.land .in{position:relative;max-width:1180px;margin:0 auto;padding:56px 20px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.lt .eb{display:inline-flex;gap:8px;align-items:center;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12.5px;color:#ffc56b}
.lt h1{font-size:clamp(32px,4.4vw,50px);font-weight:800;margin:10px 0 12px}.lt h1 span{color:#7ee37e}
.lt p{font-size:16px;opacity:.95;max-width:520px}
.why{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}.why li{display:flex;gap:10px;align-items:center}.why .i{color:#ffc11a;font-size:20px}
.lcard{background:#fff;color:var(--ink);border-radius:20px;padding:22px;box-shadow:var(--sh2)}
.ltabs{display:grid;grid-template-columns:1fr 1fr;background:var(--bg);border-radius:12px;padding:4px;margin-bottom:14px}
.ltabs button{border:none;background:none;font:inherit;font-weight:700;padding:9px;border-radius:9px;cursor:pointer;color:var(--dim)}.ltabs button.on{background:#fff;color:var(--gd);box-shadow:var(--sh)}
.lf label{display:block;font-size:12.5px;font-weight:600;margin-bottom:10px;color:var(--ink2)}
.lf input:not([type=checkbox]),.lf select{display:block;width:100%;margin-top:4px;border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit;font-size:14.5px;background:#fbfdfb}
.lf .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media (max-width:480px){.lf .two{grid-template-columns:1fr}}
.lf .ck{display:flex;gap:8px;align-items:center;font-weight:500}.lf .ck a{color:var(--g);text-decoration:underline}
.lf .btn{width:100%;margin-top:6px}.lf .small{font-size:12.5px;color:var(--dim);text-align:center;margin:12px 0 0}.lf .small a{color:var(--g);font-weight:600}
.lf .msg{margin-top:8px;font-weight:600;font-size:13px}.lf .msg.bad{color:#c0392b}.lf .msg.ok{color:var(--g)}
.lf .hp{position:absolute;left:-9999px}
.lfeat .in{grid-template-columns:repeat(4,1fr);gap:16px;padding:40px 20px}
.lfeat .in>div{background:#fff;border-radius:14px;padding:18px;box-shadow:var(--sh)}.lfeat .i{font-size:28px;color:var(--g)}.lfeat b{display:block;margin:8px 0 4px}.lfeat span{color:var(--dim);font-size:13px}
@media (max-width:900px){.land .in{grid-template-columns:1fr}.lfeat .in{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.lfeat .in{grid-template-columns:1fr}}
body.embed{background:var(--bg)}
.mcta{display:none;align-items:center;gap:12px;flex-wrap:wrap;background:linear-gradient(135deg,var(--gd),var(--g));color:#fff}
.mcta .ic{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:22px;flex:0 0 auto}
.mcta>div{flex:1;min-width:200px}.mcta b{display:block;font-size:14.5px}.mcta small{display:block;opacity:.9;font-size:12.5px}
.mcta .b2{display:flex;gap:8px;flex:0 0 auto;min-width:0}.mcta .btn.line{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.mcta.up{background:linear-gradient(135deg,#fff8ee,#ffe8c7);color:var(--ink)}.mcta.up .ic{background:var(--o);color:#fff}
@media (max-width:1180px){.mcta{display:flex}}
/* phones: keep the top buttons on one line */
.cbar .tb{white-space:nowrap}
@media (max-width:420px){.cbar .tb{padding:0 12px;font-size:13px}.cbar .logo img{height:34px}}

/* franchisee: My Dashboard button, always visible (icon only on small phones) */
.cbar .tb.dash{background:#fff;color:var(--gd);border-color:#fff;font-weight:700}
.cbar .tb .ds{display:none}
@media (max-width:420px){.cbar .tb .dl{display:none}.cbar .tb.dash .ds{display:inline}.cbar .tb{padding:7px 11px;font-size:12.5px}}

/* ═══════════ Calm & clean pass (Nov 10, 2026): fewer boxes, softer lines, one thing at a time ═══════════ */
:root{ --bg:#f3f5f4; --line:#e6ece8; --sh:0 1px 2px rgba(16,40,20,.04),0 1px 8px rgba(16,40,20,.04); }
body{font-size:15px}
.card,.rcard{border:1px solid var(--line);box-shadow:var(--sh);border-radius:16px}
.clay{grid-template-columns:240px minmax(0,600px) 300px;justify-content:center;gap:24px;padding-top:22px}
@media (max-width:1180px){.clay{grid-template-columns:220px minmax(0,1fr)}}
@media (max-width:860px){.clay{grid-template-columns:minmax(0,1fr)}}

/* top bar: icons with a small label underneath */
.tnav{gap:2px;margin-left:auto;margin-right:auto}
.tnav a{width:auto;min-width:64px;height:56px;flex-direction:column;gap:2px;font-size:21px;border-radius:12px;padding:0 6px}
.tnav a .lb{display:block;font-size:10.5px;font-weight:600;letter-spacing:.02em;line-height:1}
.tnav a.on{background:rgba(255,255,255,.12);box-shadow:inset 0 -3px 0 var(--o)}
.tnav .cnt{top:4px;right:10px}
.cbar .sp{flex:0 0 auto}
@media (max-width:980px){.cbar .sp{flex:1}}

/* left column */
.mecard{padding:8px 10px;margin-bottom:4px}
.lnav{margin:2px 0 10px}
.lnav a{padding:9px 12px;font-size:14.5px}
.lnav.grp a{gap:10px}
.ge{width:30px;height:30px;border-radius:9px;background:#fff;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto}
.lsec{padding:12px 12px 4px;font-size:11px}

/* composer: one line until you tap it */
.comp{padding:12px 14px}
.comp .row{align-items:center}
.ask{flex:1;text-align:left;border:none;background:var(--bg);border-radius:99px;padding:11px 16px;font:inherit;font-size:15px;color:var(--dim);cursor:text;transition:background .15s}
.ask:hover{background:#e9eeeb}
.comp .row .ib{color:#16a34a;font-size:22px}
.comp .open-only{display:none}
.comp.open .ask{display:none}
.comp.open .row{display:none}
.comp.open .open-only{display:block}
.comp textarea{width:100%;min-height:110px;resize:vertical;border:none;background:none;padding:6px 2px;font:inherit;font-size:17px;color:var(--ink);outline:none}
.moods{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 6px}
.moods button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:5px 11px;font:inherit;font-size:12.5px;font-weight:500;color:var(--ink2);cursor:pointer;transition:all .15s}
.moods button:hover{border-color:var(--g);color:var(--g)}
.moods button.on{background:var(--gl);border-color:var(--g);color:var(--gd);font-weight:600}
.row2{border-top:1px solid var(--line);margin-top:8px;padding-top:10px}
.row2 .sw{font-size:12.5px;color:var(--dim);font-weight:500}
.row2 select{flex:0 1 auto;min-width:0;max-width:240px;border-radius:99px;padding:7px 12px}
.row2 .btn.line{margin-left:auto}
.row2 .btn.g{margin-left:0}
.prev{margin:6px 0 0}

/* posts */
.post{padding:14px 16px 4px}
.who b{font-size:14.5px;font-weight:600}
.pb{font-size:15px;line-height:1.6;color:var(--ink)}
.pc{margin-top:12px;font-size:12.5px}
.hrt{display:inline-flex;width:18px;height:18px;border-radius:50%;background:#e11d48;color:#fff;font-style:normal;font-size:10px;align-items:center;justify-content:center;vertical-align:-3px}
.pa{margin-top:10px;border-top:1px solid var(--line);padding:4px 0}
.pa button{font-weight:500;font-size:13.5px;color:var(--ink2)}
.pa button .i{font-size:19px;color:var(--dim)}
.pa button.on,.pa button.on .i{color:#e11d48}
.pa button.pop .i{animation:pop .45s ease}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.45)}70%{transform:scale(.9)}100%{transform:scale(1)}}
.bdg.pin{background:none;color:var(--dim);padding:0;font-weight:500}
.more.ib{opacity:.6}.ib.more:hover{opacity:1}

/* right column */
.rcard{padding:16px}
.rcard .rh{font-size:14px;color:var(--ink);margin-bottom:6px}
.biz .bh{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.biz .bh b{display:block;font-size:15px}.biz .bh small{color:var(--dim);font-size:12.5px}
.biz .ic{width:42px;height:42px;border-radius:12px;background:var(--ol);color:var(--o);display:flex;align-items:center;justify-content:center;font-size:21px;flex:0 0 auto}
.biz .ic.g{background:var(--gl);color:var(--g)}
.btn.full{width:100%;margin-top:8px}
.teas{padding:7px 4px}
.teas>.i:first-child{font-size:19px}
.teas span{font-size:13.5px;font-weight:500}
.upl{display:flex;gap:8px;align-items:center;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--ol);color:var(--ink2);font-size:13px}
.upl .i{color:var(--o);font-size:17px}.upl span{flex:1}.upl b{color:var(--o2)}
.upl:hover{background:#ffe8c7}
.rg{display:flex;gap:10px;align-items:center;padding:7px 4px;border-radius:10px}.rg:hover{background:var(--bg)}
.rg b{display:block;font-size:13.5px;font-weight:600}.rg small{color:var(--dim);font-size:12px}
.pp b{font-size:13.5px}

/* phones: one slim nudge instead of a big card */
.mcta{display:none;align-items:center;gap:12px;padding:12px 14px;background:#fff;color:var(--ink)}
.mcta .ic{background:var(--gl);color:var(--g);width:38px;height:38px;font-size:19px}
.mcta span:nth-child(2){flex:1}.mcta b{font-size:14px}.mcta small{color:var(--dim);opacity:1}
.mcta>.i{color:var(--dim)}
.mcta.up{background:#fff}.mcta.up .ic{background:var(--ol);color:var(--o)}
@media (max-width:1180px){.mcta{display:flex}}
@media (max-width:600px){.card,.rcard{border-radius:0;border-left:none;border-right:none}}
/* SLA team badges (CEO, Admin, Coach) */
.bdg.st{background:linear-gradient(135deg,#057a07,#0a9c0d);color:#fff}
.bdg.st.ceo{background:linear-gradient(135deg,#f28705,#e05f00)}
.bdg.st .i{font-size:11px}

/* ── Reactions (Nov 10, 2026) ── */
.pa .rx-wrap{flex:1;display:flex;position:relative}
.pa .rx-wrap > button{flex:1;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pa button.rx-on{font-weight:700}
.rx-e{font-size:18px;line-height:1}
.pa button.pop .rx-e{animation:rxPop .35s ease}
@keyframes rxPop{0%{transform:scale(.6)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
.rx-pick{position:absolute;bottom:calc(100% + 6px);left:0;z-index:60;display:flex;gap:2px;padding:6px 8px;border-radius:40px;background:var(--card,#fff);box-shadow:0 8px 28px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.05)}
.rx-pick button{border:none;background:none;padding:0;width:42px;height:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;animation:rxIn .25s ease both}
.rx-pick button span{font-size:30px;line-height:1;transition:transform .15s}
.rx-pick button:hover span,.rx-pick button:active span{transform:scale(1.32) translateY(-6px)}
.rx-pick button.cur span{filter:drop-shadow(0 0 4px rgba(24,119,242,.6))}
.rx-pick button small{position:absolute;top:-24px;background:rgba(0,0,0,.78);color:#fff;font-size:11px;font-weight:700;padding:2px 7px;border-radius:10px;opacity:0;pointer-events:none;white-space:nowrap}
.rx-pick button:hover small{opacity:1}
@keyframes rxIn{from{opacity:0;transform:translateY(10px) scale(.7)}to{opacity:1;transform:none}}
@media (max-width:420px){.rx-pick{left:-4px;padding:5px 6px}.rx-pick button{width:38px;height:40px}.rx-pick button span{font-size:27px}}
.rx-sum{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none}
.rx-sum:hover{text-decoration:underline}
.rx-fs{display:inline-flex}
.rx-f{font-style:normal;font-size:13px;width:20px;height:20px;border-radius:50%;background:var(--card,#fff);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--card,#fff);margin-left:-4px}
.rx-f:first-child{margin-left:0}
.rx-who h3{margin:0 0 10px;font-size:18px}
.rx-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:8px}
.rx-tabs button{border:none;background:var(--bg);color:inherit;font:inherit;font-weight:700;font-size:13.5px;padding:7px 12px;border-radius:20px;cursor:pointer;white-space:nowrap}
.rx-tabs button.on{background:#1877f2;color:#fff}
.rx-list{max-height:min(60vh,460px);overflow-y:auto}
.rx-row{display:flex;align-items:center;gap:12px;padding:8px 4px;color:inherit;text-decoration:none;border-radius:10px}
.rx-row:hover{background:var(--bg)}
.rx-av{position:relative}.rx-av i{position:absolute;right:-4px;bottom:-4px;font-style:normal;font-size:13px}
.rx-none{padding:20px;text-align:center;color:var(--dim)}

/* ── Nov 10, 2026: tags, emoji, comment likes, live feed, Messenger in Messages ── */
.mtag{color:#1877f2;font-weight:700;text-decoration:none;background:rgba(24,119,242,.08);border-radius:6px;padding:0 3px}
.mtag:hover{text-decoration:underline}
.ct button.on{color:#1877f2 !important;font-weight:800}
.clk{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700;background:var(--card);border-radius:99px;padding:1px 7px;box-shadow:0 1px 4px rgba(0,0,0,.12);margin-left:4px}
.clk.pop{animation:rxPop .35s ease}
.xin{position:relative;flex:1;min-width:0;display:flex;align-items:center;background:var(--bg);border-radius:99px}
.xin input{background:transparent !important;flex:1;min-width:0}
.xin.ta{border-radius:14px;align-items:flex-start;flex-direction:column}
.xin.ta textarea{width:100%;background:transparent !important}
.xin.ta .xtools{align-self:flex-end;padding:0 6px 6px}
.xtools{display:flex;gap:2px;flex-shrink:0;padding-right:4px}
.xemo{border:none;background:none;cursor:pointer;width:32px;height:32px;border-radius:50%;font-size:17px;line-height:1;display:grid;place-items:center;color:var(--dim)}
.xemo:hover{background:rgba(0,0,0,.06)}
.xemo.at{font-weight:900;color:#1877f2;font-size:17px}
.xpop{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:70;background:var(--card);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.05);padding:6px;max-height:260px;overflow-y:auto}
.xin.ta .xpop{bottom:auto;top:calc(100% + 4px)}
.xpop.hide{display:none}
.xem{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.xem button{border:none;background:none;font-size:22px;padding:5px 0;border-radius:8px;cursor:pointer}
.xem button:hover,.xem button:active{background:var(--bg)}
.xme{display:flex;align-items:center;gap:10px;width:100%;border:none;background:none;padding:7px 8px;border-radius:10px;cursor:pointer;text-align:left;font:inherit;color:inherit}
.xme:hover{background:var(--bg)}
.xme small{display:block;color:var(--dim);font-size:12px}
.pimg{position:relative;-webkit-user-select:none;user-select:none}
.lburst{position:absolute;left:50%;top:50%;font-size:96px;transform:translate(-50%,-50%) scale(.2);pointer-events:none;animation:lburst .85s ease forwards;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
@keyframes lburst{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}25%{transform:translate(-50%,-50%) scale(1.15);opacity:1}45%{transform:translate(-50%,-50%) scale(.95)}80%{opacity:1}100%{transform:translate(-50%,-60%) scale(1);opacity:0}}
#cNew{position:fixed;top:78px;left:50%;transform:translateX(-50%);z-index:60;border:none;border-radius:99px;background:#1877f2;color:#fff;font:inherit;font-weight:800;font-size:14px;padding:10px 18px;box-shadow:0 8px 24px rgba(24,119,242,.4);cursor:pointer;animation:newIn .3s ease}
@keyframes newIn{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translateX(-50%)}}
.endf{text-align:center;padding:18px;font-weight:700}
.mtabs{display:flex;gap:8px;margin:0 0 12px;overflow-x:auto}
.mtabs button{border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:800;font-size:14px;border-radius:99px;padding:9px 16px;cursor:pointer;white-space:nowrap}
.mtabs button.on{background:#1877f2;border-color:#1877f2;color:#fff}
.mtabs b{display:inline-block;min-width:18px;padding:0 6px;border-radius:99px;background:#e41e3f;color:#fff;font-size:11.5px;margin-left:4px}
.newm{display:flex;justify-content:flex-end;margin-bottom:8px}
.pick h3{margin:0 0 10px}
.pick input{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;font:inherit;font-size:16px;margin-bottom:10px;outline:none}
.pick input:focus{border-color:#1877f2}
.pkl{max-height:min(55vh,420px);overflow-y:auto}
.pkl .rx-row span{flex:1;display:flex;align-items:center;gap:6px}
.pkl small.on{color:#16a34a;font-weight:700}
.msn-host .msn{height:calc(100dvh - 230px);min-height:460px}
@media (max-width:760px){
  #cNew{top:64px}
  body.in-msgs .ptitle{display:none}
  .msn-host{margin:0 -12px}
  .msn-host .msn{height:calc(100dvh - 190px);border-radius:0;border-left:none;border-right:none}
}
.comp .xin.ta{background:none}

.tb.srchm{display:none;width:40px;height:40px;padding:0;border:none;border-radius:50%;align-items:center;justify-content:center;background:rgba(255,255,255,.14);color:#fff;margin-right:6px}
@media (max-width:560px){.tb.srchm{display:inline-flex}}
.mtabs button b{background:rgba(0,0,0,.12)}
.srch2 input{min-width:0;font-size:16px}.srch2 .btn{flex-shrink:0}

.btn.danger{background:#dc2626;color:#fff;border-color:#dc2626}
.btn.line.danger{background:transparent;color:#dc2626;border:1.5px solid #dc2626}