*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Roboto,sans-serif;background:#fff;color:#1A1A1A;font-size:14px}
a{color:inherit;text-decoration:none}
.mi{font-family:'Material Icons Outlined';font-size:20px;line-height:1;vertical-align:middle}
img.av{border-radius:50%;object-fit:cover;display:block}
.top{height:62px;display:flex;align-items:center;padding:0 16px;gap:28px}
.logo{display:flex;align-items:center;gap:8px;font-weight:500;font-size:16px;color:#3a4a6b;width:176px}
.logo .mk{width:22px;height:22px;border-radius:7px;background:#3B82F6;color:#fff;display:grid;place-items:center;font-size:15px}
.search{display:flex;align-items:center;gap:8px;border:1px solid #c9c9c9;border-radius:6px;padding:0 12px;height:34px;background:#fff;color:#9a9a9a}
.search input{border:0;outline:0;font:inherit;font-size:12.5px;width:100%}
.top .search{width:400px}
.user{margin-left:auto;display:flex;align-items:center;gap:14px;color:#525252;font-size:14px}
.shell{display:grid;grid-template-columns:192px 1fr 200px;min-height:calc(100vh - 62px)}
.side{padding:8px 16px}
.nav a{display:flex;align-items:center;gap:16px;height:35px;padding:0 14px;margin-bottom:8px;border-radius:4px;color:#4A5568;font-weight:500;font-size:14px}
.nav a.on{background:#4B5B7A;color:#fff}
.main{background:#F5F5F5;border-radius:14px 14px 0 0;padding:24px 24px;display:grid;grid-template-columns:231px 330px;gap:24px;align-content:start}
.col{display:flex;flex-direction:column;gap:24px}
.card{background:#fff;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.ch{display:flex;justify-content:space-between;align-items:center;padding:14px 13px;border-bottom:1px solid #eee;font-weight:500;color:#333}
.ch a{color:#3B82F6;font-size:10.5px}
.cb{padding:12px 13px}
.muted{color:#888;font-size:10px}
.name{font-size:13px;color:#4A5568;font-weight:500}
.ml{padding:0 0 0 56px}
.soc{display:flex;gap:14px;justify-content:center;margin:12px 0 14px;color:#555}
.soc svg{width:15px;height:15px}
.btns{display:flex;gap:16px}
.btn{flex:1;height:29px;border-radius:4px;border:1px solid #ccc;background:#fff;color:#888;font:inherit;font-size:13px}
.btn.p{background:#3B82F6;border-color:#3B82F6;color:#fff}
.ev{background:#f7f7f7;border-radius:8px;padding:10px 8px;margin-bottom:16px}
.ev:last-child{margin-bottom:0}
.evr{display:flex;gap:16px}
.ic{width:32px;height:32px;border-radius:5px;display:grid;place-items:center;flex:none}
.g{background:#cdf2dd;color:#22b261}.r{background:#ffd6cf;color:#f2563b}.y{background:#ffefbf;color:#f5a623}
.evf{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ddd;margin-top:6px;padding-top:8px;font-size:11px;font-weight:500;color:#333}
.stack{display:flex;gap:16px;align-items:center}
.plus{width:18px;height:18px;border-radius:50%;background:#4B5B7A;color:#fff;font-size:8.5px;display:grid;place-items:center}
.comp{display:flex;gap:12px;align-items:center}
.inp{flex:1;background:#f5f5f5;border-radius:6px;height:33px;display:flex;align-items:center;padding:0 10px;color:#999;font-size:12px;gap:10px}
.acts{display:flex;align-items:center;gap:26px;margin-top:14px;font-size:12px;color:#444}
.acts span{display:flex;align-items:center;gap:6px}
.post{height:31px;width:75px;margin-left:auto;background:#3B82F6;color:#fff;border:0;border-radius:4px;font:inherit;font-size:13px}
.ph{display:flex;justify-content:space-between;padding:16px 13px 0}
.media{margin:12px 13px;height:180px;border-radius:8px;object-fit:cover;width:calc(100% - 26px)}
.stats{display:flex;align-items:center;justify-content:space-between;padding:0 13px 12px;font-size:12px;color:#777}
.bar{display:flex;justify-content:space-between;margin:0 13px;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;padding:8px 0;font-size:10.5px;color:#333}
.bar span{display:flex;align-items:center;gap:6px}
.send{width:30px;height:30px;border-radius:6px;background:#dbe8fd;color:#3B82F6;display:grid;place-items:center}
.right{padding:16px 16px}
.stories{display:flex;gap:14px;margin:24px 0 30px;align-items:flex-start}
.st{text-align:center;font-size:11.5px;color:#4A5568}
.ring{width:39px;height:39px;border-radius:50%;border:2px solid #3B82F6;margin-bottom:12px;padding:2px}
.fh{display:flex;justify-content:space-between;color:#4A5568;font-weight:500;font-size:13px;margin-bottom:18px}
.fr{display:flex;align-items:center;gap:10px;height:46px}
.fr .n{flex:1;font-size:13px;color:#4A5568;font-weight:500}
.fr .t{font-size:9.5px;color:#888}
.dot{width:6px;height:6px;border-radius:50%;background:#22c55e}
.fa{position:relative}.fa .on{position:absolute;right:0;bottom:0;width:8px;height:8px;border:2px solid #fff;border-radius:50%;background:#22c55e}
@media(max-width:1000px){.shell{grid-template-columns:72px 1fr}.right{display:none}.nav a span.l,.logo b{display:none}.logo{width:auto}.side{padding:8px}}
@media(max-width:760px){.main{grid-template-columns:1fr;padding:16px}.main .col:first-child{order:2}.top .search{display:none}.shell{grid-template-columns:1fr}.side{position:fixed;bottom:0;left:0;right:0;background:#fff;z-index:5;box-shadow:0 -2px 8px rgba(0,0,0,.08)}.nav{display:flex;justify-content:space-around}.nav a{margin:0;padding:0 10px}.nav a:nth-child(n+7){display:none}body{padding-bottom:56px}}
.main.one{grid-template-columns:minmax(0,584px)}
.tabs{padding:13px;display:grid;grid-template-columns:293px 1fr;gap:13px}
.tab{height:35px;border:1px solid #ddd;border-radius:4px;background:#fff;font:inherit;font-weight:500;color:#4A5568;cursor:pointer}
.tab.on{background:#3B82F6;border-color:#3B82F6;color:#fff}
.tab.w{grid-column:1/-1}
.pgrid{display:grid;grid-template-columns:211px 211px;justify-content:space-between;gap:13px}
.pc{padding:14px 13px}
.pc .btn.u{color:#888}
.panel[hidden]{display:none}
@media(max-width:760px){.tabs{grid-template-columns:1fr 1fr}.pgrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.pgrid{grid-template-columns:1fr}}
.shell.nr{grid-template-columns:192px 1fr}
.main.msg{grid-template-columns:291px 1fr;margin-right:24px;border-radius:14px 14px 0 0}
.cl{padding:13px;min-height:560px}
.clh{display:flex;gap:13px;margin-bottom:14px}.clh .search{flex:1}
.star{width:34px;height:34px;border-radius:6px;background:#f0f0f0;color:#22c55e;display:grid;place-items:center;border:0;cursor:pointer}
.star.on{background:#d9f5e3}
.cv{display:flex;gap:12px;align-items:center;padding:12px 8px;border-radius:8px;cursor:pointer;margin-bottom:6px}
.cv.on,.cv:hover{background:#f5f5f5}
.cv .fa img{width:32px;height:32px}.cv .fa .on{background:#bbb}.cv .fa .on.g{background:#22c55e}
.cv .nm{font-size:13.5px;color:#4A5568;font-weight:500}.cv .pv{font-size:10px;color:#888;margin-top:2px}
.cv .rt{margin-left:auto;text-align:right;font-size:10px;color:#888;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.bd{background:#f2563b;color:#fff;border-radius:3px;font-size:9.5px;min-width:15px;height:15px;display:grid;place-items:center}
.sv{color:#ccc;font-size:16px}.sv.gg{color:#22c55e}
.chat{display:flex;flex-direction:column;min-height:560px}
.chh{display:flex;align-items:center;padding:12px 18px 12px 53px;border-bottom:1px solid #eee}
.chh .ic2{margin-left:auto;display:flex;gap:14px;color:#555}
.cbody{flex:1;padding:12px 24px;overflow:auto;max-height:520px}
.dd{text-align:center;font-size:10px;font-weight:500;color:#555;margin-bottom:12px}
.m{display:flex;align-items:flex-end;gap:10px;margin-bottom:6px}
.m .b{max-width:355px;padding:10px 13px;border-radius:12px;font-size:12px;line-height:1.35}
.m.in .b{background:#3B82F6;color:#fff}.m.in{margin-left:0}
.m.out{justify-content:flex-end}.m.out .b{background:#fff;color:#4A5568;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.m .mi{color:#555;align-self:center}
.ts{font-size:9.5px;color:#888;margin:0 0 22px 16px}.ts.rr{text-align:right;margin:0 0 22px}
.dotg{width:6px;height:6px;border-radius:50%;background:#22c55e;align-self:center}
.cin{display:flex;gap:10px;padding:12px 18px;border-top:1px solid #eee}
.cin input{flex:1;border:0;background:#f5f5f5;border-radius:6px;padding:0 12px;height:34px;font:inherit;font-size:12px;outline:0}
.cin button{border:0;width:34px;border-radius:6px;background:#3B82F6;color:#fff;cursor:pointer}
@media(max-width:1000px){.shell.nr{grid-template-columns:72px 1fr}}
@media(max-width:760px){.shell.nr{grid-template-columns:1fr}.main.msg{grid-template-columns:1fr;margin:0}.cl{min-height:0}}
.main.full{grid-template-columns:1fr;margin-right:24px}
.note{font-size:10px;color:#999;text-align:center;padding:16px 0 4px}
/* notification */
.nr2{display:flex;align-items:center;gap:12px;padding:12px 13px;min-height:57px}
.nr2 .ti{width:18px;height:18px;border-radius:50%;display:grid;place-items:center}.nr2 .ti .mi{font-size:11px}
.tb{background:#dbe8fd;color:#3B82F6}.tg{background:#cdf2dd;color:#22b261}.tr{background:#ffd6cf;color:#f2563b}.tt{background:#ccf3ec;color:#14b8a6}
.nr2 .tx{font-size:13px;color:#4A5568;font-weight:500}.nr2.read .tx{color:#999}
.nr2 .end{margin-left:auto}.ud{width:6px;height:6px;border-radius:50%;background:#f2563b;display:block}
.nr2 .btn{flex:none;padding:0 12px;height:31px;font-size:12px}
/* explore */
.exh{display:flex;justify-content:space-between;align-items:center;padding:13px}
.exh h1{font-size:23px;color:#4A5568}.exh .btn{flex:none;width:200px;height:35px}
.exg{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ar img{width:100%;height:160px;object-fit:cover;border-radius:10px 10px 0 0;display:block}
.ar .cb{padding:13px}.tag{font-size:11px;padding:3px 8px;border-radius:2px;margin-right:10px}
.tag.f{background:#ffe0d9;color:#f2563b}.tag.n{background:#d4f5e1;color:#22b261}
.ar h3{font-size:14.5px;color:#4A5568;margin:16px 0 18px;line-height:1.4}.ar p{font-size:11.5px;color:#555;line-height:1.35}
.rm{display:inline-flex;gap:6px;align-items:center;margin-top:14px;color:#3B82F6;font-size:11.5px;font-weight:500}
/* profile */
.pmain{padding:24px 24px 24px 24px}
.cover{position:relative;height:376px;overflow:hidden}
.cover .img{height:250px;background:url(https://picsum.photos/seed/cover/1000/300) center/cover;border-radius:10px 10px 0 0}
.ecp{position:absolute;right:24px;top:225px;background:#fff;border:1px solid #ddd;border-radius:5px;padding:7px 10px;font-size:12px;color:#4A5568;display:flex;gap:6px;align-items:center}
.pav{position:absolute;left:24px;top:190px;border:4px solid #fff}
.pn{position:absolute;left:24px;bottom:28px}.pn h2{font-size:20px;color:#4A5568}.pn div{color:#999;font-size:12.5px;margin-top:4px}
.ebi{position:absolute;right:24px;bottom:32px;display:flex;align-items:center;gap:16px}.ebi span.b{background:#f2f2f2;border-radius:5px;padding:9px 13px;font-size:12px;color:#4A5568}
.pgrid3{background:#F5F5F5;border-radius:14px;margin-top:24px;padding:24px;display:grid;grid-template-columns:169px 1fr 208px;gap:24px;align-items:start}
.intro li{list-style:none;display:flex;gap:12px;align-items:center;font-size:12px;color:#4A5568;padding:6px 0}.intro .mi{font-size:16px;color:#666}
/* login */
.auth{max-width:464px;margin:0 auto;text-align:center;padding:0 16px 40px}
.auth h1{font-size:23px;color:#4A5568;margin:16px 0 18px}.auth .sub{color:#4A5568;font-size:13px;margin-bottom:30px}
.auth .card{padding:30px 32px;text-align:left}
.soc2{display:flex;gap:16px}.soc2 a{flex:1;background:#f2f4f7;border-radius:5px;height:35px;display:flex;align-items:center;justify-content:center;gap:8px;color:#4A5568;font-size:13px}
.or{display:flex;align-items:center;gap:14px;margin:22px 0;color:#4A5568;font-weight:700;font-size:13px}.or:before,.or:after{content:"";flex:1;height:1px;background:#e3e3e3}
.fld{display:flex;align-items:center;gap:10px;border:1px solid #c9c9c9;border-radius:6px;height:41px;padding:0 12px;margin-bottom:17px;color:#555}
.fld input{border:0;outline:0;flex:1;font:inherit;font-size:12px}
.row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#4A5568;margin-bottom:22px}
.big{display:block;width:100%;height:41px;background:#3B82F6;color:#fff;border:0;border-radius:5px;font:inherit;font-size:13px;text-align:center;line-height:41px;cursor:pointer}
.sw{text-align:center;font-size:12px;color:#4A5568;font-weight:500;margin-top:24px}.sw a{color:#3B82F6;margin-left:6px;cursor:pointer}
/* settings */
.sg{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start}
.snav a{display:block;padding:10px 13px;border-radius:5px;color:#4A5568;font-weight:500;font-size:13px}.snav a:hover{background:#f5f5f5}
.ss{padding:0 0 6px;margin-bottom:24px;scroll-margin-top:12px}.ss .cb{display:grid;gap:14px}
.sr{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:13px;color:#4A5568}.sr small{display:block;color:#888;font-size:11px;margin-top:2px}
.sr input[type=text],.sr input[type=email],.sr input[type=password],.sr select{border:1px solid #ccc;border-radius:5px;height:33px;padding:0 10px;font:inherit;font-size:12px;width:260px}
.tg2{appearance:none;width:34px;height:19px;border-radius:10px;background:#ccc;position:relative;cursor:pointer;flex:none}.tg2:before{content:"";position:absolute;left:2px;top:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:.15s}.tg2:checked{background:#3B82F6}.tg2:checked:before{left:17px}
.newb{font-size:10px;background:#dbe8fd;color:#3B82F6;padding:3px 8px;border-radius:10px;margin-left:8px;vertical-align:middle}
@media(max-width:1000px){.exg{grid-template-columns:1fr 1fr}.pgrid3{grid-template-columns:1fr 1.6fr}.pgrid3>.col:last-child{display:none}}
@media(max-width:760px){.main.full{margin:0}.exg,.pgrid3,.sg{grid-template-columns:1fr}.sr{flex-wrap:wrap}.sr input,.sr select{width:100%!important}.exh .btn{width:auto;padding:0 16px}.cover{height:340px}}
.pmain{min-width:0;padding-right:24px}.pgrid3>*{min-width:0}
/* fill-width fix */
.main{grid-template-columns:231px minmax(0,1fr)}
.main.one{grid-template-columns:minmax(0,1fr)}
.pgrid{grid-template-columns:repeat(auto-fill,minmax(211px,1fr));justify-content:stretch}
.media{height:auto;aspect-ratio:16/9;max-height:520px}
.main.msg{grid-template-columns:291px minmax(0,1fr)}
.main.full{grid-template-columns:minmax(0,1fr)}
@media(min-width:1400px){.main{grid-template-columns:280px minmax(0,1fr)}.shell{grid-template-columns:220px 1fr 260px}.shell.nr{grid-template-columns:220px 1fr}}
@media(max-width:760px){.main,.main.msg{grid-template-columns:1fr}}
.ptext{padding:12px 13px 0;font-size:13px;color:#4A5568;line-height:1.5}
.mgrid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:6px;margin:12px 13px;aspect-ratio:16/9;max-height:520px}
.mgrid img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}.mgrid img:first-child{grid-row:1/3}
.lnk{display:flex;margin:12px 13px;border:1px solid #e5e5e5;border-radius:8px;overflow:hidden}
.lnk img{width:38%;object-fit:cover;min-height:140px}.lnk div{padding:14px}.lnk small{color:#888;font-size:10.5px;text-transform:uppercase}.lnk b{display:block;color:#1A1A1A;margin:6px 0;font-size:14px}.lnk p{font-size:12px;color:#525252}
.bar span{cursor:pointer;user-select:none}.bar .lk.on{color:#f2563b}.bar .lk.on svg{fill:#f2563b}
.spon{font-size:10px;color:#888;display:flex;gap:6px;align-items:center}
.adlogo{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#3B82F6,#14b8a6);color:#fff;display:grid;place-items:center;font-weight:700}
.adb{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 13px 14px}.adb b{color:#1A1A1A;font-size:14px}.adb p{font-size:12px;color:#525252;margin-top:4px}
.adb .btn{flex:none;width:auto;padding:0 18px;height:33px}
.adtag{position:absolute;top:10px;right:10px}
.gh{display:flex;align-items:center;gap:16px;padding:13px;flex-wrap:wrap}.gh h1{font-size:23px;color:#4A5568;margin-right:auto}.gh .search{width:280px}.gh .btn{flex:none;width:auto;padding:0 18px;height:35px}
.gtabs{display:flex;gap:10px;padding:0 13px 13px}.gtabs .tab{padding:0 18px}
.sec h2{font-size:15px;color:#4A5568;margin:0 0 12px}
.grow{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.gc{overflow:hidden}.gc .cv2{height:100px;background-size:cover;background-position:center}
.gc .cb{display:flex;flex-direction:column;gap:4px}.gc .btn{margin-top:10px;flex:none;width:100%;height:31px}
.gpost .grp{font-size:11px;color:#3B82F6;font-weight:500}
.chip{display:inline-flex;align-items:center;gap:4px;height:33px;padding:0 14px;border-radius:17px;background:#f0f2f5;color:#4A5568;font:inherit;font-size:12.5px;font-weight:500;border:0;cursor:pointer}
.chip.on{background:#4B5B7A;color:#fff}.chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 13px 13px}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}
.li{overflow:hidden;cursor:pointer;position:relative}.li img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.li .cb{padding:10px 12px}.li .pr{font-weight:700;font-size:15px;color:#1A1A1A}.li .tt{font-size:13px;color:#4A5568;margin:2px 0}
.sv2{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:#fff;border:0;display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.2);color:#525252}.sv2.on{color:#f2563b}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:50;padding:16px}.modal[hidden]{display:none}
.mbox{background:#fff;border-radius:12px;max-width:820px;width:100%;display:grid;grid-template-columns:1.2fr 1fr;overflow:hidden;position:relative}
.mbox img{width:100%;height:100%;min-height:320px;object-fit:cover}.mbox .cb{padding:24px;display:flex;flex-direction:column;gap:10px}
.mbox .x{position:absolute;top:10px;right:10px;border:0;background:#f0f2f5;width:32px;height:32px;border-radius:50%;cursor:pointer}
@media(max-width:760px){.mbox{grid-template-columns:1fr}.mbox img{min-height:220px;max-height:280px}}