@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');
:root{--ink:#19232d;--muted:#77818b;--line:#edf0f2;--purple:#7647e8;--mint:#00a68b;--bg:#f5f7f9}*{box-sizing:border-box}body{margin:0;background:#eef1f5;color:var(--ink);font-family:'Be Vietnam Pro',sans-serif;font-size:14px}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;background:none;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #a187eb;outline-offset:3px}button:disabled{opacity:.4;cursor:default}a{text-decoration:none;color:inherit}.studio{position:fixed;left:max(5vw,30px);top:50px;width:42%;max-width:520px;height:calc(100vh - 100px);display:flex;flex-direction:column}.brand{font-size:36px;font-weight:800;letter-spacing:-2px}.brand span{background:linear-gradient(150deg,#00d6b4,#8754ff);color:transparent;background-clip:text}.studio-copy{margin-top:70px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--muted)}h1{font-size:44px;line-height:1.35;letter-spacing:-2px;margin:20px 0}h1 em{font-style:normal;color:var(--purple)}.studio-copy p{font-size:16px;color:#6f7a86;line-height:1.9}.demo-controls{margin-top:auto;max-width:390px}.demo-controls button{display:flex;width:100%;align-items:center;gap:18px;border-bottom:1px solid #dce1e7;padding:18px 0;text-align:left;color:var(--muted)}.demo-controls b{flex:1;color:var(--ink);font-size:14px}.demo-controls small{display:block;margin-top:20px;color:var(--muted);font-size:12px}.studio footer{font-size:10px;letter-spacing:1px;margin-top:35px;color:#929aa5;display:flex;justify-content:space-between}.device{width:430px;min-height:880px;background:white;margin:28px max(7vw,40px) 28px auto;border-radius:30px;overflow:hidden;box-shadow:0 20px 90px #22365516;border:6px solid white;position:relative}.demo-strip{background:#f4f2fb;color:#806c9c;font-size:9px;letter-spacing:1px;padding:9px 15px;display:flex;justify-content:space-between}.demo-strip button{font-size:10px;letter-spacing:0}.head{display:flex;justify-content:space-between;align-items:center;padding:20px 18px 15px;background:#fff}.head .brand{font-size:27px}.head small{color:#98a0a8;font-size:10px;letter-spacing:1px;display:block}.head-actions{display:flex;gap:5px}.iconbtn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;position:relative}.iconbtn:hover{background:#f4f2fb}.dot{width:6px;height:6px;background:var(--purple);position:absolute;right:8px;top:6px;border-radius:50%}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.tabs{display:flex;border-bottom:1px solid var(--line);padding:0 12px;gap:6px;overflow:auto;scrollbar-width:none}.tabs button{padding:14px 9px;white-space:nowrap;color:var(--muted);font-size:13px}.tabs button.active{color:var(--ink);font-weight:700;box-shadow:inset 0 -3px var(--purple)}.market-mini{display:flex;gap:18px;padding:15px 18px;overflow:auto;border-bottom:1px solid var(--line);font-size:10px}.market-mini b{font-size:12px;display:block;margin-bottom:5px}.up{color:#009980}.down{color:#e66173}.welcome{margin:17px 16px 8px;background:linear-gradient(120deg,#e4faf3,#eee8ff);padding:17px;border-radius:15px;display:flex;align-items:center;justify-content:space-between}.welcome b{font-size:16px;display:block;margin:6px 0}.welcome small{font-size:11px;color:#697a7b}.hashmark{font-size:55px;font-weight:800;line-height:1;color:#7c5bf0;transform:rotate(-10deg)}.composer{display:flex;gap:12px;align-items:center;padding:18px;border-bottom:6px solid #f6f7f9}.composer button{color:#89929b;text-align:left;flex:1;font-size:13px}.avatar{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:12px;font-weight:700;color:#796146;background:#f4e8d2}.avatar.purple{background:#eae3ff;color:#805bca}.avatar.green{background:#ddf4ed;color:#168c74}.avatar.official{border-radius:12px;background:#c92a31;color:white;font-size:11px}.post{padding:20px 18px;border-bottom:1px solid var(--line)}.author{display:flex;align-items:center;gap:10px}.author-name{font-size:13px;font-weight:700}.verified{color:var(--mint);font-size:13px}.meta{font-size:10px;color:#89929b;margin-top:4px}.author .follow{margin-left:auto;font-size:11px;color:var(--purple);font-weight:600}.post-text{font-size:14px;line-height:1.85;margin:13px 0 12px}.post-text strong{font-weight:600}.tags{display:flex;gap:6px;flex-wrap:wrap}.tag{font-size:10px;padding:5px 8px;background:#f1f8f7;border-radius:5px;color:#288978}.chartcard{margin:14px 0 10px;border-radius:13px;background:#f5f8fa;padding:15px;overflow:hidden}.charttop{display:flex;justify-content:space-between;align-items:start}.charttop b{font-size:14px}.charttop small{display:block;font-size:10px;color:var(--muted);margin-top:5px}.chart{width:100%;height:95px;margin-top:10px;stroke:#00ab92;stroke-width:2}.chartfooter{display:flex;justify-content:space-between;font-size:9px;color:#8c959d}.actions{display:flex;gap:20px;margin-top:15px;color:#7d8790}.actions button{display:flex;gap:6px;align-items:center;padding:4px 0;font-size:11px}.actions svg{width:19px;height:19px}.actions .liked{color:#e9658c}.actions button:last-child{margin-left:auto}.nav{position:sticky;bottom:0;display:flex;background:#ffffffed;border-top:1px solid var(--line);backdrop-filter:blur(16px);padding:9px 6px 14px;z-index:3;margin-top:15px}.nav button{flex:1;font-size:10px;color:#89929b;display:grid;justify-items:center;gap:4px}.nav .active{color:var(--purple);font-weight:700}.nav .create svg{background:var(--purple);color:white;border-radius:13px;width:43px;height:33px;padding:6px}.page-title{display:flex;align-items:center;gap:9px;padding:14px 12px;border-bottom:1px solid var(--line)}.page-title h2{font-size:16px;margin:0}.page-title .right{margin-left:auto}.section{padding:18px}.section h2{font-size:20px;margin:0 0 8px}.section p{font-size:13px;line-height:1.7;color:var(--muted)}.section-title{font-size:14px;font-weight:700;margin:20px 0 12px}.searchbox{display:flex;gap:8px;background:#f5f6f8;border-radius:12px;padding:13px}.searchbox input{border:0;outline:0;background:none;width:100%;font-size:14px}.listrow{width:100%;display:flex;gap:12px;align-items:center;text-align:left;padding:16px 0;border-bottom:1px solid var(--line)}.listrow .grow{flex:1}.listrow b{font-size:13px}.listrow small{display:block;color:var(--muted);font-size:11px;margin-top:6px;line-height:1.6}.listrow .price{text-align:right;font-size:14px}.pill{padding:7px 11px;border-radius:20px;background:#f2effc;color:var(--purple);font-size:11px}.primary{background:var(--purple);color:white;border-radius:12px;padding:14px 18px;font-size:13px;font-weight:600}.wide{width:100%}.secondary{border:1px solid #dfe3e9;border-radius:12px;padding:13px;font-size:13px}.empty{padding:55px 20px;text-align:center;color:var(--muted);line-height:1.8;font-size:13px}.profile-cover{height:95px;background:linear-gradient(110deg,#b6f1df,#b8c9f8,#ded1ff)}.profile-info{padding:0 20px 20px}.profile-info>.avatar{width:72px;height:72px;border:5px solid white;margin-top:-32px;font-size:22px;position:relative}.profile-info h2{margin:10px 0 5px;font-size:21px}.profile-info p{font-size:12px;color:var(--muted);line-height:1.8}.stats{display:flex;gap:20px;font-size:11px;color:var(--muted);margin-top:15px}.stats b{color:var(--ink)}.profile-buttons{display:flex;gap:8px;margin:16px 0}.profile-buttons button{flex:1}.modal{position:fixed;inset:0;background:#15243155;backdrop-filter:blur(4px);z-index:20;display:flex;align-items:center;justify-content:center;padding:20px}.modal[hidden]{display:none}.sheet{background:white;border-radius:24px;padding:25px;width:400px;max-height:90vh;overflow:auto;box-shadow:0 20px 90px #18283a33}.sheet h2{font-size:21px;margin:10px 0}.sheet p{color:var(--muted);font-size:13px;line-height:1.8}.sheet .close{float:right}.sheet label{display:block;font-size:12px;margin:17px 0 7px}.sheet input,.sheet textarea,.compose-text{width:100%;border:1px solid #dfe3e8;border-radius:10px;padding:13px;outline:none}.sheet .primary,.sheet .secondary{margin-top:13px}.compose-text{min-height:220px;resize:vertical;border:0;font-size:16px;line-height:1.9}.fine{font-size:10px!important;color:var(--muted)}.share-head{border-bottom:1px solid var(--line)}.share-banner{background:#f6f3ff;padding:20px;text-align:center}.share-banner h3{font-size:17px;line-height:1.6}.share-banner p{color:var(--muted);font-size:12px;line-height:1.8}.share-footer{text-align:center;font-size:10px;color:var(--muted);padding:25px;line-height:2}.poll button{width:100%;padding:12px;background:#f3f0fb;border:1px solid #e3dcf6;border-radius:9px;margin:4px 0;text-align:left;font-size:12px}.poll button.selected{background:#e0f5ee;border-color:#96d7c5}.comment{display:flex;gap:10px;padding:17px 18px;border-bottom:1px solid var(--line)}.comment p{font-size:13px;line-height:1.8;margin:7px 0}.commentbar{display:flex;gap:8px;padding:16px;background:#fafbfc}.commentbar input{width:100%;min-width:0;border:1px solid #e5e8ed;border-radius:20px;padding:12px;font-size:12px}.commentbar button{color:var(--purple);font-weight:600;white-space:nowrap}.backlink{color:var(--purple);font-size:12px}.notice{padding:12px 18px;font-size:10px;background:#f9f8fd;color:#8b809e}.topic{border-bottom:1px solid var(--line);padding:20px 0;text-align:left;width:100%;display:flex;gap:15px}.topic>span{color:var(--purple);font-size:24px}.topic b{font-size:15px}.topic small{display:block;color:var(--muted);font-size:11px;margin-top:8px}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(100px);background:#202a35;color:white;border-radius:13px;padding:15px 22px;z-index:50;font-size:13px;max-width:90%;transition:.2s;opacity:0}#toast.show{transform:translateX(-50%);opacity:1}@media(min-width:1200px){.device{margin-right:14vw}}@media(max-width:850px){.studio{display:none}.device{margin:0 auto;min-height:100dvh;border:0;border-radius:0;width:100%;max-width:480px;box-shadow:none}.nav{position:fixed;width:100%;max-width:480px;bottom:0;margin:0;padding-bottom:max(14px,env(safe-area-inset-bottom))}#app{padding-bottom:75px}.demo-strip{font-size:9px}.modal{align-items:flex-end;padding:0}.sheet{width:100%;max-width:480px;border-radius:24px 24px 0 0;padding-bottom:35px}.post-text{font-size:15px}.meta{font-size:11px}.tabs button{font-size:13px}.actions button{font-size:12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.account-link{display:flex;width:100%;align-items:center;justify-content:space-between;background:#f3effc;border-radius:12px;padding:15px;text-align:left;color:#7051b8;font-size:12px}.account-link small{display:block;margin-top:6px;font-size:10px;color:#8d7ba8}.settings-form label{display:block;margin:18px 0 9px;font-size:13px}.settings-form textarea{width:100%;min-height:120px;padding:14px;font:inherit;border:1px solid #e3e5eb;border-radius:12px}.settings-form>.primary{margin-top:24px}.edit-avatar,.link-art{display:flex;align-items:center;gap:20px;margin:15px 0 25px}.chosen{background:#eee7ff;color:#7047c3;border-color:#b29bdf}.switch{width:43px;height:25px;flex-shrink:0;background:#d7dce2;border-radius:20px;padding:3px}.switch span{display:block;width:19px;height:19px;border-radius:50%;background:white}.switch.on{background:#7c54db}.switch.on span{margin-left:18px}.device{height:calc(100dvh - 56px);min-height:600px;overflow:auto;scrollbar-width:none}.device .nav{position:sticky;bottom:0}.device .head{position:sticky;top:0;z-index:4}.device #app{min-height:calc(100% - 35px);display:flex;flex-direction:column}.device #app>.nav{margin-top:auto}.device .demo-strip{position:sticky;top:0;z-index:5}@media(max-width:850px){.device{height:100dvh;min-height:0}.device .nav{position:fixed}.device #app{padding-bottom:75px}}
.trade-teaser{display:flex;align-items:center;gap:12px;margin-top:15px;padding:13px;border:1px solid #d9eee7;border-radius:10px;background:#f7fcfa}.trade-teaser b{font-size:13px}.trade-teaser small{display:block;font-size:9px;margin-top:6px;color:#86928d}.trade-teaser button{margin-left:auto;background:#e1f4ec;color:#188367;padding:9px;border-radius:7px;font-size:10px;white-space:nowrap}.trade-inline{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:9px;color:#9b9fa5}.trade-inline button{font-size:10px;color:#7651bb}.stock-trade,.trade-sides{display:flex;gap:9px;padding:15px}.stock-trade button,.trade-sides button{flex:1;padding:12px;border-radius:9px;font-weight:600}.buy{background:#009d82!important;color:white!important}.sell{background:#e35f75!important;color:white!important}.trade-sides{padding:0;background:#f5f6f9;border-radius:10px}.copy-note{background:#f5f1fc;color:#796591;font-size:12px;line-height:1.7;padding:13px;border-radius:10px;margin:15px 0}.quantity-presets{display:flex;gap:10px;margin-top:10px}.quantity-presets button{flex:1;background:#f4f5f8;border-radius:7px;padding:8px;font-size:11px}.success-order{width:65px;height:65px;background:#e0f7ee;color:#00a27e;border-radius:50%;display:grid;place-items:center;font-size:35px;margin:10px auto 25px}.order-card{padding:17px;border:1px solid #e6e9ed;border-radius:12px;margin:14px 0}.order-card .listrow{padding:12px 0;margin-bottom:10px}.trade-sheet h2 small{font-size:16px;margin-left:12px}
.nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center}.nav button{min-width:0;padding:4px 0;font-size:10px}.nav .create svg{width:44px;height:36px}.nav .create{transform:translateY(-2px)}
.chat-heading{display:flex;align-items:center;justify-content:space-between}.room-row .avatar{width:47px;height:47px;border-radius:15px}.room-row .grow{min-width:0}.room-row b{line-height:1.6}.unread{display:grid;place-items:center;background:#8054de;color:white;border-radius:50%;min-width:20px;height:20px;font-size:10px}.group-note{margin-top:28px;background:#f5f3fb;padding:16px;border-radius:14px;font-size:12px}.group-note p{font-size:12px;margin-bottom:0}.room-sub{padding:10px 18px;color:#9195a1;font-size:10px}.room-sub span{padding:0 8px}.pinned-message{font-size:11px;line-height:1.7;padding:12px 18px;background:#f2effb;color:#75628d}.chat-messages{background:#f8f9fb;flex:1;padding:22px 16px;min-height:310px;max-height:55dvh;overflow:auto}.chat-day{text-align:center;color:#a4a8b1;font-size:9px;letter-spacing:1px;margin:0 0 23px}.bubble-row{display:flex;gap:9px;margin-bottom:22px;max-width:92%}.bubble-row .avatar{width:28px;height:28px;font-size:9px;margin-top:17px}.bubble-author,.bubble-time{display:block;font-size:9px;color:#949ba4;margin:4px 2px}.bubble{font-size:13px;line-height:1.8;background:white;border:1px solid #edf0f2;padding:12px 14px;border-radius:0 14px 14px 14px}.mine{margin-left:auto;justify-content:flex-end}.mine .bubble{background:#ece5fb;color:#553b83;border-color:#e5dcf6;border-radius:14px 0 14px 14px}.mine .bubble-author,.mine .bubble-time{text-align:right}.chat-input{display:flex;gap:9px;padding:14px 16px;background:white;border-top:1px solid #edf0f2}.chat-input input{flex:1;min-width:0;border:1px solid #e7e9ee;background:#fafbfc;border-radius:25px;padding:12px;font-size:13px}.chat-input .primary{padding:10px;border-radius:50%;width:42px;height:42px}.page-title h2{line-height:1.6;font-size:14px}.page-title .right{flex-shrink:0}