/* Ubuntu Social Premium 1.1 — original design, built for the existing PHP application.
   No external CDN, no WoWonder dependency, no database changes. */
:root {
  --ink:#20243c; --muted:#8892a7; --primary:#6655d7; --primary-dark:#4f3fbe;
  --bg:#f3f5fb; --line:#e9eaf4; --white:#fff; --radius:20px;
  --shadow:0 11px 32px rgba(31,34,82,.048);
  --surface:#fff; --surface-soft:#f7f7fd; --text-secondary:#69748b;
  --hero-1:#201a63; --hero-2:#6b4dd0; --accent:#ffbc8e;
}
html{scroll-padding-top:100px}
body{background:var(--bg);color:var(--ink);font-size:14px}
a,button,input,textarea,select{transition-property:background-color,border-color,color,box-shadow,transform;transition-duration:.17s}
:focus-visible{outline:3px solid #9b8bff;outline-offset:3px}
::selection{background:#cec6ff;color:#22184f}
.card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius)}
.btn-primary{background:linear-gradient(110deg,#7564eb,#5b49d4);box-shadow:0 5px 12px #6251d42a}
.btn-primary:hover{background:linear-gradient(110deg,#6b57dd,#493ab9);box-shadow:0 8px 20px #6251d439}
.btn-outline{background:var(--surface);border-color:var(--line);color:var(--text-secondary)}
.btn-light{background:#efebff}
.topbar{height:78px;background:rgba(255,255,255,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid #e9eaf4;box-shadow:0 1px 16px #201b5c06}
.top-inner{max-width:1450px;padding:0 30px;gap:24px}
.brand{font-size:18px;min-width:228px;letter-spacing:-.8px;font-weight:850}
.brand-mark{border-radius:14px;width:43px;height:43px;background:linear-gradient(145deg,#7762ed,#382997);box-shadow:0 7px 17px #4636a63b;transform:rotate(-5deg);font-size:27px;letter-spacing:-2.5px}
.brand-mark span{color:#ffbb8c}.brand-mark:hover{transform:rotate(0deg)}
.global-search{max-width:410px;border-radius:13px;background:#f6f6fc;border-color:#f1eff8;height:46px;color:#888da2}
.global-search:focus-within{background:white;border-color:#bdb5f2;box-shadow:0 0 0 4px #9f93ff20}
.global-search input{font-size:13px}
.top-actions{gap:8px}
.circle-action{width:42px;height:42px;border:0;border-radius:13px;background:#f5f5fb;display:grid;place-items:center;color:#5d617d}
.circle-action:hover{background:#eeebff;border-radius:13px;color:var(--primary)}
.top-create{padding:13px 17px;border-radius:13px;margin-right:5px;white-space:nowrap}
.top-avatar>.avatar{width:42px;height:42px;border:3px solid white;box-shadow:0 0 0 1px #eae4fb,0 3px 12px #221a5110}
.theme-toggle{display:grid}
.app-layout{max-width:1450px;padding:30px 30px 48px;grid-template-columns:minmax(200px,238px) minmax(0,685px) minmax(250px,298px);gap:28px;justify-content:center}
.app-layout.no-right{grid-template-columns:238px minmax(0,1011px)}
.left-sidebar{top:105px;padding:0 3px 16px 0;max-height:calc(100vh - 119px)}
.sidebar-profile{background:var(--surface);display:flex;align-items:center;gap:11px;padding:13px 11px;border:1px solid var(--line);border-radius:18px;margin:2px 1px 18px 0;box-shadow:var(--shadow)}
.sidebar-profile .avatar{height:42px;width:42px;box-shadow:0 0 0 3px #f2efff}
.side-user-name{min-width:0;display:flex;flex:1;flex-direction:column;gap:3px}
.side-user-name strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--ink)}
.side-user-name small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user-arrow{color:#b3adc8;display:flex;align-items:center}
.side-title{color:#a7acc0;padding:0 17px;margin:16px 0 10px;letter-spacing:1.7px;font-size:10px}
.nav-item{height:47px;font-size:13px;color:#6d7691;gap:14px;margin:3px 0;border-radius:13px;font-weight:675}
.nav-item svg{width:20px;color:#8c95b0}
.nav-item:hover{background:#eeeafa;color:#5c4cbd}
.nav-item.selected{background:#eae6ff;color:#5c4ac8;position:relative}
.nav-item.selected:before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:3px;background:#8066ef;border-radius:0 5px 5px 0}
.nav-item.selected svg{color:#6e56dd}
.side-bottom{margin:26px 1px 10px;padding:21px 17px 19px;border-radius:19px;background:radial-gradient(circle at 100% 0%,#b3a5ff4a 0,transparent 56%),linear-gradient(135deg,#291d74,#6452c7);color:#fff;box-shadow:0 15px 25px #34237b20}
.side-bottom-icon{display:flex;align-items:center;justify-content:center;background:#ffffff29;width:36px;height:36px;border-radius:12px;margin-bottom:12px}
.side-bottom strong{color:#fff;font-size:13px;line-height:1.3}
.side-bottom p{color:#ded8fc;font-size:11px;margin:8px 0 15px}
.side-bottom a{display:flex;align-items:center;gap:2px;color:#fff;font-size:11px;font-weight:780}
.side-bottom a:hover{color:#ffd4b9}
.main-column{min-width:0}
/* Welcome panel: decorative artwork is CSS, not a misleading member illustration. */
.welcome-hero{min-height:236px;position:relative;isolation:isolate;display:flex;overflow:hidden;border-radius:23px;background:radial-gradient(circle at 83% 8%,#a58af083 0,transparent 43%),linear-gradient(112deg,var(--hero-1) 3%,#4131a0 61%,var(--hero-2) 100%);color:#fff;padding:31px 28px;margin:2px 0 27px;box-shadow:0 18px 36px #3a279b21}
.welcome-hero:before{content:'';position:absolute;inset:0;background-image:radial-gradient(#ffffff18 1.3px,transparent 1.3px);background-size:18px 18px;mask-image:linear-gradient(90deg,transparent 12%,#000)}
.welcome-hero-copy{z-index:1;position:relative;width:min(100%,470px)}
.welcome-overline{display:inline-flex;align-items:center;gap:8px;background:#ffffff1f;border:1px solid #ffffff27;color:#f4eaff;padding:7px 10px;border-radius:50px;font-size:9px;letter-spacing:1.5px;font-weight:800;margin-bottom:15px}
.welcome-overline i,.pulse-live i{display:inline-block;width:7px;height:7px;background:#8af3c8;border-radius:50%;box-shadow:0 0 0 3px #8af3c82a}
.welcome-hero h1{font-size:clamp(25px,3vw,34px);font-weight:830;letter-spacing:-1.25px;line-height:1.14;margin:0 0 9px;color:#fff}
.wave-hello{color:#ffc68e;display:inline-block;margin-left:9px;font-size:23px;transform:rotate(18deg)}
.welcome-hero p{color:#ddd8ff;font-size:12px;line-height:1.75;max-width:345px;margin-bottom:17px}
.welcome-actions{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.hero-button{display:inline-flex;align-items:center;gap:7px;background:#fff;color:#3c2b92;border-radius:11px;padding:11px 14px;font-size:11px;font-weight:800;box-shadow:0 8px 14px #130b4e18}
.hero-button:hover{background:#f4edff;color:#4932af;transform:translateY(-2px)}
.hero-secondary{display:inline-flex;align-items:center;gap:6px;font-weight:760;color:#eee9ff;font-size:11px}
.hero-secondary:hover{color:#fff}
.welcome-art{position:absolute;right:11px;top:-17px;width:235px;height:280px;opacity:.96;pointer-events:none}
.welcome-orbit{position:absolute;width:250px;height:250px;border:1px solid #ffffff45;border-radius:50%;top:18px;right:-24px;transform:rotate(-17deg)}
.welcome-orbit:before,.welcome-orbit:after{content:'';position:absolute;border-radius:50%;background:#fff;width:10px;height:10px;top:28px;left:27px}
.orbit-two{transform:scale(.68);border-style:dashed;opacity:.74}
.orbit-two:before{background:#ffcc97;width:13px;height:13px}
.welcome-art-star{position:absolute;top:35px;right:76px;font-size:98px;color:#ffe1a9;opacity:.95;filter:drop-shadow(0 7px 10px #382e8980);animation:starfloat 5s ease-in-out infinite}
.art-card{position:absolute;display:flex;align-items:center;gap:8px;border:1px solid #fff9;background:#ffffffee;backdrop-filter:blur(5px);color:#342b73;font-size:10px;font-weight:850;padding:10px 13px;border-radius:13px;box-shadow:0 15px 32px #16114f38}
.art-card svg{color:#7457d4}
.art-card-one{right:94px;top:54px;transform:rotate(-13deg)}
.art-card-two{right:2px;top:135px;transform:rotate(9deg)}
.art-card-three{right:111px;top:184px;transform:rotate(8deg)}
@keyframes starfloat{50%{transform:translateY(-9px) rotate(12deg)}}
.section-row,.feed-toolbar{display:flex;align-items:end;justify-content:space-between;gap:15px;margin:6px 3px 14px}
.section-row h2,.feed-toolbar h2{margin:4px 0 0;font-size:19px;font-weight:830;letter-spacing:-.7px}
.section-row>a{display:inline-flex;align-items:center;gap:3px;color:var(--primary);font-size:11px;font-weight:800;padding-bottom:2px}
.content-kicker{color:#998fae;font-weight:870;letter-spacing:1.7px;font-size:9px}
.row-spark{color:#f8a375;font-size:13px}
.stories-strip{margin:0 0 22px;padding:3px 3px 13px;gap:11px;scroll-snap-type:x proximity}
.story-add,.story-tile,.story-explore{width:119px;min-width:119px;height:167px;border-radius:18px;scroll-snap-align:start;box-shadow:0 5px 13px #36317b0e}
.story-add{border:1.5px dashed #c2b7e9;background:var(--surface);gap:8px}
.story-add span{background:linear-gradient(140deg,#8c6ef7,#5d4ac9);width:42px;height:42px;box-shadow:0 7px 14px #6a54d12f}
.story-add strong{font-weight:800}
.story-tile{display:block;position:relative;overflow:hidden;background:#ebe4ff}
.story-tile img{transition:transform .4s}
.story-tile:hover img{transform:scale(1.09)}
.story-ring{position:absolute;top:10px;left:9px;width:36px;height:36px;border-radius:50%;padding:3px;background:linear-gradient(135deg,#edaa77,#9471ee)}
.story-ring>.avatar{height:30px;width:30px;border:2px solid #fff;font-size:12px}
.story-tile .story-name{font-size:11px;left:12px;bottom:13px}
.story-explore{flex-shrink:0;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:end;padding:14px;color:#fff;overflow:hidden}
.story-explore:before{content:'';width:130px;height:130px;border:1px solid #ffffff4b;border-radius:50%;position:absolute;right:-50px;top:-39px}
.story-explore:after{content:'✳';font-size:65px;position:absolute;right:-8px;top:3px;opacity:.2;z-index:-1}
.story-explore strong{font-size:11px;line-height:1.4;color:#fff;margin-bottom:4px}
.story-explore small{font-size:10px;color:#f2eaff}
.story-action-people{background:linear-gradient(150deg,#ef9575,#b54c98)}
.story-action-groups{background:linear-gradient(150deg,#56b6b5,#3962b5)}
.story-action-icon{display:grid;place-items:center;width:40px;height:40px;margin-bottom:auto;background:#ffffff32;border:1px solid #ffffff3c;border-radius:13px}
.story-explore:hover{color:#fff;transform:translateY(-2px)}
.composer{padding:19px 20px 0;margin-bottom:27px;scroll-margin-top:99px;position:relative;overflow:hidden}
.composer:before{position:absolute;content:'';top:0;left:24px;right:24px;height:3px;background:linear-gradient(90deg,#8b71fb,#fac0a0,#65babf);border-radius:0 0 6px 6px}
.composer-head{margin:4px 0 12px}
.composer-head>.avatar{width:45px;height:45px;border:3px solid #f5f2ff}
.composer-identity strong{font-size:13px;color:var(--ink)}
.composer-identity span{font-size:11px}
.composer-badge{margin-left:auto;color:#9c90d4;background:#f3f0ff;font-size:9px;font-weight:900;letter-spacing:1px;padding:6px 8px;border-radius:7px}
.compose-form textarea{background:var(--surface-soft);color:var(--ink);border:1px solid transparent;border-radius:13px;font-size:13px;min-height:84px;padding:16px;line-height:1.6}
.compose-form textarea:focus{background:var(--surface);border-color:#aa9deb;box-shadow:0 0 0 4px #aea1ff1a;outline:0}
.composer-bottom{margin:13px 1px 14px}
.upload-label{background:#f1edff;color:#6851cf;padding:10px 12px;border-radius:10px;font-weight:780}
.upload-label:hover{background:#eae3ff}
.privacy-select{margin-left:4px}
.composer-bottom>.btn{padding:10px 15px}
.composer-extras{margin:0 -20px;border-top:1px solid var(--line);padding:10px 20px;display:flex;gap:13px;align-items:center;background:linear-gradient(180deg,var(--surface),var(--surface-soft))}
.composer-extras>a{display:inline-flex;align-items:center;gap:7px;color:#828aa5;font-size:10px;font-weight:740}
.composer-extras>a:hover{color:var(--primary)}
.composer-extras>span{width:1px;height:14px;background:#e6e3f3}
.feed-toolbar{margin:5px 2px 14px;align-items:center}
.feed-tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);padding:4px;border-radius:12px}
.feed-tabs a{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:750;padding:9px 11px;border-radius:9px;color:var(--muted)}
.feed-tabs a.active{color:#6148cf;background:#eeeaff;box-shadow:0 2px 5px #33258b0c}
.feed-tabs a:not(.active):hover{background:var(--surface-soft)}
.post-card{padding:20px 22px 0;overflow:visible;border-radius:20px;margin-bottom:18px}
.post-header>.avatar,.post-header>a>.avatar{height:45px;width:45px;border:3px solid #f1eeff}
.post-by strong{font-size:13px;font-weight:840}
.post-by span{font-size:11px;color:#949bb0}
.post-body{font-size:13px;line-height:1.85;color:var(--ink);letter-spacing:.01px}
.post-media{background:var(--surface-soft);margin-left:-22px;margin-right:-22px}
.post-media img{object-fit:contain}
.post-stats{font-size:11px;color:#8790a8}
.post-actions{padding:2px 0}
.action-btn{font-weight:720;color:#7a829d;border-radius:8px}
.action-btn:hover{background:var(--surface-soft)}
.action-btn.is-liked{color:#e45281}.action-btn.is-saved{color:#7560da}
.comment-section{background:linear-gradient(180deg,var(--surface),var(--surface-soft));border-radius:0 0 20px 20px;margin:0 -22px;padding:5px 22px 18px}
.comment-form input{background:var(--surface);border-color:var(--line)}
.comment-form input:focus{border-color:#b7acec;outline:0}
.more-menu .menu-dropdown{background:var(--surface);border:1px solid var(--line);box-shadow:0 12px 35px #20185420}
.more-menu .menu-dropdown a,.more-menu .menu-dropdown button{color:var(--ink)}
.follow-discovery{padding:27px;text-align:center}.follow-discovery .empty-icon{margin:0 auto 13px}.follow-discovery h3{margin:0 0 8px}.follow-discovery p{color:var(--muted);line-height:1.7}
/* Richer discovery, profile, marketplace, chat and control pages through existing markup. */
.section-heading h1{font-size:30px;font-weight:860;letter-spacing:-1.25px}
.section-heading .eyebrow{color:#8a73e2}
.padded{padding:24px}
.user-card{border-bottom-color:var(--line)}
.user-card .avatar{box-shadow:0 0 0 2px #f0edff}
.profile-card{overflow:hidden}
.profile-cover:not([style]){background:radial-gradient(circle at 80% 20%,#fcb18b 0%,transparent 30%),radial-gradient(circle at 30% 90%,#95a4ff 0%,transparent 32%),linear-gradient(115deg,#372877,#6b5ccf);background-size:cover!important}
.profile-cover[style]{background-size:cover!important;background-position:center!important}
.profile-main{background:var(--surface)}
.community-card{background:var(--surface);transition:transform .2s,box-shadow .2s,border-color .2s}
.community-card:hover{transform:translateY(-4px);box-shadow:0 15px 28px #2b247916;border-color:#dcd3fe}
.community-symbol{background:#ede9ff;color:#6656d9;border-radius:18px}
.community-symbol.alt{background:#e6f7f6;color:#39a5ae}
.feature-hero{background:radial-gradient(circle at 90% 10%,#b09cea7a 0,transparent 50%),linear-gradient(120deg,#2c246e,#6a52be)}
.page-hero{background:radial-gradient(circle at 90% 10%,#f9d19e4d 0,transparent 47%),linear-gradient(120deg,#273078,#9463b3)}
.listing-card{transition:transform .2s,box-shadow .2s}
.listing-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px #18144814}
.listing-img{background:linear-gradient(145deg,#f4efff,#e3edf9)}
.listing-price{color:#5e4bc1}
.inbox-person.active{background:#efebff}
.conversation-header{background:var(--surface)}
.message-bubbles{background:linear-gradient(160deg,var(--surface-soft),var(--surface))}
.bubble.mine{background:#6d5cdb}
.bubble.theirs{background:#ebeaf4;color:#333650}
.stat-card{position:relative;overflow:hidden;border-top:3px solid #917ff0}
.stat-card:nth-child(2){border-top-color:#f3b287}.stat-card:nth-child(3){border-top-color:#76c9c0}.stat-card:nth-child(4){border-top-color:#e787a9}
.stat-card strong{color:var(--ink);font-size:28px}
/* Right rail */
.right-sidebar{top:105px;max-height:calc(100vh - 116px);overflow-y:auto;scrollbar-width:none}
.right-sidebar::-webkit-scrollbar{display:none}
.community-pulse{position:relative;overflow:hidden;padding:22px 21px 19px;background:linear-gradient(140deg,#2b2664,#6051c2);color:#fff;border-radius:20px;margin-bottom:17px;box-shadow:0 13px 30px #4734b021}
.community-pulse:before{position:absolute;content:'✳';right:-18px;top:13px;font-size:117px;line-height:1;color:#ffffff0d;transform:rotate(-20deg)}
.pulse-top{display:flex;align-items:center;justify-content:space-between;position:relative}
.pulse-top>svg{color:#ffca9a}
.pulse-live{font-size:9px;letter-spacing:1.4px;color:#d1ccf8;font-weight:880;display:flex;gap:8px;align-items:center}
.community-pulse h3{font-size:18px;line-height:1.3;color:#fff;letter-spacing:-.55px;margin:14px 0 20px;position:relative}
.pulse-stats{display:flex;gap:0;border-block:1px solid #ffffff29;padding:14px 0}
.pulse-stats>div{display:flex;flex-direction:column;gap:4px;flex:1}
.pulse-stats>div+div{padding-left:18px;border-left:1px solid #ffffff26}
.pulse-stats strong{font-size:20px;font-weight:850;color:#fff}
.pulse-stats span{font-size:10px;color:#ccc7f6}
.community-pulse>a{position:relative;display:flex;align-items:center;gap:3px;margin-top:15px;color:#fff;font-size:11px;font-weight:800}
.aside-panel{border-radius:18px;background:var(--surface);padding:20px;border-color:var(--line);box-shadow:var(--shadow)}
.aside-heading strong{font-size:13px}
.aside-heading a{font-size:11px}
.person-mini{border-radius:10px;transition:background .2s;padding:10px 3px}
.person-mini:hover{background:var(--surface-soft)}
.person-mini .avatar{box-shadow:0 0 0 2px #f0ecff}
.mini-name strong{color:var(--ink)}
.community-mini{border-top:1px solid var(--line)}
.community-mini:first-of-type{border-top:0}
.mini-group-icon{background:linear-gradient(130deg,#e8e4ff,#f7e7fa);border-radius:13px}
.sidebar-shortcuts{padding-bottom:12px}
.sidebar-shortcuts>a{border-top:1px solid var(--line);padding:12px 0;display:flex;align-items:center;gap:10px;font-size:11px;font-weight:690;color:var(--text-secondary)}
.sidebar-shortcuts>a>svg:first-child{color:#7963dd}
.sidebar-shortcuts>a>svg:last-child{margin-left:auto;color:#a4a4b8}
.sidebar-shortcuts>a:hover{color:var(--primary)}
.shortcut-spark{color:#c39be8}
/* Authentication */
.auth-showcase{background:radial-gradient(circle at 70% 45%,#6151c8 0,transparent 38%),linear-gradient(150deg,#1b164c,#3e2c9a 64%,#7952b4);padding-left:9%;padding-right:9%}
.auth-showcase:before{content:'';inset:0;position:absolute;background-image:radial-gradient(#ffffff14 1px,transparent 1px);background-size:19px 19px;pointer-events:none}
.auth-hero-content h1{letter-spacing:-.065em;max-width:540px}
.auth-hero-content h1 em{color:#ffceb3}
.auth-floating{position:absolute;display:flex;align-items:center;gap:10px;padding:13px 18px;background:#ffffffeb;color:#47377e;border-radius:14px;box-shadow:0 14px 38px #0b084738;transform:rotate(5deg);font-size:12px}
.auth-floating-one{right:8%;top:28%;transform:rotate(9deg)}
.auth-floating-two{right:4%;bottom:21%;transform:rotate(-8deg)}
.auth-floating-two svg{color:#e7728a}
.auth-form-side{background:var(--surface)}
.auth-form input{background:var(--surface-soft);color:var(--ink);border-color:var(--line)}
.auth-form input:focus{border-color:#aa9be7;box-shadow:0 0 0 4px #9f91ee1a}
/* Dark mode: preserve contrast on every primary workflow. */
body[data-theme="dark"]{
 --ink:#e9eaf8; --muted:#9da5be; --primary:#a899ff;--primary-dark:#8973e9;
 --bg:#121426;--line:#30314c;--white:#1e2036;--surface:#1e2035;--surface-soft:#24263d;
 --shadow:0 12px 30px #00000016;--text-secondary:#b2b8cc;
 background:var(--bg);color:var(--ink);
}
body[data-theme="dark"] .topbar{background:#191b30ed;border-color:#2b2c47}
body[data-theme="dark"] .global-search,body[data-theme="dark"] .circle-action{background:#25273f;border-color:#30324f;color:#c0bfd7}
body[data-theme="dark"] .global-search:focus-within{background:#2c2e49}
body[data-theme="dark"] input,body[data-theme="dark"] textarea,body[data-theme="dark"] select{color:var(--ink)}
body[data-theme="dark"] .top-avatar>.avatar{border-color:#31324a}
body[data-theme="dark"] .sidebar-profile,body[data-theme="dark"] .aside-panel{background:var(--surface);border-color:var(--line)}
body[data-theme="dark"] .nav-item{color:#aeb5cc}
body[data-theme="dark"] .nav-item.selected{color:#c0aeff;background:#37305d}
body[data-theme="dark"] .nav-item.selected svg{color:#c0aeff}
body[data-theme="dark"] .nav-item:hover{background:#2b2a4b;color:#ccbfff}
body[data-theme="dark"] .feed-tabs a.active,body[data-theme="dark"] .composer-badge{background:#382e62;color:#d1bdff}
body[data-theme="dark"] .upload-label{background:#39305c;color:#d4c3ff}
body[data-theme="dark"] .side-title{color:#919ab4}
body[data-theme="dark"] .composer-extras,body[data-theme="dark"] .comment-section{background:var(--surface)}
body[data-theme="dark"] .post-body{color:#dee2f1}
body[data-theme="dark"] .post-by span,body[data-theme="dark"] .post-stats{color:#9aa2ba}
body[data-theme="dark"] .post-media{background:#16172a}
body[data-theme="dark"] .feature-hero h1{color:#fff}
body[data-theme="dark"] .btn-outline{background:#26283f;color:#e0def1;border-color:#414161}
body[data-theme="dark"] .btn-light{background:#362b63;color:#e1d9ff}
body[data-theme="dark"] .bubble.theirs{background:#32334d;color:#f2efff}
body[data-theme="dark"] .inbox-person.active{background:#343052}
body[data-theme="dark"] .mini-name strong,body[data-theme="dark"] .community-mini strong{color:var(--ink)}
body[data-theme="dark"] .menu-dropdown{background:#24263a}
body[data-theme="dark"] .menu-dropdown a:hover,body[data-theme="dark"] .menu-dropdown button:hover{background:#33344a}
body[data-theme="dark"] .flash{background:#203b37;border-color:#345951;color:#b1f1d6}
body[data-theme="dark"] .flash.warn{background:#4a372c;color:#ffddb7;border-color:#77523b}
body[data-theme="dark"] .flash.error{background:#4a2b36;color:#ffc4da;border-color:#774056}
body[data-theme="dark"] .auth-form label{color:#d6d4e9}
body[data-theme="dark"] .auth-form input{background:#292a44}
body[data-theme="dark"] .message-form input{background:#2c2c45}
body[data-theme="dark"] .mobile-dock{background:#1f2135;border-color:#333550}
.mobile-dock,.sidebar-scrim{display:none}
/* Responsive layouts */
@media(max-width:1340px){.app-layout{grid-template-columns:218px minmax(0,680px) 275px;gap:23px}.brand{min-width:210px}.top-inner{gap:18px}}
@media(max-width:1160px){.app-layout{grid-template-columns:220px minmax(0,690px);max-width:1010px}.app-layout.no-right{grid-template-columns:220px minmax(0,690px)}.right-sidebar{display:none}.top-inner{max-width:1010px}}
@media(max-width:850px){
 .topbar{height:66px}.top-inner{padding:0 16px;gap:12px}
 .top-create{display:none}.brand{min-width:unset;font-size:16px}.brand-mark{width:36px;height:36px;font-size:23px}
 .app-layout,.app-layout.no-right{grid-template-columns:minmax(0,1fr);padding:24px 17px;max-width:765px}
 .left-sidebar{display:block;position:fixed;left:0;top:66px;bottom:0;max-height:calc(100vh - 66px);width:min(310px,86vw);overflow-y:auto;background:var(--surface);z-index:24;padding:19px 15px;box-shadow:12px 10px 45px #1713333b;transform:translateX(-110%);transition:transform .25s ease}
 .left-sidebar.open{transform:translateX(0)}.sidebar-scrim.open{display:block;position:fixed;inset:66px 0 0;background:#12102d80;z-index:23}
 body[data-theme="dark"] .left-sidebar{background:var(--surface)}
 .mobile-menu{display:grid;place-items:center}
}
@media(max-width:620px){
 .global-search{display:none}.top-inner{justify-content:space-between}.top-actions{margin-left:auto;gap:5px}
 .circle-action{height:38px;width:38px;border-radius:11px}
 .app-layout,.app-layout.no-right{padding:14px 12px 100px}
 .welcome-hero{padding:24px 19px;min-height:253px;margin-top:0;margin-bottom:24px;border-radius:18px}
 .welcome-hero-copy{width:100%}.welcome-hero h1{font-size:27px;max-width:100%;position:relative;z-index:2}
 .welcome-hero p{max-width:270px;font-size:11px;line-height:1.7}
 .welcome-art{right:-74px;opacity:.38;transform:scale(.9);top:4px}
 .welcome-actions{gap:12px}.hero-button{padding:10px;font-size:10px}.hero-secondary{font-size:10px}
 .section-row h2,.feed-toolbar h2{font-size:18px}
 .stories-strip{margin-bottom:17px;gap:9px}.story-add,.story-tile,.story-explore{min-width:102px;width:102px;height:146px;border-radius:15px}
 .story-explore{padding:11px}.story-explore strong{font-size:10px}
 .composer{padding:16px 14px 0;border-radius:16px;margin-bottom:23px}
 .composer:before{left:17px;right:17px}
 .composer-badge{display:none}.composer-extras{margin:0 -14px;padding:12px 14px;gap:8px;justify-content:space-between}
 .composer-extras>a{gap:4px;font-size:9px}.composer-extras>a svg{width:13px;height:13px}
 .composer-bottom{gap:7px}.composer-bottom .btn{font-size:11px;padding:10px 11px}
 .upload-label{font-size:11px;padding:10px}.privacy-select{margin-left:0}
 .feed-toolbar{align-items:flex-start;gap:6px;margin-bottom:13px}
 .feed-tabs{padding:3px}.feed-tabs a{padding:8px 7px;font-size:10px;gap:4px}
 .post-card{padding:15px 14px 0;border-radius:16px}
 .post-media{margin-left:-14px;margin-right:-14px}
 .comment-section{margin:0 -14px;padding:5px 14px 13px;border-radius:0 0 16px 16px}
 .section-heading h1{font-size:26px}.padded{padding:17px}
 .mobile-dock{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-around;z-index:22;background:#fff;border-top:1px solid #e8e5f1;box-shadow:0 -8px 28px #28204b10;padding:9px 7px max(9px,env(safe-area-inset-bottom))}
 .mobile-dock>a{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;color:#8891a6;font-size:9px;font-weight:750;min-width:51px}
 .mobile-dock>a:hover{color:#715bd4}
 .mobile-dock>.mobile-dock-create{width:49px;min-width:49px;height:49px;border-radius:16px;margin-top:-24px;background:linear-gradient(150deg,#8a69eb,#5641c7);color:#fff;border:4px solid var(--bg);box-shadow:0 8px 20px #30249e39}
 .auth-layout{grid-template-columns:1fr}
 .auth-showcase{min-height:260px}.auth-floating{display:none}.auth-hero-content h1{font-size:35px}
}
@media(max-width:380px){.privacy-select{font-size:10px}.privacy-select select{max-width:75px}.composer-extras>a{font-size:8px}.feed-tabs a svg{display:none}.top-actions{gap:2px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
/* Story-ring avatars must not inherit generic story caption positioning. */
.story-tile .story-ring{bottom:auto;color:inherit}
.story-tile .story-ring>.avatar{position:static;bottom:auto;left:auto;color:#5b49cf;font-weight:850}
.story-tile .story-ring>.avatar img{position:static}