*{box-sizing:border-box}
:root{--bg:#080611;--panel:#100d1d;--panel2:#151027;--line:#29213c;--text:#f3f0fb;--muted:#9b93ad;--accent:#9b6cff;--accent2:#d26cff;--danger:#ff5f77;--shadow:0 24px 80px rgba(0,0,0,.45)}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.glass{background:rgba(13,10,25,.76);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow)}
/* Landing / animated city */
.landing{overflow:hidden;min-height:100vh;background:linear-gradient(180deg,#080611 0%,#0c0920 60%,#120a20 100%)}
.city-bg{position:fixed;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 15%,rgba(122,76,255,.2),transparent 32%)}
.stars{position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:83px 83px;opacity:.18;animation:stars 18s linear infinite}
.moon{position:absolute;right:13%;top:10%;width:100px;height:100px;border-radius:50%;background:#ddd4ff;box-shadow:0 0 70px rgba(190,170,255,.32);opacity:.72}
.skyline{position:absolute;bottom:0;left:-5%;width:110%;height:38%;background:repeating-linear-gradient(90deg,#090712 0 50px,#0f0b19 50px 95px,#080611 95px 125px);clip-path:polygon(0 20%,5% 20%,5% 42%,9% 42%,9% 12%,14% 12%,14% 34%,19% 34%,19% 5%,25% 5%,25% 27%,30% 27%,30% 15%,35% 15%,35% 38%,41% 38%,41% 9%,46% 9%,46% 30%,52% 30%,52% 0,57% 0,57% 33%,64% 33%,64% 12%,70% 12%,70% 40%,76% 40%,76% 18%,82% 18%,82% 7%,87% 7%,87% 33%,93% 33%,93% 0,97% 0,97% 25%,100% 25%,100% 100%,0 100%)}
.skyline-front{height:28%;opacity:.8;transform:translateY(1px);filter:drop-shadow(0 -4px 12px rgba(155,108,255,.14))}
.rain{position:absolute;inset:-20%;opacity:.1;background-image:linear-gradient(110deg,transparent 45%,#b8a7ff 46%,transparent 47%);background-size:24px 90px;transform:rotate(3deg);animation:rain 1.2s linear infinite}
@keyframes stars{to{transform:translateY(83px)}}
@keyframes rain{to{background-position:0 90px}}
.auth-wrap{position:relative;z-index:2;min-height:100vh;display:grid;place-items:center;padding:30px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:20px;letter-spacing:-.03em}
.brand-center{position:absolute;top:28px;left:50%;transform:translateX(-50%);font-size:28px}
.brand-mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 10px 30px rgba(155,108,255,.3)}
.brand-center .brand-mark{width:42px;height:42px}
.auth-card{width:min(470px,100%);border-radius:26px;padding:30px}
.lang-switch{display:flex;gap:4px;background:rgba(255,255,255,.05);padding:4px;border-radius:12px;width:max-content;margin-left:auto}
.lang-switch.dark{background:#0c0915}
.lang-btn{border:0;background:transparent;color:var(--muted);padding:6px 9px;border-radius:8px;font-weight:800;font-size:11px}
.lang-btn.active{background:rgba(155,108,255,.18);color:#fff}
.auth-copy{padding:25px 0 12px}
.eyebrow{font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--accent);text-transform:uppercase}
.auth-copy h1{font-size:34px;line-height:1.05;letter-spacing:-.04em;margin:10px 0}
.auth-copy p{color:var(--muted);line-height:1.6;margin:0}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:#0b0813;padding:4px;border-radius:12px;margin:18px 0}
.auth-tab{border:0;background:transparent;color:var(--muted);padding:11px;border-radius:9px;font-weight:800}
.auth-tab.active{background:#211735;color:#fff}
.form-grid{display:grid;gap:14px}
label{display:grid;gap:7px;color:#cfc7dc;font-size:13px;font-weight:700}
input,textarea,select{width:100%;border:1px solid var(--line);background:#0b0813;color:#fff;border-radius:12px;padding:12px 13px;outline:none;transition:.2s}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(155,108,255,.1)}
textarea{min-height:120px;resize:vertical}
.primary-btn,.secondary-btn,.danger-btn{border:0;border-radius:12px;padding:12px 16px;font-weight:900}
.primary-btn{background:linear-gradient(135deg,var(--accent),#7e51dd);color:white;box-shadow:0 10px 30px rgba(155,108,255,.2)}
.secondary-btn{background:#211a31;color:#eee;border:1px solid var(--line)}
.danger-btn{background:rgba(255,95,119,.12);color:#ff93a5;border:1px solid rgba(255,95,119,.25)}
.form-message{min-height:20px;font-size:13px;color:#ff9bad}
.auth-note{font-size:11px;color:#777084;margin-top:15px;text-align:center}
/* App */
.app-body{background:var(--bg)}
.app-shell{min-height:100vh;display:grid;grid-template-columns:250px 1fr}
.sidebar{position:sticky;top:0;height:100vh;padding:24px 16px;border-right:1px solid var(--line);background:rgba(10,7,18,.88);display:flex;flex-direction:column}
.mini-profile{margin:25px 8px 20px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#0f0b18}
.mini-profile,.mini-profile>div{display:flex;align-items:center;gap:10px}
.avatar{width:40px;height:40px;border-radius:12px;object-fit:cover;background:linear-gradient(135deg,#342253,#171125);display:grid;place-items:center;font-weight:900}
.avatar.large{width:84px;height:84px;border-radius:24px;font-size:28px}
.main-nav{display:grid;gap:5px}
.nav-item{position:relative;width:100%;display:flex;align-items:center;gap:12px;border:0;background:transparent;color:var(--muted);padding:12px;border-radius:11px;text-align:left}
.nav-item:hover,.nav-item.active{background:#171126;color:#fff}
.nav-item.active{box-shadow:inset 2px 0 var(--accent)}
.nav-item.danger{margin-top:8px}
.sidebar-bottom{margin-top:auto;display:grid;gap:10px}
.main-content{min-width:0;padding:0 42px 50px}
.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:30px}
.topbar h2{margin:3px 0 0;font-size:27px;letter-spacing:-.04em}
.top-actions{display:flex;align-items:center;gap:10px}
.icon-btn,.avatar-btn{position:relative;border:1px solid var(--line);background:#100c1b;color:#fff;border-radius:12px;width:42px;height:42px;display:grid;place-items:center}
.avatar-btn{padding:0;overflow:hidden}
.avatar-btn .avatar{width:100%;height:100%;border-radius:0}
.badge{position:absolute;top:-5px;right:-5px;background:var(--danger);color:#fff;font-size:10px;min-width:17px;height:17px;border-radius:99px;display:grid;place-items:center;border:2px solid var(--bg)}
.view{display:none;max-width:1100px;margin:0 auto}
.view.active{display:block}
.grid-2{display:grid;grid-template-columns:1.4fr .8fr;gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px}
.card h3{margin:0 0 6px;font-size:18px}
.muted{color:var(--muted)}
.feed-composer{display:grid;gap:12px;margin-bottom:18px}
.post{display:grid;gap:15px;margin-bottom:16px}
.post-head{display:flex;align-items:center;gap:10px}
.post-head .spacer{margin-left:auto}
.post-body{white-space:pre-wrap;line-height:1.65;color:#e9e3f0}
.post-media{max-width:100%;max-height:520px;border-radius:14px;display:block;margin:auto}
.post-actions{display:flex;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:12px}
.action-btn{border:0;background:transparent;color:var(--muted);padding:8px 10px;border-radius:10px}
.action-btn:hover,.action-btn.liked{background:#1b1430;color:#d8c8ff}
.comment-box{display:flex;gap:8px}
.comment-box input{padding:9px 11px}
.comment-list{display:grid;gap:8px}
.comment{font-size:13px;color:#d7d0df;background:#0d0a16;padding:9px 11px;border-radius:10px}
.forum-list{display:grid;gap:10px}
.topic-row{display:grid;grid-template-columns:1fr auto;gap:15px;padding:17px;border:1px solid var(--line);background:var(--panel);border-radius:15px}
.topic-row:hover{border-color:#44345f}
.topic-title{font-weight:900}
.topic-meta{font-size:12px;color:var(--muted);margin-top:6px}
.topic-stats{text-align:right;color:var(--muted);font-size:12px}
.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:15px}
.profile-head{display:flex;gap:18px;align-items:center}
.profile-actions{margin-left:auto;display:flex;gap:8px}
.friend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:14px}
.user-card{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#0d0a16}
.user-card .spacer{margin-left:auto}
.chat-layout{display:grid;grid-template-columns:280px 1fr;min-height:650px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel)}
.chat-list{border-right:1px solid var(--line);padding:10px;overflow:auto}
.chat-item{display:flex;gap:10px;align-items:center;padding:12px;border-radius:12px;border:0;background:transparent;color:#fff;width:100%;text-align:left}
.chat-item:hover,.chat-item.active{background:#1a1330}
.chat-window{display:grid;grid-template-rows:auto 1fr auto;min-width:0}
.chat-header{padding:16px;border-bottom:1px solid var(--line);font-weight:900}
.messages{padding:18px;overflow:auto;display:grid;align-content:start;gap:10px}
.message{max-width:72%;padding:10px 12px;border-radius:14px;background:#181126;color:#eae3f1}
.message.mine{margin-left:auto;background:#6f49b8}
.message-time{font-size:10px;opacity:.55;margin-top:4px}
.chat-send{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.notification{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);background:var(--panel);border-radius:15px;margin-bottom:10px}
.notification.unread{border-color:#4a3670;background:#151024}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{text-align:left;padding:10px;border-bottom:1px solid var(--line);font-size:13px}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:18px}
.stat{padding:15px;border:1px solid var(--line);background:var(--panel);border-radius:15px}
.stat b{font-size:25px;display:block;margin-top:6px}
.toast{position:fixed;right:20px;bottom:20px;background:#171126;border:1px solid #493567;color:#fff;padding:12px 15px;border-radius:12px;box-shadow:var(--shadow);transform:translateY(20px);opacity:0;pointer-events:none;transition:.25s;z-index:50}
.toast.show{transform:none;opacity:1}
.empty{text-align:center;padding:45px;color:var(--muted);border:1px dashed var(--line);border-radius:16px}
@media(max-width:900px){.app-shell{grid-template-columns:76px 1fr}.sidebar{padding:18px 10px}.sidebar .brand span:last-child,.mini-profile div:not(.avatar),.nav-item span:last-of-type,.sidebar .lang-switch{display:none}.nav-item{justify-content:center}.main-content{padding:0 20px 40px}.grid-2{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.app-shell{display:block}.sidebar{position:fixed;z-index:20;bottom:0;top:auto;width:100%;height:68px;flex-direction:row;border-right:0;border-top:1px solid var(--line);padding:8px}.sidebar .brand,.mini-profile,.sidebar-bottom{display:none}.main-nav{width:100%;display:flex;justify-content:space-around}.nav-item{width:auto;flex:1;justify-content:center}.main-content{padding:0 12px 90px}.topbar{height:80px}.topbar h2{font-size:23px}.chat-layout{grid-template-columns:1fr}.chat-list{display:none}.profile-head{align-items:flex-start}.profile-actions{margin-left:0;flex-wrap:wrap}.stats{grid-template-columns:1fr 1fr}}
/* 2026 UX improvements: light/dark theme, presence, mobile clarity */
:root[data-theme="light"]{
  --bg:#f4f1fa;--panel:#ffffff;--panel2:#f8f5ff;--line:#ddd6e8;--text:#211a2d;--muted:#746b80;
  --shadow:0 18px 50px rgba(45,32,70,.12);
}
:root[data-theme="light"], :root[data-theme="light"] body{background:var(--bg);color:var(--text)}
:root[data-theme="light"] .sidebar{background:rgba(255,255,255,.94)}
:root[data-theme="light"] input,:root[data-theme="light"] textarea,:root[data-theme="light"] select{background:#fff;color:#211a2d}
:root[data-theme="light"] .mini-profile,:root[data-theme="light"] .user-card,:root[data-theme="light"] .chat-item:hover,:root[data-theme="light"] .chat-item.active,:root[data-theme="light"] .message,:root[data-theme="light"] .comment{background:#f3effa;color:#211a2d}
:root[data-theme="light"] .nav-item,:root[data-theme="light"] .action-btn{color:#5f566c}
.theme-btn{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;width:38px;height:34px;font-weight:900}
.sidebar-controls{display:flex;gap:7px;align-items:center;justify-content:center;margin-bottom:8px}
.avatar-wrap{position:relative;display:inline-flex;flex:none}
.presence-dot{position:absolute;right:-1px;bottom:0;width:11px;height:11px;border-radius:50%;border:2px solid var(--panel)}
.presence-dot.online{background:#36d27a}.presence-dot.offline{background:#7c7586}
.message-author{display:flex;align-items:center;justify-content:space-between;gap:8px}
.message-more,.chat-more{border:0;background:transparent;color:var(--muted);font-size:18px;padding:2px 5px;border-radius:7px}
.message-more:hover,.chat-more:hover{background:rgba(155,108,255,.14);color:var(--text)}
.chat-item{position:relative}.chat-item-main{min-width:0;flex:1}.chat-item-main .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){.sidebar .sidebar-controls{display:flex;flex-direction:column}.sidebar .theme-btn{display:grid;place-items:center}.sidebar .lang-switch{display:none}}
@media(max-width:640px){
  .sidebar .sidebar-controls{display:none}
  .main-nav .nav-item{flex-direction:column;gap:3px;font-size:10px;font-weight:800}
  .main-nav .nav-item span:last-of-type{display:block!important}
  .main-nav .nav-icon{font-size:19px;line-height:20px}
  .chat-layout{grid-template-columns:1fr;min-height:0}
  .chat-list{display:block;border-right:0;border-bottom:1px solid var(--line);max-height:220px}
  .chat-window{min-height:460px}
  .chat-header{font-size:14px}
  .topbar .theme-btn{display:grid;place-items:center}
}

:root[data-theme="light"] .landing{background:linear-gradient(180deg,#f6f3fb 0%,#eee8fa 60%,#e9e0f7 100%)}
:root[data-theme="light"] .landing .city-bg{background:radial-gradient(circle at 50% 15%,rgba(122,76,255,.13),transparent 32%)}
:root[data-theme="light"] .landing .stars{opacity:.08}
:root[data-theme="light"] .landing .moon{background:#fff;opacity:.9}
:root[data-theme="light"] .auth-card{background:rgba(255,255,255,.78)}
:root[data-theme="light"] .auth-tabs{background:#eee9f5}
:root[data-theme="light"] .auth-tab.active{background:#ddd2ef;color:#211a2d}
:root[data-theme="light"] .lang-switch{background:rgba(40,25,60,.06)}

/* Light theme reliability overrides */
html[data-theme="light"], body[data-theme="light"]{background:var(--bg)!important;color:var(--text)!important}
:root[data-theme="light"] .sidebar-bottom{background:transparent}
:root[data-theme="light"] .card,
:root[data-theme="light"] .chat-list,
:root[data-theme="light"] .messages,
:root[data-theme="light"] .profile-head,
:root[data-theme="light"] .topic-row{background:var(--panel);color:var(--text)}
:root[data-theme="light"] .topbar{background:rgba(244,241,250,.88)}
:root[data-theme="light"] .glass{background:rgba(255,255,255,.86);border-color:var(--line)}
:root[data-theme="light"] .primary-btn{color:#fff}
:root[data-theme="light"] .secondary-btn{background:#fff;color:#51485e;border-color:var(--line)}

/* Chat action menus: clear on desktop and touch-friendly on mobile */
.chat-more,.message-more{opacity:.72;cursor:pointer;min-width:32px;min-height:32px;display:grid;place-items:center}
.chat-more{flex:none}
.chat-item:hover .chat-more,.chat-item:focus-within .chat-more,.chat-more{opacity:1}
.action-menu-backdrop{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.58);display:grid;place-items:center;padding:16px}
.action-menu{width:min(380px,100%);background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.action-menu-head{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-bottom:1px solid var(--line)}
.action-menu-close{border:0;background:transparent;color:var(--muted);font-size:26px;line-height:1;padding:2px 7px;border-radius:9px;cursor:pointer}
.action-menu-close:hover{background:rgba(155,108,255,.12);color:var(--text)}
.action-menu-list{padding:8px}
.action-menu-item{width:100%;display:flex;align-items:center;gap:12px;padding:13px 12px;border:0;background:transparent;color:var(--text);border-radius:12px;text-align:left;font-weight:800;font-size:14px;cursor:pointer}
.action-menu-item:hover{background:rgba(155,108,255,.12)}
.action-menu-item.danger{color:#e8788f}
.action-menu-icon{width:26px;text-align:center;font-size:18px}
@media(max-width:640px){
  .chat-item{padding:11px 8px}
  .chat-more{min-width:40px;min-height:40px;font-size:22px}
  .message-more{min-width:36px;min-height:36px}
  .action-menu-backdrop{align-items:end;padding:10px}
  .action-menu{border-radius:18px 18px 14px 14px}
  .action-menu-item{min-height:52px;font-size:15px}
}


/* Reliable theme switcher */
html{color-scheme:dark;transition:background-color .18s ease,color .18s ease}
html[data-theme="light"]{color-scheme:light}
body{transition:background-color .18s ease,color .18s ease}
.theme-btn{display:inline-grid;place-items:center;position:relative;overflow:hidden;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .12s ease}
.theme-btn:active{transform:scale(.94)}
.theme-icon{display:grid;place-items:center;width:18px;height:18px}
.theme-icon svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme="light"] .theme-btn{background:#fff;color:#5e4b77;border-color:#d7cde5}
:root[data-theme="dark"] .theme-btn{background:#151027;color:#ddd3f4;border-color:#2c2340}
:root[data-theme="light"] .sidebar{background:rgba(255,255,255,.96);border-color:var(--line)}
:root[data-theme="light"] .main-content{background:var(--bg)}
:root[data-theme="light"] .chat-window,
:root[data-theme="light"] .chat-header,
:root[data-theme="light"] .chat-compose,
:root[data-theme="light"] .messages{background:var(--panel);color:var(--text)}
:root[data-theme="light"] .chat-item{background:#fff;color:var(--text);border-color:var(--line)}
:root[data-theme="light"] .nav-item.active{background:#eee7f8;color:#4c3c62}
:root[data-theme="light"] .nav-item:hover{background:#f3eef9;color:#4c3c62}
:root[data-theme="light"] .muted{color:var(--muted)}
:root[data-theme="light"] .toast{background:#fff;color:#211a2d;border-color:#d8cde8}
@media(max-width:640px){.theme-btn{width:40px;height:40px}.theme-icon,.theme-icon svg{width:19px;height:19px}}

/* Click-to-upload profile avatar */
.profile-avatar-upload{position:relative;display:inline-flex;flex:none;cursor:pointer;align-self:flex-start;border-radius:18px;padding:0;line-height:0;transition:transform .18s ease,filter .18s ease}
.profile-avatar-upload:hover{transform:translateY(-1px);filter:brightness(1.05)}
.profile-avatar-upload:focus-within{outline:3px solid rgba(139,92,246,.35);outline-offset:3px}
.profile-avatar-upload .avatar-wrap{display:block}
.profile-avatar-upload .avatar{display:block}
.avatar-upload-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:5px 9px;border-radius:999px;background:rgba(10,8,18,.78);color:#fff;font-size:11px;font-weight:800;white-space:nowrap;opacity:0;transition:opacity .18s ease;pointer-events:none;line-height:1.1}
.profile-avatar-upload:hover .avatar-upload-hint,.profile-avatar-upload:focus-within .avatar-upload-hint,.profile-avatar-upload.uploading .avatar-upload-hint{opacity:1}
.profile-avatar-upload.uploading{pointer-events:none}
.profile-avatar-upload.uploading .avatar{opacity:.55}
.profile-avatar-upload.uploading::after{content:"";position:absolute;inset:50% auto auto 50%;width:24px;height:24px;margin:-12px;border:3px solid rgba(255,255,255,.38);border-top-color:#fff;border-radius:50%;animation:avatarSpin .7s linear infinite}
.avatar-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
@keyframes avatarSpin{to{transform:rotate(360deg)}}
:root[data-theme="light"] .avatar-upload-hint{background:rgba(33,26,45,.78)}

/* Clickable friend cards */
.friend-card-link{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.friend-card-link:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(20,10,40,.08);border-color:rgba(139,92,246,.45)}
.friend-card-link:focus-visible{outline:3px solid rgba(139,92,246,.35);outline-offset:2px}
.friend-profile-btn{min-width:58px}
.admin-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.admin-tab.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.admin-table-wrap{overflow:auto}.admin-ban-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.admin-ban-form input,.admin-role-select{min-height:42px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);padding:9px 12px}.danger-btn{background:#dc3545;color:#fff;border:0;border-radius:10px;padding:10px 16px;cursor:pointer}.admin-role-select{min-width:180px}

/* Role-aware sidebar and identity layout */
.nav-group,.nav-section{display:grid;gap:5px}.nav-section{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}.nav-section-title{padding:6px 12px 4px;color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.nav-subitem{padding-left:18px;font-size:13px}.nav-subitem .nav-icon{width:20px;text-align:center}.identity-stack{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.15}.identity-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.role-badge{display:block;max-width:100%;margin-top:4px;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:900;line-height:1.15;white-space:normal;overflow-wrap:anywhere;word-break:break-word;border:1px solid transparent}.role-moderator{background:rgba(59,130,246,.12);color:#60a5fa;border-color:rgba(59,130,246,.2)}.role-senior_moderator{background:rgba(245,158,11,.12);color:#fbbf24;border-color:rgba(245,158,11,.22)}.role-admin{background:rgba(168,85,247,.14);color:#c084fc;border-color:rgba(168,85,247,.24)}.mini-profile .identity-stack{max-width:150px}.post-head>.identity-stack,.message-author>.identity-stack{flex:1}.chat-item-main .identity-stack{padding-right:6px}.chat-item-main .role-badge{margin-top:3px}.pin-mark{display:inline-flex;margin-right:4px}.admin-heading{margin-bottom:12px}.admin-heading h2{margin:4px 0}.topic-author{font-weight:700}
@media(max-width:900px){.nav-section-title{display:none}.nav-subitem{padding-left:8px}.mini-profile .identity-stack{max-width:100px}}
@media(max-width:640px){.nav-group,.nav-section{display:flex;flex:1;align-items:stretch;justify-content:space-around;gap:2px;margin:0;border:0;padding:0}.nav-section{display:none}.nav-group .nav-item{flex:1}.role-badge{font-size:9px;padding:2px 6px;max-width:140px}.identity-stack{max-width:100%}.chat-item-main{min-width:0}}
:root[data-theme="light"] .role-moderator{color:#2563eb;background:#eff6ff}.:root[data-theme="light"] .role-senior_moderator{color:#b45309;background:#fffbeb}.:root[data-theme="light"] .role-admin{color:#7c3aed;background:#f5f3ff}

/* Final role UI fixes */
.identity-stack{min-width:0;max-width:100%;display:flex;flex-direction:column;align-items:flex-start;overflow:hidden}
.identity-name{display:block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.role-badge{display:block;position:static;float:none;max-width:100%;width:max-content;padding:3px 7px;margin-top:4px;line-height:1.1;white-space:normal;overflow-wrap:anywhere;word-break:break-word;text-overflow:clip;box-sizing:border-box}
.post-head>.identity-stack,.message-author>.identity-stack,.user-card>.identity-stack,.chat-item-main>.identity-stack{min-width:0;max-width:calc(100% - 44px)}
.nav-section{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);display:grid;gap:5px;overflow:hidden}
.nav-section.hidden{display:none!important}
.nav-subitem{width:100%;min-width:0;justify-content:flex-start}
.nav-subitem span:last-of-type{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){.nav-subitem{justify-content:center}.nav-subitem span:last-of-type{display:none}.identity-stack{max-width:calc(100vw - 100px)}}
@media(max-width:640px){.nav-section{display:none}.nav-section.hidden{display:none!important}.role-badge{max-width:100%;font-size:9px;padding:2px 6px}.post-head>.identity-stack,.message-author>.identity-stack,.user-card>.identity-stack,.chat-item-main>.identity-stack{max-width:calc(100vw - 100px)}}
.report-inline{opacity:.72;margin-left:auto}.report-inline:hover{opacity:1}.modal textarea{min-height:120px}.modal select{padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text)}
.report-inline{opacity:.72;margin-left:auto}.report-inline:hover{opacity:1}.modal textarea{min-height:120px}.modal select{padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text)}
.report-inline{opacity:.72;margin-left:auto}.report-inline:hover{opacity:1}.modal textarea{min-height:120px}.modal select{padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text)}
.report-inline{opacity:.72;margin-left:auto}.report-inline:hover{opacity:1}.modal textarea{min-height:120px}.modal select{padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text)}

/* Collapsible moderator/admin sections */
.nav-section-toggle{width:100%;border:0;background:transparent;color:var(--muted);font:inherit;text-align:left;display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:6px 12px 4px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.nav-chevron{font-size:12px;opacity:.8}.nav-section.collapsed .nav-subitem{display:none}.nav-section.collapsed{padding-bottom:6px}.nav-section-toggle:hover{color:var(--text)}
.profile-link-row,.profile-public-link{display:flex;gap:8px;align-items:center}.profile-link-row input,.profile-public-link input{flex:1;min-width:0}.profile-public-link{margin-top:16px}.profile-public-link input{background:var(--surface);color:var(--muted);border:1px solid var(--line);padding:10px;border-radius:10px}.input-with-emoji{position:relative;display:flex;gap:8px;align-items:flex-start}.input-with-emoji textarea,.input-with-emoji input{flex:1}.emoji-btn{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:10px;padding:8px 10px;cursor:pointer;min-height:42px}.emoji-picker{position:fixed;z-index:2000;display:grid;grid-template-columns:repeat(6,36px);gap:5px;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.3);max-width:min(240px,calc(100vw - 16px))}.emoji-choice{border:0;background:transparent;font-size:22px;padding:6px;border-radius:8px;cursor:pointer}.emoji-choice:hover{background:var(--line)}
@media(max-width:640px){.nav-section-toggle{font-size:10px}.profile-link-row,.profile-public-link{flex-direction:column;align-items:stretch}.emoji-picker{grid-template-columns:repeat(6,34px)}}

/* Media attachments */
.media-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.media-upload-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);padding:9px 12px;border-radius:10px;cursor:pointer;font-weight:600}
.media-upload-btn:hover{filter:brightness(1.08)}
.media-upload-btn input{display:none}
.message-media{margin-top:8px;max-width:min(420px,100%)}
.message-media img,.message-media video{display:block;max-width:100%;max-height:420px;border-radius:12px;background:#000}
.chat-media-btn{padding:9px 11px}
.chat-media-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){.chat-media-name{max-width:110px}.message-media img,.message-media video{max-height:320px}}