:root{--brand:#7a4dff;--active:#7a4dff;--brand-d:#5f33e0;--brand-soft:#efe8ff;--ink:#14102a;--muted:#7a7396;--bg:#f6f3ff;--panel:#fff;--line:#e6e0f7;--chat:#e0d6ff;--in:#fff;--out1:#e0d4ff;--out2:#e0d4ff;--on-out:#14102a;--out-meta:#7a4dff;--out-soft:rgba(122,77,255,.14);--green:#2fb36d;--hover:#f3effe;--wall:radial-gradient(circle at 12% 18%,#f4efff 0,transparent 55%),radial-gradient(circle at 88% 22%,#c4b0ff 0,transparent 55%),radial-gradient(circle at 80% 85%,#e4f9a8 0,transparent 55%),radial-gradient(circle at 18% 88%,#d6c6ff 0,transparent 55%),#e0d6ff;--pattern:#5b2fe0;--pattern-o:.07;--shadow:0 4px 18px rgba(40,16,110,.14);--r:16px;--font:'DM Sans',-apple-system,'Segoe UI',system-ui,sans-serif;--ease:cubic-bezier(.2,.8,.3,1);--tail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='17'%3E%3Cpath d='M11 0v17H3c-2 0-3-2-2-3 4-4 10-6 10-14z'/%3E%3C/svg%3E")}
:root[data-theme=dark]{--brand:#b69bff;--active:#4a2fb0;--brand-d:#9a7bff;--brand-soft:#2e2166;--ink:#f4f1ff;--muted:#8f88b0;--bg:#1a1433;--panel:#120d27;--line:#0c081c;--chat:#0d0920;--in:#1c1538;--out1:#4a2fb0;--out2:#4a2fb0;--on-out:#fff;--out-meta:#c9b8ff;--out-soft:rgba(255,255,255,.12);--hover:#1a1433;--wall:#0d0920;--pattern:#b69bff;--pattern-o:.04;--shadow:0 4px 18px rgba(0,0,0,.5)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--brand:#b69bff;--active:#4a2fb0;--brand-d:#9a7bff;--brand-soft:#2e2166;--ink:#f4f1ff;--muted:#8f88b0;--bg:#1a1433;--panel:#120d27;--line:#0c081c;--chat:#0d0920;--in:#1c1538;--out1:#4a2fb0;--out2:#4a2fb0;--on-out:#fff;--out-meta:#c9b8ff;--out-soft:rgba(255,255,255,.12);--hover:#1a1433;--wall:#0d0920;--pattern:#b69bff;--pattern-o:.04;--shadow:0 4px 18px rgba(0,0,0,.5)}}
/* custom scrollbars: thin brand-tinted thumb, no arrows, transparent track */
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 45%,transparent);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--muted) 75%,transparent);background-clip:padding-box}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 45%,transparent) transparent}}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font:400 15px/1.45 var(--font);background:var(--bg);color:var(--ink);overflow:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
img{max-width:100%}
.ms{font-family:'Material Symbols Rounded';font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;-webkit-font-smoothing:antialiased;user-select:none}
.muted{color:var(--muted)}.mono{font-family:ui-monospace,Consolas,monospace;font-size:13px;word-break:break-all}.hint{color:var(--muted);font-size:13px}.err{color:#e0431f;font-size:14px;min-height:0}.err:empty{display:none}
.only-mobile{display:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* ---- buttons ---- */
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--muted);flex:none;transition:background .2s,transform .25s var(--ease)}
.icon-btn:hover{background:var(--hover)}.icon-btn:active{transform:scale(.9)}.icon-btn svg,.icon-btn img{width:22px;height:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:10px;font-weight:500;font-size:15px;white-space:nowrap;transition:transform .25s var(--ease),background .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:scale(.97)}.btn[disabled]{opacity:.5;pointer-events:none}
.btn.filled{background:var(--brand);color:#fff;box-shadow:none}.btn.filled:hover{background:var(--brand-d)}
.btn.tonal{background:var(--brand-soft);color:var(--brand)}
:root[data-theme=dark] .btn.tonal{color:#fff}
.btn.outlined{border:2px solid var(--line);color:var(--ink)}.btn.text{color:var(--brand)}
.btn.outlined-light{border:2px solid rgba(255,255,255,.4);color:#fff}
.btn.sm{height:36px;padding:0 16px;font-size:14px}.btn.lg{height:54px;padding:0 30px;font-size:17px}
.btn svg{width:18px;height:18px}.btn .ms{font-size:20px}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;background:var(--brand-soft);color:var(--brand-d);font-weight:700;font-size:13px}.chip.green{background:rgba(79,174,78,.16);color:#3a9a39}.chip.sm{height:20px;padding:0 8px;font-size:11px}
.bot-badge{display:inline-block;padding:1px 5px;border-radius:5px;background:var(--brand-soft);color:var(--brand);font-size:10px;font-weight:700;letter-spacing:.5px;vertical-align:middle}
.av{display:inline-grid;place-items:center;border-radius:50%;color:#fff;font-weight:500;object-fit:cover;flex:none;background:var(--brand)}
.av.saved{width:54px;height:54px;background:linear-gradient(#72d5fd,#2a9ef1)}.av.saved .ms{font-size:28px}
.field{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--muted)}
.field input,.field textarea,.field select{padding:13px 16px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-weight:500;font-size:15px;width:100%;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand)}.field small{font-weight:500}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.col{display:grid;gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;display:grid;gap:12px;margin-bottom:14px}
.code,pre.code{background:var(--ink);color:#e8eef3;border-radius:10px;padding:14px;font:12.5px/1.55 ui-monospace,Consolas,monospace;overflow:auto;white-space:pre;max-height:340px}
:root[data-theme=dark] .code{background:#0a0718}
.empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:40px 20px;color:var(--muted)}.empty h3{color:var(--ink);font-size:20px}.empty.small{padding:20px}
.snackbar{position:fixed;left:50%;bottom:30px;transform:translate(-50%,140%);background:rgba(0,0,0,.78);color:#fff;padding:12px 20px;border-radius:10px;font-weight:600;z-index:100;transition:transform .4s var(--ease);max-width:90vw;visibility:hidden;opacity:0;transition:transform .3s var(--ease),opacity .2s,visibility 0s .3s}.snackbar.show{transform:translate(-50%,0);visibility:visible;opacity:1;transition:transform .3s var(--ease),opacity .2s}

/* ---- dialog ---- */
.dialog{margin:auto;border:0;border-radius:14px;padding:0;background:var(--panel);color:var(--ink);width:min(440px,94vw);max-height:90dvh;box-shadow:var(--shadow);overflow:auto}.dialog.wide{width:min(620px,96vw)}
.dialog::backdrop{background:rgba(0,0,0,.35)}
.dlg{padding:22px;display:grid;gap:14px}.dlg-head{display:flex;align-items:center;justify-content:space-between}.h2,.dlg-head h2{font-size:20px;font-weight:500}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px}
.menu-list{display:grid;gap:4px}.menu-list button{display:flex;align-items:center;gap:14px;padding:14px;border-radius:10px;font-weight:500;text-align:left}.menu-list button:hover{background:var(--hover)}
.dialog.viewer-d{background:transparent;box-shadow:none;width:96vw;max-width:96vw;overflow:visible}.viewer{display:grid;justify-items:center}.viewer img{max-height:88dvh;border-radius:14px}.viewer .icon-btn{position:fixed;top:14px;right:14px;background:rgba(0,0,0,.5);color:#fff}

/* ---- app shell ---- */
#landing{display:none;height:100%;overflow:auto}
body[data-mode=landing] #landing{display:block}body[data-mode=landing] #shell,body[data-mode=landing] #drawer,body[data-mode=landing] #scrim{display:none}
#shell{display:grid;grid-template-columns:400px minmax(0,1fr);height:100dvh}
#side{display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line);min-height:0;position:relative}
.side-head{display:flex;align-items:center;gap:8px;padding:10px 12px}
.search{flex:1;display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:22px;background:var(--bg);border:2px solid transparent;color:var(--muted)}.search:focus-within{border-color:var(--brand);background:var(--panel)}
.search input{flex:1;border:0;background:none;outline:none;min-width:0;color:var(--ink)}.search.big{height:52px;margin-bottom:14px;background:var(--panel);border-color:var(--line)}
.tabs{display:flex;gap:0;padding:0 8px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}.tabs button{flex:none;padding:12px 14px 10px;border-radius:10px 10px 0 0;font-weight:500;position:relative;font-size:14px;color:var(--muted);display:flex;gap:6px;align-items:center}
.tabs button:hover{background:var(--hover)}.tabs button.on{color:var(--brand)}.tabs button.on::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--brand)}.tabs button i{font-style:normal;background:var(--muted);color:#fff;border-radius:10px;min-width:18px;height:18px;font-size:11px;display:grid;place-items:center;padding:0 5px}
#list{flex:1;overflow:auto;padding:6px 8px 90px}
.ci{display:flex;gap:10px;align-items:center;padding:9px;border-radius:12px;transition:background .15s}.ci:hover{background:var(--hover)}.ci.active{background:var(--active);color:#fff}
.ci-main{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:3px}.ci-top,.ci-bot{min-width:0}.ci-top,.ci-bot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ci-top b{font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.ci-top time{font-size:12px;color:var(--muted);flex:none}
.prev{color:var(--muted);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ci.active .prev,.ci.active time{color:rgba(255,255,255,.85)}
.badge{font-style:normal;flex:none;min-width:22px;height:22px;border-radius:11px;background:var(--green);color:#fff;font-size:12px;font-weight:500;display:grid;place-items:center;padding:0 6px}.ci.active .badge{background:#fff;color:var(--brand)}
.list-sep{padding:14px 12px 6px;font-size:14px;font-weight:500;color:var(--muted)}
.list-empty{padding:40px 20px;text-align:center;color:var(--muted)}.list-empty a{color:var(--brand);font-weight:700}
.anon{display:grid;justify-items:center;gap:8px;text-align:center;padding:24px 20px 6px}.anon p{color:var(--muted);font-size:14px}
.fab{position:absolute;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.25);transition:background .2s}.fab:hover{background:var(--brand-d)}
#pane{min-width:0;min-height:0;height:100dvh;overflow:auto;background:var(--wall);position:relative;outline:none}
.welcome{height:100%;display:grid;place-items:center}

/* ---- pages ---- */
.page{max-width:720px;margin:0 auto;padding:18px 18px 60px;background:var(--bg);min-height:100%}
.page-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}.page-head h1{font-size:22px;font-weight:500}.page-head p{color:var(--muted);font-size:14px}
.row-card{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;background:var(--panel);border:1px solid var(--line);margin-bottom:8px;transition:background .15s}.row-card:hover{background:var(--hover)}
.rc-main{flex:1;min-width:0;display:grid;gap:2px}.rc-main small{color:var(--muted)}.rc-about{color:var(--muted);font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.coin-card{display:grid;gap:10px;padding:16px;border-radius:12px;background:var(--brand-soft);border:1px solid var(--line)}.coin-card.wide{margin-bottom:12px}
.mrow{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:10px}.mrow:hover{background:var(--hover)}.mrow small{display:block;color:var(--muted)}
.prof{display:grid;justify-items:center;gap:10px;padding:30px 0}.prof h2{font-size:26px}

/* ---- chat ---- */
.chat{display:flex;flex-direction:column;height:100dvh;background:var(--wall);position:relative}
.chat::before{content:"";position:absolute;inset:0;opacity:var(--pattern-o);pointer-events:none;background:var(--pattern);-webkit-mask-image:var(--doodle);mask-image:var(--doodle);--doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='20' cy='22' r='8'/%3E%3Cpath d='M70 18l10 14M82 18L68 32'/%3E%3Cpath d='M20 80c6-8 14-8 20 0'/%3E%3Cpath d='M78 84a10 10 0 1 0 20 0 10 10 0 1 0-20 0'/%3E%3C/g%3E%3C/svg%3E")}
.chat-head{display:flex;align-items:center;gap:6px;padding:6px 12px;min-height:56px;background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.08);z-index:2}
.head-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-align:left;border-radius:14px;padding:2px 6px}.head-main:hover{background:transparent}
.head-text{display:grid;min-width:0}.head-text b{font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sub{font-size:13px;color:var(--muted)}
.scroller{flex:1;overflow:auto;padding:12px 14px;position:relative;z-index:1;scroll-behavior:auto}
.msgs{display:flex;flex-direction:column;max-width:728px;margin:0 auto;gap:2px}
.day{display:grid;place-items:center;margin:14px 0 8px}.day span{background:rgba(0,0,0,.22);color:#fff;padding:3px 10px;border-radius:999px;font-size:14px;font-weight:500}
.unread-line{margin:10px -14px;padding:4px;text-align:center;background:var(--panel);color:var(--muted);font-size:14px;font-weight:500;opacity:.92}
.msg{display:flex;align-items:flex-end;gap:8px;position:relative;margin-top:2px;padding-right:46px}.msg.first{margin-top:8px}.msg.mine{justify-content:flex-end;padding-right:0;padding-left:46px}
.msg.sys{justify-content:center;padding:0}.msg.sys span{font-size:13px;color:#fff;background:rgba(0,0,0,.22);border-radius:999px;padding:2px 10px}
.av-slot{width:34px;flex:none;align-self:flex-end}
.bub{background:var(--in);padding:6px 9px 6px 10px;border-radius:15px;max-width:min(480px,100%);box-shadow:0 1px 2px rgba(16,35,47,.15);position:relative;min-width:60px;font-size:15.5px;animation:pop .2s var(--ease)}
.msg.last .bub::after{content:"";position:absolute;bottom:0;width:11px;height:17px;background:inherit;-webkit-mask:var(--tail) no-repeat;mask:var(--tail) no-repeat}
.msg.last:not(.mine) .bub{border-bottom-left-radius:0}.msg.last:not(.mine) .bub::after{left:-10px}
.msg.last.mine .bub{border-bottom-right-radius:0}.msg.last.mine .bub::after{right:-10px;transform:scaleX(-1)}
.msg.stick .bub::after{display:none}
@keyframes pop{from{transform:translateY(6px);opacity:0}}
.msg:not(.last):not(.mine) .bub{border-bottom-left-radius:6px}.msg:not(.first):not(.mine) .bub{border-top-left-radius:6px}
.msg.mine .bub{background:var(--out1);color:var(--on-out)}.msg.mine .meta,.msg.mine .tick{color:var(--out-meta);opacity:1}.msg.mine:not(.last) .bub{border-bottom-right-radius:6px}.msg.mine:not(.first) .bub{border-top-right-radius:6px}
.msg.stick .bub{background:none;box-shadow:none;padding:2px}.msg.stick .meta{position:static;display:block;text-align:right;color:var(--muted)}
.sticker{display:block;border-radius:18px}
.who{display:block;font-weight:500;font-size:14.5px;margin-bottom:1px}
.pic{display:block;margin:-2px -5px 4px -6px}.pic img{display:block;border-radius:12px;width:100%;max-height:420px;object-fit:cover}
.txt{white-space:normal;overflow-wrap:anywhere}.txt a{text-decoration:none;color:var(--brand)}.msg.mine .txt a{color:var(--out-meta)}
.meta{float:right;margin:8px 0 -4px 10px;font-size:12px;color:var(--muted);display:inline-flex;gap:3px;align-items:center;white-space:nowrap}
.tick{font-size:16px!important}
.quote{display:grid;text-align:left;border-left:3px solid var(--brand);background:color-mix(in srgb,var(--brand) 10%,transparent);color:inherit;padding:4px 10px;border-radius:8px;margin-bottom:5px;width:100%;font-size:13.5px}.quote b{color:var(--brand);font-weight:500}.quote span{opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg.mine .quote{border-left-color:var(--out-meta);background:var(--out-soft)}.msg.mine .quote b{color:var(--out-meta)}
.rxs{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;clear:both}
.rx{display:inline-flex;gap:4px;align-items:center;padding:2px 8px 2px 6px;border-radius:999px;background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);font-size:14px}.rx b{font-size:13px;font-weight:500}.rx.mine{background:var(--brand);color:#fff}
.msg.mine .rx{background:var(--out-soft);color:var(--out-meta)}.msg.mine .rx.mine{background:var(--out-meta);color:var(--out1)}
.tools{display:none;position:absolute;top:-14px;right:0;gap:2px;background:var(--panel);border-radius:999px;box-shadow:var(--shadow);padding:2px 4px;z-index:3}.msg.mine .tools{right:auto;left:0}
.msg:hover .tools,.msg.sel .tools{display:flex}.tools button{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:var(--muted)}.tools button:hover{background:var(--hover);color:var(--brand)}.tools .ms{font-size:19px}
.rxmenu{position:absolute;top:-52px;left:44px;display:flex;gap:2px;background:var(--panel);border-radius:999px;padding:5px 8px;box-shadow:var(--shadow);z-index:5;animation:pop .2s var(--ease)}.rxmenu button{font-size:22px;padding:2px 4px;border-radius:50%;transition:transform .15s}.rxmenu button:hover{transform:scale(1.3)}
.msg.flash .bub{animation:flash 1.2s}@keyframes flash{30%{box-shadow:0 0 0 4px var(--brand)}}
.jump{position:absolute;right:18px;bottom:84px;z-index:4;width:46px;height:46px;border-radius:50%;background:var(--panel);box-shadow:var(--shadow);display:grid;place-items:center;color:var(--brand)}.jump b{position:absolute;top:-6px;right:-4px;background:var(--brand);color:#fff;border-radius:10px;font-size:11px;min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px}.jump b:empty{display:none}
#composer{position:relative;z-index:3;background:transparent}
.compose{display:flex;align-items:flex-end;gap:8px;padding:6px 14px 14px;max-width:756px;margin:0 auto}
.inputwrap{flex:1;display:flex;align-items:flex-end;background:var(--panel);border-radius:16px 16px 0 16px;box-shadow:0 1px 2px rgba(16,35,47,.15);padding:0 4px 0 12px;position:relative}.inputwrap::after{content:"";position:absolute;right:-10px;bottom:0;width:11px;height:17px;background:var(--panel);transform:scaleX(-1);-webkit-mask:var(--tail) no-repeat;mask:var(--tail) no-repeat}.compose>#attach{background:var(--panel);width:54px;height:54px;color:var(--muted);box-shadow:0 1px 2px rgba(16,35,47,.15)}
.inputwrap textarea{flex:1;border:0;background:none;outline:none;resize:none;padding:11px 0;max-height:160px;line-height:1.4;color:var(--ink);min-width:0}
.send{width:54px;height:54px;border-radius:50%;background:var(--panel);color:var(--brand);display:grid;place-items:center;flex:none;margin-left:6px;box-shadow:0 1px 2px rgba(16,35,47,.15);transition:transform .2s var(--ease),background .2s}.send:hover{background:var(--brand);color:#fff}.send:active{transform:scale(.9)}
.bar{display:flex;align-items:center;gap:10px;padding:6px 14px;max-width:600px;margin:0 auto;background:var(--panel);border-radius:12px 12px 0 0;color:var(--brand)}.bar-text{flex:1;min-width:0;display:grid;font-size:13.5px}.bar-text b{color:var(--brand)}.bar-text span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar[hidden]{display:none}
.join-bar{display:flex;justify-content:center;align-items:center;gap:8px;padding:8px 14px 16px}.join-bar .btn{min-width:min(420px,100%);height:52px;border-radius:14px;background:var(--panel);color:var(--brand);text-transform:uppercase;letter-spacing:.3px;box-shadow:0 1px 2px rgba(16,35,47,.15)}.join-bar .btn:hover{background:var(--hover)}.join-bar.muted{background:var(--panel);margin:0 auto 16px;max-width:420px;border-radius:14px;padding:14px}.join-bar.muted{color:var(--muted)}
.panel{height:260px;max-width:728px;margin:0 auto 12px;border-radius:12px;box-shadow:var(--shadow);overflow:auto;padding:6px 10px 10px;background:var(--panel)}.panel[hidden]{display:none}
.tabs2{display:flex;gap:6px;padding:4px 0 8px;position:sticky;top:0;background:var(--panel)}.tabs2 button{padding:6px 14px;border-radius:999px;font-weight:700;color:var(--muted)}.tabs2 button.on{background:var(--brand-soft);color:var(--brand)}
.grid-emoji{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:2px}.grid-emoji button{font-size:26px;padding:6px;border-radius:12px}.grid-emoji button:hover{background:var(--hover)}
.grid-stk{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}.grid-stk button{border-radius:14px;padding:4px}.grid-stk button:hover{background:var(--hover)}.grid-stk img{width:100%;display:block}
.stage{background:var(--bg);border-radius:18px;min-height:150px;display:grid;place-items:center;padding:8px;overflow:hidden}.canvas-wrap canvas{max-width:100%;max-height:44dvh;border-radius:12px;display:block}
.drop{display:grid;justify-items:center;gap:4px;padding:28px;border:2px dashed var(--line);border-radius:18px;width:100%;color:var(--muted)}.drop .ms{font-size:40px;color:var(--brand)}.drop b{color:var(--ink)}
.tpls{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px}.tpl{flex:none;width:74px;height:74px;border-radius:14px;overflow:hidden;border:3px solid transparent}.tpl img{width:100%;height:100%;object-fit:cover;display:block}.tpl:hover{border-color:var(--brand)}
.info-top{display:flex;align-items:center;gap:16px}.info-top h3{font-size:20px;font-weight:500}.about{color:var(--ink);opacity:.85}.sect{font-size:15px;font-weight:500;color:var(--brand);margin-top:4px}.mlist{display:grid;gap:2px;max-height:240px;overflow:auto}

/* ---- drawer ---- */
#scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s;z-index:60}
#drawer{position:fixed;top:0;bottom:0;left:0;width:min(320px,86vw);background:var(--panel);transform:translateX(-102%);transition:transform .32s var(--ease);z-index:61;display:flex;flex-direction:column;box-shadow:var(--shadow);overflow:auto}
body.drawer-open #scrim{opacity:1;pointer-events:auto}body.drawer-open #drawer{transform:none}
.dr-top{display:grid;gap:4px;justify-items:start;padding:22px 20px 14px;background:#419fd9;color:#fff}:root[data-theme=dark] .dr-top{background:#232e3c}.dr-top small{opacity:.85}.dr-top b{font-size:16px;font-weight:500}
.dr-top .btn.filled{background:#fff;color:var(--brand);box-shadow:none}
.dr-nav{display:grid;padding:8px;flex:1}.dr-nav a,.dr-nav button{display:flex;align-items:center;gap:22px;padding:11px 14px;border-radius:10px;font-weight:500;text-align:left;color:var(--ink)}.dr-nav a:hover,.dr-nav button:hover{background:var(--hover)}.dr-nav .ms{color:var(--muted)}
.dr-foot{display:flex;gap:6px;padding:12px 16px;border-top:1px solid var(--line)}

/* ---- landing (TELEMEME): dark violet, lime accents, sticker marquee, bento grid ---- */
.t-land{--ink:#0f0a24;--lime:#c9ff3f;--vio:#7a4dff;background:var(--ink);color:#fff;min-height:100%;font-family:var(--font);overflow-x:hidden}
.t-land a{color:inherit}
.t-nav{display:flex;align-items:center;gap:22px;padding:18px clamp(18px,5vw,70px);max-width:1360px;margin:0 auto}
.t-brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:25px;letter-spacing:-1px}.t-brand img{border-radius:50%}
.t-nav nav{display:flex;gap:4px;margin-left:10px}.t-nav nav a{padding:9px 16px;border-radius:999px;font-weight:600;color:#b9b1da}.t-nav nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.t-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.t-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);transition:background .2s,transform .25s var(--ease)}.t-ic:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}.t-ic svg,.t-ic img{width:21px;height:21px}
.t-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 24px;border-radius:14px;font-weight:800;font-size:16px;transition:transform .25s var(--ease),box-shadow .25s;white-space:nowrap}
.t-btn:hover{transform:translateY(-3px) rotate(-1deg)}.t-btn:active{transform:scale(.97)}.t-btn.sm{height:38px;padding:0 16px;font-size:14px}.t-btn.lg{height:60px;padding:0 34px;font-size:19px;border-radius:18px}
.t-btn.lime{background:var(--lime);color:#1b0f55;box-shadow:0 8px 0 #8fb800}.t-btn.lime:hover{box-shadow:0 11px 0 #8fb800}.t-btn.lime:active{box-shadow:0 3px 0 #8fb800;transform:translateY(5px)}
.t-btn.ghost{border:2px solid rgba(255,255,255,.28);color:#fff}.t-btn.ghost:hover{background:rgba(255,255,255,.1)}.t-btn svg,.t-btn img{width:20px;height:20px}
.t-tag{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;background:rgba(201,255,63,.14);color:var(--lime);font-weight:700;font-size:14px}.t-tag i{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(201,255,63,.7);animation:tpulse 1.8s infinite}.t-tag.dark{background:rgba(27,15,85,.14);color:#1b0f55}
@keyframes tpulse{70%{box-shadow:0 0 0 10px rgba(201,255,63,0)}100%{box-shadow:0 0 0 0 rgba(201,255,63,0)}}
.t-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center;max-width:1360px;margin:0 auto;padding:30px clamp(18px,5vw,70px) 70px;position:relative}
.t-hero::before{content:"";position:absolute;width:640px;height:640px;left:-120px;top:-160px;background:radial-gradient(circle,rgba(122,77,255,.55),transparent 65%);pointer-events:none}
.t-h-copy{position:relative}.t-h-copy h1{font-size:clamp(58px,8.8vw,140px);line-height:.9;letter-spacing:-.06em;font-weight:800;margin:22px 0 26px}.t-h-copy h1 em{font-style:normal;color:var(--lime);text-shadow:0 0 60px rgba(201,255,63,.35)}
.t-h-copy p{font-size:clamp(18px,2vw,23px);color:#b9b1da;max-width:30em;line-height:1.5}
.t-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}.t-stats{display:flex;gap:30px;margin-top:34px;color:#8f88b8}.t-stats b{color:#fff;font-size:26px;margin-right:6px}
.t-live{position:relative;background:#fff;color:var(--ink);border-radius:30px;box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 8px rgba(255,255,255,.07);overflow:hidden;transform:rotate(2.5deg);max-width:420px;justify-self:center;width:100%}
.t-live-h{display:flex;align-items:center;gap:12px;padding:16px 18px;background:#f4efff}.t-live-h img{border-radius:50%}.t-live-h b{display:block;font-size:18px}.t-live-h small{display:flex;align-items:center;gap:6px;color:#2fb36d;font-weight:700}.t-live-h small i{width:8px;height:8px;border-radius:50%;background:#2fb36d;animation:tpulse 1.8s infinite}
.t-live-b{display:flex;flex-direction:column;gap:8px;padding:16px;height:380px;overflow:hidden;justify-content:flex-end;background:linear-gradient(#fff,#f7f3ff)}
.t-msg{align-self:flex-start;max-width:86%;background:#f1ecff;border-radius:18px 18px 18px 6px;padding:9px 13px;font-size:16px;display:grid;gap:3px;animation:tpop .4s var(--ease)}.t-msg b{font-size:13px;color:var(--vio)}.t-msg.me{align-self:flex-end;background:var(--vio);color:#fff;border-radius:18px 18px 6px 18px}.t-msg.me b{color:#e4d9ff}
.t-msg img{border-radius:12px;max-width:100%}.t-pic{max-height:150px;object-fit:cover;width:220px}
@keyframes tpop{from{transform:translateY(14px) scale(.92);opacity:0}}
.t-live-f{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--vio);color:#fff;font-weight:800}.t-live-f:hover{background:#6a3ae8}
.t-strip{display:grid;gap:14px;padding:20px 0 50px;overflow:hidden;transform:rotate(-2deg);margin:0 -40px}
.t-mq{display:flex;overflow:hidden}.t-mq>div{display:flex;gap:14px;flex:none;animation:tmq 38s linear infinite}.t-mq.b>div{animation-direction:reverse}.t-mq img{height:150px;width:auto;border-radius:20px;flex:none}
@keyframes tmq{to{transform:translateX(-50%)}}
.t-bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(200px,auto);gap:16px;max-width:1360px;margin:0 auto;padding:30px clamp(18px,5vw,70px) 70px}
.t-bento article{border-radius:30px;padding:28px;display:grid;align-content:space-between;gap:10px;overflow:hidden;position:relative;transition:transform .35s var(--ease)}.t-bento article:hover{transform:translateY(-6px) rotate(-.8deg)}
.t-bento h3{font-size:clamp(24px,2.6vw,36px);line-height:1.05;letter-spacing:-.03em;font-weight:800}.t-bento p{font-size:17px;opacity:.8;line-height:1.4}.t-bento .ms{font-size:44px}
.b1{grid-column:span 3;grid-row:span 2;background:var(--lime);color:#1b0f55}.b2{grid-column:span 3;background:var(--vio)}.b3{grid-column:span 2;background:#fff;color:var(--ink)}.b4{grid-column:span 1;background:#ff5fa8;color:#fff}.b5{grid-column:span 3;background:#1d1542;border:2px solid rgba(255,255,255,.1)}.b6{grid-column:span 3;background:linear-gradient(135deg,#ff8a3d,#ff4f81);color:#fff}
.b4{grid-column:span 1}.t-tp{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.t-tp img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:18px;transform:rotate(-2deg);box-shadow:0 10px 24px rgba(27,15,85,.3)}.t-tp img:nth-child(even){transform:rotate(2.5deg)}
.t-sk{display:flex;gap:10px}.t-sk img{height:110px;width:auto;max-width:34%;border-radius:16px;transform:rotate(-4deg)}.t-sk img:nth-child(2){transform:rotate(4deg)}
.t-rx{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;font-size:30px}.t-rx span{background:rgba(255,255,255,.22);border-radius:14px;display:grid;place-items:center;height:48px}
.t-steps{max-width:1360px;margin:0 auto;padding:30px clamp(18px,5vw,70px) 80px}.t-steps h2,.t-faq h2{font-size:clamp(40px,6vw,84px);letter-spacing:-.05em;line-height:.95;font-weight:800;margin-bottom:34px}
.t-steps ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.t-steps li{display:flex;gap:18px;align-items:flex-start;padding:26px;border-radius:26px;background:rgba(255,255,255,.06)}
.t-steps li>b{flex:none;width:58px;height:58px;border-radius:18px;background:var(--lime);color:#1b0f55;display:grid;place-items:center;font-size:30px;font-weight:800;transform:rotate(-6deg)}.t-steps h4{font-size:24px;margin-bottom:4px}.t-steps p{color:#b9b1da;line-height:1.45}
.t-coin{position:relative;margin:0 clamp(12px,3vw,40px) 80px;border-radius:44px;background:var(--lime);color:#1b0f55;overflow:hidden;padding:clamp(40px,7vw,90px) clamp(24px,6vw,90px)}
.t-coin-bg{position:absolute;right:-2%;bottom:-8%;font-size:clamp(120px,24vw,360px);font-weight:800;letter-spacing:-.07em;color:rgba(27,15,85,.07);line-height:.8;pointer-events:none;white-space:nowrap}
.t-coin-in{position:relative}.t-coin h2{font-size:clamp(60px,11vw,170px);line-height:.86;letter-spacing:-.06em;font-weight:800;margin:20px 0 8px}.t-coin p{font-size:22px;font-weight:600;opacity:.8}
.t-coin .t-btn.lime{background:#1b0f55;color:var(--lime);box-shadow:0 8px 0 #07021f}.t-coin .t-btn.lime:hover{box-shadow:0 11px 0 #07021f}.t-coin .t-btn.ghost{border-color:rgba(27,15,85,.35);color:#1b0f55}
.t-ca{margin-top:30px;background:rgba(27,15,85,.9);color:#fff;border-radius:24px;padding:22px 26px;display:grid;gap:12px;max-width:700px}.t-ca small{font-weight:800;letter-spacing:3px;opacity:.7}.t-ca code{font:700 17px/1.45 ui-monospace,Consolas,monospace;word-break:break-all}.t-ca .t-btn{justify-self:start}
.t-faq{max-width:900px;margin:0 auto;padding:10px clamp(18px,5vw,70px) 80px}.t-faq details{border-bottom:2px solid rgba(255,255,255,.12);padding:22px 0}.t-faq summary{font-size:26px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}.t-faq summary::after{content:"+";color:var(--lime);font-size:34px;line-height:1}.t-faq details[open] summary::after{content:"\2212"}.t-faq summary::-webkit-details-marker{display:none}.t-faq p{color:#b9b1da;font-size:19px;line-height:1.55;margin-top:12px;max-width:40em}
.t-foot{display:flex;gap:26px;justify-content:center;align-items:center;padding:30px;color:#8f88b8;font-weight:600;border-top:1px solid rgba(255,255,255,.08)}.t-foot span{font-weight:800;color:var(--lime);margin-right:10px;font-size:20px}.t-foot a:hover{color:#fff}

/* ---- mobile ---- */
@media(max-width:860px){
  #shell{display:block}#side,#pane{height:100dvh;width:100%}
  body[data-view=pane] #side{display:none}body[data-view=list] #pane{display:none}
  .only-mobile{display:inline-grid}.msg{padding-right:20px}.msg.mine{padding-left:20px}
  .t-hero{grid-template-columns:1fr}.t-live{transform:none}.t-bento{grid-template-columns:repeat(2,1fr)}.b1,.b2,.b3,.b5,.b6{grid-column:span 2}.b4{grid-column:span 2}.t-steps ol{grid-template-columns:1fr}.t-nav nav{display:none}.t-strip{margin:0 -40px}
  .page{padding-top:10px}.tools{display:none!important}.msg.sel .tools{display:flex!important}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* ---- profile, photos, info rows ---- */
.av-edit{position:relative;display:inline-grid;place-items:center;border-radius:50%;cursor:pointer;flex:none}
.av-edit .cam{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.35);color:#fff;opacity:0;transition:opacity .2s}
.av-edit .cam .ms{font-size:34px}.av-edit:hover .cam,.av-edit:focus-within .cam{opacity:1}
.av-edit.big .cam{opacity:.0}.av-edit.big:hover .cam{opacity:1}
.av-edit.busy .cam{opacity:1}.av-edit.busy .cam .ms{display:none}.av-edit.busy .cam::after{content:"";width:36px;height:36px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pick-photo{display:grid;place-items:center;padding:4px 0 6px}
.prof-card{justify-items:center;text-align:center;gap:8px;padding:28px 20px}.prof-card h2{font-size:22px;font-weight:500}
.at-input{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--panel);padding-left:14px}.at-input b{color:var(--muted);font-weight:500}.at-input:focus-within{border-color:var(--brand)}
.field .at-input input{border:0;padding-left:4px}.field .at-input input:focus{outline:none}
.field input:focus,.field textarea:focus{border-color:var(--brand)}
.info-rows{gap:0;padding:8px}.info-rows>div,.info-rows>button,.link-row{display:flex;align-items:center;gap:22px;padding:10px 12px;border-radius:10px;text-align:left;width:100%}
.info-rows>button:hover,.link-row:hover{background:var(--hover)}.info-rows .ms,.link-row .ms{color:var(--muted)}
.info-rows b,.link-row b{display:block;font-weight:400;overflow-wrap:anywhere}.info-rows small,.link-row small{display:block;color:var(--muted);font-size:13.5px}
.link-row b{color:var(--brand)}
button.mrow{width:100%;text-align:left;gap:22px}.mrow .ms{color:var(--muted)}.mrow b{font-weight:400}.mrow.danger,.mrow.danger .ms{color:#e53935}
.locked{display:grid;justify-items:center;gap:6px;text-align:center;margin:12vh auto 0;max-width:340px;background:var(--panel);border-radius:16px;padding:26px 22px;box-shadow:var(--shadow)}.locked h3{font-size:20px;font-weight:500}
.dr-top small{display:block}.dr-top a{border-radius:50%}

.msg.pending .bub{opacity:.85}.msg.pending .tick{animation:tick-spin 2s linear infinite}@keyframes tick-spin{to{transform:rotate(360deg)}}
.inputwrap{min-height:54px}.inputwrap textarea{padding:16px 0 15px;font-size:15.5px}.inputwrap .icon-btn{margin-bottom:5px}

/* ---- loading feedback ---- */
#topbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;background:var(--brand);transform-origin:left;transform:scaleX(0);opacity:0;pointer-events:none;transition:opacity .25s}
body.loading #topbar{opacity:1;animation:topbar 2.4s cubic-bezier(.1,.7,.2,1) forwards}@keyframes topbar{from{transform:scaleX(.08)}to{transform:scaleX(.9)}}
.sk{background:linear-gradient(90deg,var(--hover) 25%,color-mix(in srgb,var(--hover) 35%,var(--panel)) 50%,var(--hover) 75%) 0 0/200% 100%;animation:shim 1.1s linear infinite}
.sk-line{display:block;height:12px;border-radius:6px;margin:5px 0}@keyframes shim{to{background-position:-200% 0}}
.sk-bub{height:40px;min-width:110px;animation:sk-pulse .9s ease-in-out infinite alternate}@keyframes sk-pulse{from{opacity:.4}to{opacity:.85}}
.btn.busy,button.busy{position:relative;pointer-events:none}
.btn.busy{color:transparent!important}.btn.busy>*{visibility:hidden}
.btn.busy::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2.5px solid color-mix(in srgb,var(--brand) 30%,transparent);border-top-color:var(--brand);animation:spin .7s linear infinite}
.btn.filled.busy::after{border-color:rgba(255,255,255,.35);border-top-color:#fff}
.icon-btn.busy,.mrow.busy,.menu-list button.busy{opacity:.55}
.ci{transition:background .12s}.ci:active{background:var(--hover)}