/* Shared layout and component system for desktop and mobile. */
:root{--header:64px;--bg:#f3f5f8;--surface:#fff;--surface-alt:#f0f3f8;--text:#17243d;--muted:#65728a;--accent:#1769ed;--accent-hover:#1058cc;--accent-soft:#eaf1ff;--line:#e5eaf2;--radius:16px;--shadow:0 3px 15px #23395b05;--sidebar:235px;--rightbar:290px;--gap:32px}
body{font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:14px;letter-spacing:-.1px}.topbar{height:64px;border:0;box-shadow:0 1px 0 #e5eaf2;padding:0 28px;gap:18px}.topbar .brand{width:195px;font-size:28px;letter-spacing:-1.4px;gap:9px}.topbar .brand img{width:37px;height:37px}.global-search{max-width:245px;background:var(--surface-alt);padding:0 15px;border-radius:28px}.global-search input{font-size:12px}.global-search kbd{display:none}.top-center-nav{position:absolute;left:50%;transform:translateX(-50%);gap:8px;height:64px}.top-center-nav a{width:85px;border-radius:9px 9px 0 0;border-bottom-width:3px}.top-center-nav a.active{background:linear-gradient(0deg,#eaf1ff88,transparent)}.top-center-nav .icon{width:24px;height:24px}.topbar-actions{gap:10px}.today-date,.topbar-divider{display:none}.topbar-actions .notification-btn{background:var(--surface-alt);width:39px;height:39px}.topbar-profile>span:not(.avatar),.topbar-profile>.icon{display:none}.topbar-profile .avatar{width:39px;height:39px;min-width:39px}.count-badge{background:#e94a62}
.app-layout{max-width:1440px;padding:27px 28px 45px;grid-template-columns:235px minmax(0,640px) 290px;gap:32px;justify-content:center}.sidebar{top:88px;height:calc(100dvh - 110px);padding-right:6px}.sidebar-profile{padding:0 11px 22px}.sidebar-profile .avatar{width:43px;height:43px;min-width:43px}.sidebar-profile b{font-size:13px}.sidebar-profile span:not(.avatar){font-size:11px}.nav-item{padding:12px 14px;gap:13px;font-size:13px;color:var(--muted);font-weight:550;border-radius:10px}.nav-item .icon{width:21px;height:21px}.nav-item.selected:before{display:none}.nav-item.selected{background:#e4edff;color:var(--accent)}.main-nav{gap:4px}.nav-heading,.section-kicker{font-size:9px;letter-spacing:1.7px;color:#7b879b}.nav-divider{margin:19px 12px}.sidebar-create{margin-top:22px;margin-bottom:24px;border-radius:11px;padding:12px}.sidebar-groups{border-top:0;padding-top:0}.sidebar-groups>a{font-size:12px;padding:10px 12px;gap:11px}.shortcut-icon{width:32px;height:32px}.sidebar-bottom{padding-top:20px}.sidebar-footer{font-size:10px;line-height:1.9;color:var(--muted)}.sidebar-footer p span{display:none}
.page-heading h1{font-size:27px;letter-spacing:-.8px}.page-heading>.eyebrow,.page-heading>div>.eyebrow{display:none}.page-heading>p:last-child,.page-heading>div>p:last-child{font-size:13px;line-height:1.6}.welcome-heading{display:none}.stories{background:var(--surface);border:1px solid var(--line);padding:17px;border-radius:16px;margin:0 0 20px;gap:10px}.story{flex:0 0 92px}.story-art{height:136px;width:92px;border-radius:12px;border:0}.story>span:last-child{font-size:11px;margin-top:9px;font-weight:600}.story-add .story-art{background:linear-gradient(145deg,#e9f1ff,#dce8ff)}.story-add i{left:33px;bottom:19px;border-color:#e5eeff}.story-add .avatar{opacity:1}.stories-empty{padding:14px 15px;gap:6px}.stories-empty b{font-size:16px;letter-spacing:-.4px}.stories-empty span{font-size:12px;line-height:1.7;max-width:250px;color:var(--muted)}
.composer{padding:18px 20px 0;margin-bottom:21px;border-color:var(--line)}.inline-composer .composer-main{gap:12px;padding-bottom:15px;align-items:center}.inline-composer textarea.composer-trigger{font-size:14px;min-height:48px;border:0;border-radius:12px;padding:12px 15px;line-height:1.65;resize:vertical}.composer .avatar{width:42px;height:42px;min-width:42px}.inline-composer .composer-tools{padding:12px 0;gap:10px}.composer-file{padding:4px 0;font-size:12px;color:var(--muted);gap:7px}.composer-file .icon{width:20px;height:20px}.inline-composer select{border:0;background:var(--surface-alt);border-radius:7px;padding:7px 9px;font-size:10px;max-width:122px}.inline-composer .composer-tools>button{flex:0 0 auto;background:var(--accent);color:#fff;font-size:12px;padding:8px 19px;border-radius:8px}.feed-tabs{margin:0 0 17px;border-bottom:0}.feed-tabs a{padding:8px 13px;border:0;font-size:12px;border-radius:20px;background:transparent}.feed-tabs a.active{background:var(--accent-soft);color:var(--accent)}.feed-tabs>div{gap:4px}.sort-label{padding:0;font-size:10px}
.post{margin-bottom:20px;border-radius:16px;border-color:var(--line);box-shadow:var(--shadow)}.post-header{padding:19px 20px 13px;gap:11px}.post-author{font-size:13px}.post-meta{font-size:10px;margin-top:4px;color:var(--muted)}.post-body{font-size:14px;line-height:1.8;padding:0 20px 17px}.post-media{max-height:540px}.post-stats{font-size:11px;padding:13px 20px;color:var(--muted)}.mini-heart{background:#e7efff;color:var(--accent);width:20px;height:20px;font-size:11px;margin-right:3px}.post-actions{margin:0 19px;gap:5px}.post-action{font-size:12px;padding:14px 4px;color:var(--muted);gap:7px}.post-action:hover{background:var(--surface-alt)}.post-action.active .icon{fill:var(--accent-soft)}.post-action .icon{width:19px;height:19px}.post-actions .save-form{flex-basis:35px}.post-header .avatar{width:42px;height:42px;min-width:42px}.verified{background:var(--accent)}
.rightbar{gap:22px}.rightbar .daily-card,.rightbar .made-with{display:none}.side-card{border:0;box-shadow:none;background:transparent;padding:0 0 20px;border-bottom:1px solid var(--line);border-radius:0}.side-card .section-heading{margin-bottom:18px}.section-heading h3{font-size:14px;font-weight:650;color:#52627b}.suggestion{gap:11px;margin:16px 0}.suggestion .avatar{width:40px;height:40px;min-width:40px}.suggestion .strong{font-size:12px}.suggestion .muted{font-size:10px;margin-top:3px}.add-friend{width:31px;height:31px;background:#e3ecfc}.side-link{margin-top:13px;padding:9px 0 0;border-top:0;font-size:11px}.community-mini{margin:16px 0;gap:12px}.community-mini b{font-size:12px}.community-mini p{font-size:10px}.community-thumb{width:46px;height:46px;border-radius:11px}.contacts{padding:0}.contacts .section-heading{margin:0 0 19px}.contact{margin:17px 0;gap:11px}.contact b{font-size:12px}.contact .avatar{width:36px;height:36px;min-width:36px}.contact>.muted{font-size:9px}.rightbar .empty-state{padding:15px 5px}.rightbar .empty-state h3{font-size:13px}
.person-card,.community-card,.event-card,.profile-hero,.community-hero{border-color:var(--line);box-shadow:var(--shadow)}.people-grid,.community-grid{gap:20px}.person-card h3{font-size:16px}.person-card>a>p{font-size:11px}.person-bio{font-size:12px}.person-card .btn{font-size:11px;padding:9px 13px}.community-cover{height:170px}.community-card h3{font-size:17px}.community-card-info{padding:20px}.community-card-info>p{font-size:12px;line-height:1.7;height:61px}.community-card-footer>.small{font-size:11px}.community-card-footer .btn{font-size:11px}.profile-cover{height:220px}.profile-info h1{font-size:28px}.profile-bio,.community-description{font-size:14px}.profile-details{font-size:12px}.notifications-list{border-radius:16px}.notification-row p{font-size:13px}.notification-row>.small{font-size:11px}.comments-section h2{font-size:17px}.comment-bubble{font-size:13px}
.settings-section h2{font-size:20px}.settings-section>p{font-size:13px}.settings-section .field{font-size:13px}.settings-nav>a{font-size:12px}.messenger{border-radius:16px;min-height:520px}.conversation-item b{font-size:13px}.conversation-item p{font-size:11px}.message-bubble{font-size:13px}.message-compose>textarea{font-size:13px}.chat-dock{border-radius:15px 15px 0 0;right:26px;bottom:0;height:min(565px,78vh);box-shadow:0 0 0 1px #dfe6f0,0 9px 35px #22335524}.chat-dock header{background:var(--surface);height:55px;color:var(--accent)}.chat-dock iframe{height:calc(100% - 55px)}.chat-launcher{background:var(--surface);color:var(--accent);border:1px solid var(--line);width:50px;height:50px;box-shadow:0 4px 18px #263e6b18}.embedded-chat .messenger{min-height:0}.notification-popover{top:70px;right:71px;border-radius:15px;box-shadow:0 8px 40px #20305024}.modal{border-radius:17px}.modal-header h2{font-size:22px}.field input,.field textarea,.field select{border-color:var(--line)}.btn{border-radius:9px}
.account-menu{position:relative}.account-menu summary{list-style:none}.account-menu summary::-webkit-details-marker{display:none}.account-menu .dropdown-panel{top:48px;min-width:245px;padding:8px}.account-menu .dropdown-panel>a{display:flex;align-items:center;gap:12px;padding:12px;font-size:13px;border-radius:8px}.account-menu .dropdown-panel>a:hover{background:var(--surface-alt)}
#chat-dock:not([hidden])+.chat-launcher{display:none}
@media(prefers-color-scheme:dark){html[data-theme=system]{--bg:#151a23;--surface:#202733;--surface-alt:#293241;--text:#edf3ff;--muted:#b1bed1;--accent:#78acff;--accent-hover:#9cc2ff;--accent-soft:#2a3e60;--line:#354153}}
.inline-comments{border-top:1px solid var(--line);padding:16px 20px}.inline-comments[hidden]{display:none}.inline-comments .comment-form{margin:14px 0 0}.inline-comments .comment-form textarea{font-size:13px}.inline-comments .comment{margin:13px 0}.inline-comments .comments-loading{font-size:12px;color:var(--muted)}.inline-comments .comment-bubble{background:var(--surface-alt)}.inline-comments .all-comments{display:inline-block;margin-top:13px;font-size:12px;color:var(--accent)}.inline-comments .comment-meta{font-size:10px}
/* Authentication shares the same visual system. */
.auth-body{background:var(--bg)}.auth-shell{max-width:1150px;margin:auto;min-height:100dvh;grid-template-columns:1.15fr 1fr;align-items:center;gap:90px;padding:60px 45px}.auth-visual{background:none;padding:0;min-height:0;overflow:visible}.auth-visual .brand{font-size:52px;color:var(--accent);gap:12px}.auth-visual .brand img{width:52px;height:52px}.auth-pitch{padding:28px 0;margin:0}.auth-pill,.auth-art,.auth-visual-footer{display:none}.auth-pitch h1{font-size:42px;line-height:1.16;letter-spacing:-1.8px;color:var(--text)}.auth-pitch h1 em{color:var(--accent)}.auth-pitch>p{font-size:17px;line-height:1.8;color:var(--muted);margin-top:20px}.auth-main{padding:0;min-height:0}.auth-form-wrap{max-width:410px;background:var(--surface);padding:30px;border:1px solid var(--line);border-radius:19px;box-shadow:0 15px 60px #263e6b0b}.auth-form-wrap>.eyebrow{display:none}.auth-form-wrap>h1{font-size:25px;margin:0 0 9px}.auth-description{font-size:12px;margin-bottom:26px}.auth-form .field{font-size:12px}.auth-form input{background:var(--surface);font-size:14px;padding:14px;border-color:var(--line)}.auth-submit{padding:12px 16px;font-size:13px}.auth-footer{padding-top:25px;max-width:410px;color:var(--muted)}.auth-footer>span:last-child{margin-left:0}.demo-hint{background:var(--surface-alt);border-color:var(--line);color:var(--muted)}.auth-divider span{background:var(--surface)}.auth-form-wrap .green-text{color:var(--accent)}.legal-copy{max-height:65vh;overflow:auto}
html[data-theme=dark]{--bg:#151a23;--surface:#202733;--surface-alt:#293241;--text:#edf3ff;--muted:#b1bed1;--accent:#78acff;--accent-hover:#9cc2ff;--accent-soft:#2a3e60;--line:#354153}
html[data-theme=dark] .nav-item.selected{background:var(--accent-soft)}html[data-theme=dark] .side-card{background:none}html[data-theme=dark] .inline-composer .composer-tools>button{color:#14243d}html[data-theme=dark] .story-add .story-art{background:#2b4064}
@media(min-width:761px) and (max-width:1250px){:root{--sidebar:205px;--rightbar:250px;--gap:22px}.app-layout{grid-template-columns:205px minmax(0,1fr) 250px;gap:22px;padding-left:20px;padding-right:20px}.topbar .brand{width:175px}.global-search{max-width:195px}.top-center-nav a{width:66px}.topbar .brand span{display:inline}.topbar-profile{margin-left:3px}.story{flex-basis:82px}.story-art{width:82px;height:124px}.inline-composer .composer-tools>button{padding:8px 12px}}
@media(min-width:761px) and (max-width:1080px){.app-layout{grid-template-columns:200px minmax(0,1fr);max-width:950px}.rightbar{display:none}.topbar .brand{width:auto}.topbar .brand span{display:none}.global-search{max-width:210px}.top-center-nav{position:static;transform:none;flex:1}.top-center-nav a{width:60px}.topbar{gap:12px}.auth-shell{gap:45px;padding:50px 35px}.auth-pitch h1{font-size:36px}.auth-pitch>p{font-size:15px}}
@media(max-width:760px){:root{--header:60px}.topbar{height:60px;padding:0 16px;gap:8px}.topbar .brand{width:auto;font-size:27px;gap:8px}.topbar .brand span{display:inline}.topbar .brand img{width:33px;height:33px}.top-center-nav,.global-search{display:none}.topbar-actions{gap:8px}.topbar-actions .notification-btn{width:35px;height:35px}.topbar-profile{display:none}.account-menu .topbar-profile{display:flex}.account-menu .avatar{width:33px;height:33px;min-width:33px}.app-layout{display:block;max-width:650px;padding:17px 12px 95px}.page-heading{padding:0 5px;margin-bottom:22px}.page-heading h1{font-size:25px}.page-heading>p:last-child{font-size:12px}.stories{padding:12px;margin:0 0 16px;border-radius:13px;gap:8px}.story{flex:0 0 76px}.story-art{width:76px;height:105px}.story>span:last-child{font-size:10px}.story-add i{left:26px;bottom:14px}.stories-empty{padding:5px 10px}.stories-empty b{font-size:14px}.stories-empty span{font-size:11px;min-width:120px}.composer{padding:15px 14px 0;margin-bottom:17px;border-radius:13px}.inline-composer textarea.composer-trigger{font-size:13px;padding:10px 12px;min-height:46px}.composer .avatar{width:35px;height:35px;min-width:35px}.inline-composer .composer-main{gap:10px}.inline-composer .composer-tools{gap:7px;padding:10px 0}.composer-file{font-size:10px;gap:5px}.composer-file .icon{width:17px;height:17px}.inline-composer select{max-width:105px;font-size:9px;padding:6px}.inline-composer .composer-tools>button{font-size:11px;padding:7px 12px}.feed-tabs{margin-bottom:13px}.feed-tabs a{font-size:11px;padding:7px 10px}.sort-label{font-size:9px}.post{border-radius:13px;margin-bottom:16px}.post-header{padding:16px 15px 12px;gap:9px}.post-header .avatar{width:38px;height:38px;min-width:38px}.post-author{font-size:12px}.post-body{font-size:13px;padding:0 15px 15px;line-height:1.85}.post-meta{font-size:9px}.post-stats{padding:12px 15px;font-size:10px}.post-actions{margin:0 12px;gap:2px}.post-action{font-size:10px;padding:13px 3px;gap:6px}.post-action .icon{width:17px;height:17px}.post-actions .save-form{flex-basis:28px}.mini-heart{width:17px;height:17px;font-size:9px}.inline-comments{padding:14px}.inline-comments .comment-bubble{font-size:12px}.inline-comments .comment-form{gap:7px}.inline-comments .comment-form .avatar{width:29px;height:29px;min-width:29px}.inline-comments .comment-form textarea{font-size:12px}.inline-comments .comment-form .icon-btn{width:31px;height:31px}.mobile-nav{border-color:var(--line);padding-top:7px;box-shadow:0 -3px 18px #20305005}.mobile-nav .selected{background:var(--accent-soft)}.notification-popover{top:65px;right:10px}.chat-dock{bottom:66px;right:0;border-radius:14px 14px 0 0;height:72dvh}.chat-launcher{right:14px;bottom:80px;width:44px;height:44px}.people-grid,.community-grid{gap:12px}.person-card h3{font-size:14px}.person-bio{font-size:11px}.person-card .btn{font-size:9px;padding:7px 8px}.community-cover{height:128px}.community-card-info{padding:14px}.community-card h3{font-size:15px}.community-card-info>p{font-size:11px;height:54px}.profile-cover{height:165px}.profile-bio,.community-description{font-size:12px}.profile-details{font-size:10px}.settings-section{padding:22px 17px}.messenger{min-height:0}.embedded-chat .messenger{min-height:0}.auth-shell{display:block;min-height:100dvh;padding:38px 20px 25px}.auth-visual{display:block;text-align:center;margin-bottom:24px}.auth-visual .brand{font-size:33px;gap:8px}.auth-visual .brand img{width:34px;height:34px}.auth-pitch{padding:13px 0 0}.auth-pitch h1{display:none}.auth-pitch>p{font-size:13px;margin:0;line-height:1.7}.auth-main{padding:0;min-height:0}.mobile-auth-brand{display:none}.auth-form-wrap{padding:25px 22px;max-width:420px}.auth-form-wrap>h1{font-size:24px}.auth-form .field{font-size:12px}.auth-form input{font-size:13px}.auth-footer{font-size:10px;padding-top:23px}.auth-description{font-size:12px}.auth-submit{font-size:13px}}