:root{font:16px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;color:#edf0f7;background:#101219;--bg:#101219;--rail:#0d0e14;--side:#171923;--main:#1d202b;--card:#282b39;--line:#343747;--muted:#a7adbf;--accent:#776cff;--accent2:#9c87ff;--danger:#fa747b;--green:#56d6a5}
    *{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow:hidden}button,input,textarea,select{font:inherit}button{cursor:pointer;color:inherit;border:0}button:disabled{opacity:.45;cursor:not-allowed}input,textarea,select{color:inherit;background:#141620;border:1px solid #404456;border-radius:10px;padding:11px 13px;outline:none}input:focus,textarea:focus,select:focus,button:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}textarea{resize:vertical}a{color:#b4aeff}.hidden{display:none!important}.muted{color:var(--muted)}.small{font-size:.83rem}.eyebrow{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:#b2b5c7}.accent{color:var(--accent2)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;background:var(--card);padding:10px 14px;font-weight:650;min-height:42px;white-space:nowrap}.btn:hover,.navitem:hover,.iconbtn:hover,.servericon:hover{background:#383c4e}.btn.primary{background:var(--accent);color:white}.btn.primary:hover{background:#8a7fff}.btn.danger{background:#893e49}.btn.outline{background:transparent;border:1px solid var(--line)}.iconbtn{background:transparent;border-radius:11px;width:42px;height:42px;font-size:1.27rem;display:grid;place-items:center}.iconbtn.active{color:#fff;background:#393261}.avatar{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:#353949;flex:none;font-size:1.25rem}.onlineDot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 2px #1b1d28;flex:none}.offlineDot{background:#6b7080}.pill{font-size:.76rem;font-weight:700;background:#393451;color:#c7baff;border-radius:6px;padding:2px 6px;white-space:nowrap}.app{height:100dvh;display:grid;grid-template-columns:70px 268px minmax(0,1fr) 234px;grid-template-rows:62px minmax(0,1fr);background:var(--main)}
    .top{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:0 20px;border-bottom:1px solid var(--line);background:#11131b;min-width:0}.brand{font-weight:850;letter-spacing:-.045em;font-size:1.43rem;margin-right:auto;display:flex;align-items:center;gap:10px}.mark{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:linear-gradient(140deg,#8377ff,#5347da);color:white;font-weight:900;box-shadow:0 0 23px #665aff55}.topnote{color:#a8a9ba;font-size:.85rem}.rail{background:var(--rail);border-right:1px solid var(--line);display:flex;align-items:center;flex-direction:column;gap:12px;padding:16px 8px;overflow:auto}.servericon{background:#272b38;width:49px;height:49px;border-radius:17px;display:grid;place-items:center;font-size:1.44rem;flex:none;transition:border-radius .15s,background .15s;position:relative}.servericon:hover,.servericon.selected{border-radius:13px;background:#554bc3}.servericon.selected:before{content:"";position:absolute;left:-8px;width:4px;height:28px;background:#a69fff;border-radius:0 4px 4px 0}.railsep{width:27px;height:1px;background:var(--line);flex:none}.sidebar{background:var(--side);display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line)}.sidehead{padding:19px 18px 12px;display:flex;align-items:center;gap:8px;justify-content:space-between;min-height:70px}.sidehead h2{font-size:1.09rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.sidebody{overflow-y:auto;flex:1;padding:6px 10px 18px}.sectionhead{display:flex;align-items:center;justify-content:space-between;padding:18px 10px 8px}.navitem{width:100%;background:transparent;color:#b8bbca;border-radius:10px;text-align:left;display:flex;align-items:center;gap:10px;padding:10px 11px;min-height:42px;margin:2px 0}.row>.navitem{min-width:0;flex:1}.navitem.selected{background:#393452;color:white}.navitem .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.navitem .tiny{font-size:.76rem}.self{border-top:1px solid var(--line);padding:10px;display:flex;align-items:center;gap:9px;background:#14161f}.selfText{flex:1;min-width:0}.selfText strong,.selfText span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selfText span{color:var(--muted);font-size:.8rem}.center{min-width:0;display:flex;flex-direction:column;position:relative}.roomhead{height:70px;min-height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 22px}.roomhead h1{font-size:1.04rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.roomhead .heading{flex:1;min-width:0}.roomhead small{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.content{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}.messages{flex:1;overflow:auto;padding:24px max(20px,4vw) 12px;min-height:120px}.msg{display:flex;gap:12px;margin:0 0 18px}.msgContent{flex:1;min-width:0}.msgHead{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.msgHead strong{font-size:.94rem}.msgHead time,.msgHead .expire{color:var(--muted);font-size:.76rem}.msgBody{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.97rem;margin-top:3px}.gif{display:block;max-width:min(340px,100%);max-height:250px;object-fit:contain;border-radius:11px;margin-top:8px}.deleteMsg{font-size:.8rem;background:none;color:#9e9fae;margin-left:auto;padding:3px 6px}.deleteMsg:hover{color:var(--danger)}.composeWrap{padding:12px 18px 19px;background:linear-gradient(transparent,#1d202b 23%)}.compose{display:flex;align-items:flex-end;gap:8px;padding:7px;background:#2a2d3a;border-radius:15px;border:1px solid #3a3d4c}.compose textarea{background:none;border:0;resize:none;flex:1;min-width:0;max-height:145px;min-height:42px;line-height:1.5;padding:9px 5px}.compose textarea:focus{outline:0}.expiry{font-size:.82rem;padding:5px 8px;margin:0 0 5px 7px;color:var(--muted)}.expiry select{font-size:.83rem;padding:5px;background:transparent;border:0}.empty{margin:auto;text-align:center;max-width:390px;padding:35px;color:var(--muted)}.empty .big{font-size:2.6rem;margin-bottom:14px}.empty strong{display:block;color:#f0f0fa;font-size:1.18rem;margin-bottom:5px}.friendsPanel{padding:25px max(22px,4vw);overflow:auto}.panelTitle{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.panelTitle h1{margin:0;font-size:1.25rem}.friendGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.friendcard{background:#252936;border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;gap:12px;align-items:center}.friendcard .info{flex:1;min-width:0}.friendcard .info strong,.friendcard .info span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friendcard .info span{color:var(--muted);font-size:.84rem}.friendcard .avatar{width:43px;height:43px}.friendcard .actions{display:flex;gap:3px}.callbar{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:11px 18px;background:#322b56;border-top:1px solid #675aa4}.callbar>div:first-child{min-width:0}.callbar strong,.callbar small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.callControls{display:flex;align-items:center;gap:5px}.videos{display:flex;gap:8px;overflow:auto;max-height:220px;padding:8px 16px;background:#14141d}.videos video{width:260px;max-height:190px;object-fit:contain;background:black;border-radius:9px}.right{background:#1a1c27;border-left:1px solid var(--line);padding:20px 13px;overflow:auto}.right h3{margin:0 0 15px;font-size:.81rem;color:#adb0c2;letter-spacing:.1em;text-transform:uppercase}.right .navitem{font-size:.89rem}.right .miniInfo{margin-top:26px;border-top:1px solid var(--line);padding-top:20px;color:var(--muted);font-size:.83rem}.toast{position:fixed;right:23px;bottom:25px;z-index:30;background:#34334d;color:#fff;max-width:350px;border:1px solid #7b71bd;border-radius:12px;padding:13px 16px;box-shadow:0 12px 38px #0008}.ring{position:fixed;z-index:21;top:78px;right:20px;width:min(350px,calc(100vw - 30px));border-radius:16px;background:#322c4d;border:1px solid #8977c9;padding:18px;box-shadow:0 14px 38px #0009}.ring .row{display:flex;gap:10px;margin-top:14px}.tagemoji{max-height:18px;max-width:18px;vertical-align:middle}.hint{font-size:.82rem;color:var(--muted);margin:3px 0 12px}
    dialog{color:inherit;background:#20232f;border:1px solid #515266;border-radius:20px;padding:0;box-shadow:0 25px 90px #000c;max-height:min(91dvh,850px);max-width:calc(100vw - 22px)}dialog::backdrop{background:#080810bb;backdrop-filter:blur(4px)}.modal{padding:25px;width:min(430px,calc(100vw - 28px));max-height:85dvh;overflow:auto}.modal.wide{width:min(680px,calc(100vw - 28px))}.modalHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.modalHeader h2{font-size:1.24rem;margin:0}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.field label{font-size:.85rem;color:#c2c4d5;font-weight:650}.field input,.field textarea,.field select{width:100%}.row{display:flex;align-items:center;gap:10px}.row.wrap{flex-wrap:wrap}.row.between{justify-content:space-between}.tabs{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 22px}.tabs button{padding:9px 12px;border-radius:9px;background:#2b2e3d}.tabs button.active{background:#534c93}.range{width:100%;accent-color:var(--accent);cursor:pointer}.searchResult{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.searchResult .info{flex:1;min-width:0}.searchResult strong,.searchResult small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.searchResult small{color:var(--muted)}.authCover{position:fixed;inset:0;z-index:50;background:radial-gradient(circle at 75% 24%,#35306a 0%,transparent 38%),#101219;display:grid;place-items:center;padding:20px}.authCard{width:min(425px,100%);background:#1f2230;border:1px solid #44465b;border-radius:21px;padding:30px;box-shadow:0 20px 65px #0009}.authCard h1{font-size:1.65rem;margin:17px 0 4px}.authCard p{color:var(--muted);margin:0 0 24px}.authCard input{width:100%}.authCard .btn{width:100%;margin:8px 0}.authCard .tabs{justify-content:center}.authErr{color:#ff9fa5;min-height:24px;font-size:.89rem}.banner{background:#5a3341;border:1px solid #b56b78;padding:9px 15px;border-radius:9px;margin-bottom:14px;font-size:.88rem}.mobileMenu{display:none}.mobileBack{display:none}
    @media(max-width:1050px){.app{grid-template-columns:66px 254px minmax(0,1fr)}.right{display:none}}
    @media(max-width:700px){.app{grid-template-columns:58px minmax(0,1fr);grid-template-rows:56px minmax(0,1fr)}.top{padding:0 10px}.brand{font-size:1.24rem}.topnote{display:none}.rail{grid-column:1;grid-row:2}.sidebar{position:absolute;z-index:11;top:56px;bottom:0;left:58px;width:min(285px,calc(100vw - 58px));box-shadow:14px 0 35px #0006}.app:not(.showSide) .sidebar{display:none}.center{grid-column:2;grid-row:2}.roomhead{height:60px;min-height:60px;padding:0 10px;gap:5px}.roomhead .iconbtn{width:36px}.mobileMenu,.mobileBack{display:grid}.messages{padding:16px 12px}.composeWrap{padding:6px 7px 10px}.compose{gap:3px}.compose .iconbtn{width:33px;height:39px;font-size:1.1rem}.compose .btn{padding:8px}.callbar{flex-wrap:wrap}.callControls{flex-wrap:wrap}.friendsPanel{padding:18px 13px}.friendGrid{grid-template-columns:1fr}.ring{top:66px;right:8px}}
    body.lowPower *,body.lowPower *:before,body.lowPower *:after{animation:none!important;transition:none!important;backdrop-filter:none!important;box-shadow:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Compact graphite layout, based on the friend's view in the reference image. */
:root{--bg:#13141b;--rail:#111218;--side:#1d1f27;--main:#22242c;--card:#2b2e3a;--line:#3c3e4c;--accent:#7369f2;--accent2:#a69fff;--green:#65dfbc}
body{background:var(--main)}.app{background:var(--main);grid-template-rows:58px minmax(0,1fr)}
.top{position:relative;background:#14151c;border-top:2px solid #776bfd;padding:0 22px}.topnote{margin-right:auto;font-size:.72rem;letter-spacing:.12em;font-weight:750}.top .brand{position:absolute;left:50%;transform:translateX(-50%);margin:0;font-size:1.31rem;pointer-events:none;white-space:nowrap}.brandIcon{display:block;flex:none;width:36px;height:36px}.authCard .brandIcon{width:42px;height:42px}.authCard .brand{justify-content:center;margin:0}.top>.iconbtn{color:#d9d8e9}
.rail{background:#111218}.rail .servericon:first-child{font-size:1.7rem}.sidebar{background:#1b1d24}.sidehead{border-bottom:1px solid var(--line);min-height:62px}.sidebody{background:#1c1e25}.self{background:#111218;border:1px solid #343645;border-radius:14px;margin:8px;padding:9px}.selfText strong{font-size:.9rem}.navitem.selected{background:#514b7f}.center{background:#25272f}.roomhead{height:62px;min-height:62px;background:#292b33}.right{background:#1d1f27}.right h3{color:#e0dffa}.friendcard{background:#2b2d37;border-color:#3d3e49;transition:background .15s}.friendcard:hover{background:#343641}.friendcard .info strong{color:#f3f2fb}.friendcard .info .playing{color:#8eeacb;font-weight:650}.friendcard .info .topGame{color:#b9b6c9}.friendcard .actions .iconbtn{font-size:1.12rem}.friendsPanel{background:#25272f}.panelTitle{border-bottom:1px solid #434451;padding-bottom:16px}.panelTitle h1{font-size:1.55rem}.panelTitle .eyebrow{color:#a89fff}.activitySpotlight{margin:0 0 20px;background:#1b1d26;border:1px solid #424355;border-radius:17px;padding:17px 18px}.activitySpotlight h2{margin:0 0 10px;font-size:.84rem;text-transform:uppercase;letter-spacing:.09em;color:#c5c0ef}.activityTiles{display:flex;flex-wrap:wrap;gap:9px}.activityTile{border:1px solid #3f4351;background:#292c36;border-radius:11px;padding:9px 12px;font-size:.83rem;display:flex;gap:8px;align-items:center}.activityTile strong{color:#fff}.activityTile small{display:block;color:#a3a9bd}.activityTile.emptyTile{color:#aeb2c2}.friendsPanel .btn.primary{background:#7166ea}.composeWrap{background:linear-gradient(transparent,#25272f 23%)}.compose{background:#30333e}
.avatar{overflow:hidden;background:#3b3e4b;border:1px solid #555769;color:#f3f0ff}.avatar img{width:100%;height:100%;object-fit:cover;display:block}.photoPreview{width:52px;height:52px;font-size:1.7rem}.privacy{font-size:.86rem;color:#d7d8e7;margin:10px 0 20px}.privacy input{width:auto!important}.right .activitySmall{display:block;font-size:.74rem;color:#80dbbe;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.right .topSmall{display:block;color:#aeb4c5;font-size:.72rem}.right .navitem{min-height:58px}.right .navitem .label{line-height:1.2}
.installBanner{position:fixed;z-index:80;top:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:13px;padding:9px 16px;background:#191927;border-bottom:2px solid #8177f7;box-shadow:0 6px 25px #0008}.installBanner>div{flex:1;max-width:450px}.installBanner strong,.installBanner small{display:block}.installBanner small{font-size:.75rem;color:#c1c2d2}.installBanner .btn{min-height:37px;font-size:.86rem}body.hasInstall .app{height:calc(100dvh - var(--install-h,58px));margin-top:var(--install-h,58px)}body.hasInstall .authCover{top:var(--install-h,58px)}
.homeDock{min-height:68px;background:#101116;border:1px solid #3e404d;border-radius:13px;margin:8px 14px 10px;padding:8px 12px;display:flex;align-items:center;gap:10px}.homeDock .avatar{width:46px;height:46px}.dockInfo{flex:1;min-width:0}.dockInfo strong,.dockInfo span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dockInfo span{font-size:.8rem;color:#a7aabe}.homeDock .iconbtn{border:1px solid #555668;border-radius:50%;font-size:1.13rem;width:39px;height:39px}
.authCover{overflow-y:auto;display:flex;align-items:flex-start;justify-content:center}.authCard{margin:auto 0}
.deviceStatus{border:1px solid #474958;border-radius:10px;background:#292b36;padding:10px 12px;font-size:.85rem;color:#d5d5e7;margin-bottom:10px}#audioSettings .row.wrap{margin:10px 0 19px}.micMeter{height:11px;background:#151822;border-radius:9px;overflow:hidden;margin:10px 0 16px}.micMeter span{display:block;height:100%;width:0;background:linear-gradient(90deg,#6bdbbd,#a9e7cb);transition:width .08s}
.activityCurrent{border:1px solid #48495c;background:#282b38;border-radius:11px;padding:12px;margin:8px 0 14px}.activityCurrent strong{color:#94e7c9}.yearContent{margin:16px 0}.recapHero{padding:24px;border-radius:19px;background:linear-gradient(125deg,#40386e,#262939 61%,#18524c);border:1px solid #7d74b2}.recapHero .eyebrow{color:#cfcaff}.recapHero h3{font-size:2rem;margin:8px 0 4px}.recapHero p{margin:0;color:#d9d9ee}.recapStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:12px 0}.recapStat{border-radius:12px;background:#30313e;padding:13px}.recapStat strong{display:block;font-size:1.2rem;color:#fff}.recapStat small{color:#c0c0d1}.recapGames{margin:14px 0 0}.recapGame{margin:12px 0}.recapGame .row{justify-content:space-between;font-size:.87rem}.recapTrack{height:8px;border-radius:5px;background:#3d3e4d;overflow:hidden}.recapTrack span{display:block;height:100%;background:linear-gradient(90deg,#786cf5,#69d6c8)}
@media(max-width:1050px){.app{grid-template-columns:66px 254px minmax(0,1fr)}}
@media(max-width:700px){.app{grid-template-rows:56px minmax(0,1fr)}.top{padding:0 7px}.top .brand{position:static;transform:none;flex:1;min-width:0;font-size:1.05rem}.top .brandIcon{width:29px;height:29px}.top>.iconbtn{width:38px}.sidebar{top:56px}.installBanner{justify-content:space-between;gap:8px;padding:8px}.installBanner img{width:29px;height:29px}.installBanner strong{font-size:.8rem}.installBanner small{font-size:.68rem}.installBanner .btn{font-size:.72rem;padding:5px 8px}.recapStats{grid-template-columns:1fr 1fr}.friendsPanel{padding:16px 12px}.panelTitle .btn{font-size:.82rem;padding:8px}.homeDock{margin:5px;padding:6px;gap:5px}.homeDock .avatar{width:37px;height:37px}.dockInfo strong{font-size:.85rem}.dockInfo span{font-size:.7rem}.homeDock .iconbtn{width:32px;height:32px}}
@media(max-width:700px){body.hasInstall .sidebar{top:calc(var(--install-h,58px) + 56px)}}