:root {
  color-scheme: dark;
  --bg: #0e0f18;
  --panel: #151720;
  --panel-2: #191b28;
  --panel-3: #202230;
  --text: #f4f5ff;
  --muted: #9298ae;
  --faint: #62697f;
  --line: rgba(255, 255, 255, .075);
  --primary: #7668ff;
  --primary-2: #9a8fff;
  --teal: #35d3b2;
  --danger: #ff657f;
  --gold: #ffd166;
  --radius: 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-height: 100%; margin: 0; color: var(--text); background: var(--bg); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { max-width: 100%; }
input, textarea, select {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #10111a;
  color: var(--text); padding: 11px 12px; outline: none; transition: border-color .18s, box-shadow .18s;
}
textarea { resize: vertical; line-height: 1.55; }
input:focus, textarea:focus, select:focus { border-color: rgba(118,104,255,.65); box-shadow: 0 0 0 3px rgba(118,104,255,.12); }
label { display: grid; gap: 7px; color: #b7bbcc; font-size: .875rem; }
label small { color: var(--faint); font-size: .75rem; }
fieldset { display: grid; gap: 13px; border: 0; padding: 0; margin: 0; }
legend { width: 100%; padding: 0 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); color: #fff; font-weight: 750; }

.button {
  min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid transparent; border-radius: 10px; padding: 9px 14px; text-decoration: none;
  color: #fff; font-weight: 700; font-size: .82rem; cursor: pointer; transition: transform .15s, background .15s, border-color .15s;
}
.button:hover { transform: translateY(-1px); }
.button.primary { background: linear-gradient(145deg, #897cff, #6251df); box-shadow: 0 10px 28px rgba(98,81,223,.24); }
.button.secondary { background: #27293a; border-color: var(--line); }
.button.ghost { color: #aeb3c7; border-color: var(--line); background: transparent; }
.button.wide { width: 100%; }
.small-button { min-height: 33px; padding: 6px 10px; font-size: .75rem; }
.text-button { border: 0; padding: 0; color: var(--muted); background: transparent; cursor: pointer; }
.text-button.liked { color: #ff7290; }
.alert { border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; margin-bottom: 15px; font-size: .84rem; }
.alert.error { color: #ff9aac; background: rgba(255,101,127,.09); border-color: rgba(255,101,127,.2); }
.alert.success { color: #80e8cd; background: rgba(53,211,178,.08); border-color: rgba(53,211,178,.2); }
.eyebrow { color: var(--primary-2); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.optional { color: var(--faint); font-size: .72rem; font-weight: 500; }
.muted-copy { color: var(--muted); font-size: .82rem; line-height: 1.55; }
.brand-lockup, .top-brand, .admin-brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; font-weight: 800; }
.brand-lockup > span:last-child, .top-brand > span:last-child, .admin-brand > span:last-child { display: flex; flex-direction: column; }
.brand-lockup small, .top-brand small, .admin-brand small { margin-top: 2px; color: #73798e; font-size: .65rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.brand-mark { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(145deg, #978bff, #4d419d); box-shadow: inset 0 1px rgba(255,255,255,.2), 0 12px 30px rgba(74,62,159,.3); }
.brand-mark.small { width: 34px; height: 34px; border-radius: 11px; }

/* Installer */
.install-body { background: radial-gradient(circle at 15% 12%, rgba(118,104,255,.2), transparent 31%), radial-gradient(circle at 75% 85%, rgba(53,211,178,.1), transparent 26%), var(--bg); }
.install-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, .78fr); gap: clamp(45px, 8vw, 115px); align-items: center; padding: clamp(30px, 6vw, 84px); }
.install-intro { min-height: 720px; display: flex; flex-direction: column; justify-content: space-between; }
.install-intro h1 { max-width: 720px; margin: 16px 0 20px; font-size: clamp(3rem, 6vw, 5.8rem); letter-spacing: -.065em; line-height: .95; }
.install-intro p { max-width: 640px; color: #a0a5b9; font-size: 1rem; line-height: 1.75; }
.install-features { max-width: 690px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 34px; }
.install-features article { min-height: 130px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); }
.install-features article > b { display: block; color: var(--primary-2); font-size: .72rem; margin-bottom: 24px; }
.install-features span { display: grid; gap: 5px; }
.install-features strong { font-size: .87rem; }
.install-features small { color: #757c92; font-size: .72rem; line-height: 1.5; }
.install-card { max-height: calc(100vh - 52px); overflow-y: auto; padding: clamp(25px, 4vw, 38px); border: 1px solid rgba(255,255,255,.09); border-radius: 24px; background: rgba(24,26,39,.94); box-shadow: 0 35px 100px rgba(0,0,0,.38); }
.install-card h2 { margin: 18px 0 7px; font-size: 1.7rem; letter-spacing: -.035em; }
.install-card > p { color: var(--muted); line-height: 1.55; }
.install-form { display: grid; gap: 25px; margin-top: 24px; }
.form-grid { display: grid; gap: 11px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.status-pill { display: inline-flex; border: 1px solid rgba(118,104,255,.3); border-radius: 999px; padding: 5px 9px; color: #b2aaff; background: rgba(118,104,255,.1); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.status-pill.success { color: #6ce2c5; border-color: rgba(53,211,178,.25); background: rgba(53,211,178,.09); }
.install-hint { color: #666d82 !important; text-align: center; font-size: .74rem; }

/* Authentication */
.auth-body { background: var(--bg); }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(430px, .75fr); }
.auth-story { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(30px, 5vw, 70px); background: radial-gradient(circle at 15% 15%, rgba(118,104,255,.28), transparent 31%), radial-gradient(circle at 78% 70%, rgba(53,211,178,.14), transparent 25%), linear-gradient(150deg, #141623, #0c0d15); }
.auth-story::after { content: ""; position: absolute; width: 520px; height: 520px; right: -210px; top: 22%; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; box-shadow: 0 0 0 65px rgba(255,255,255,.018), 0 0 0 130px rgba(255,255,255,.012); }
.auth-copy { position: relative; z-index: 1; max-width: 790px; }
.auth-copy h1 { margin: 15px 0 22px; font-size: clamp(3.3rem, 7vw, 7rem); line-height: .91; letter-spacing: -.075em; }
.auth-copy > p { max-width: 560px; color: #a2a7ba; font-size: 1.02rem; line-height: 1.75; }
.auth-social-proof { display: flex; align-items: center; gap: 15px; margin-top: 35px; }
.auth-social-proof > span:last-child { display: grid; gap: 4px; }
.auth-social-proof small { color: #757b90; }
.avatar-stack { display: flex; padding-left: 9px; }
.avatar-stack i { width: 38px; height: 38px; display: grid; place-items: center; margin-left: -9px; border: 3px solid #161825; border-radius: 50%; background: linear-gradient(145deg, #7164e7, #36305e); font-style: normal; font-weight: 750; font-size: .75rem; }
.auth-story footer { position: relative; z-index: 1; color: #5f667a; font-size: .74rem; }
.auth-panel { display: grid; place-items: center; padding: 35px; background: #11121b; }
.auth-card { width: min(100%, 450px); }
.auth-tabs { display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #0d0e16; }
.auth-tabs button { flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: #777e92; cursor: pointer; }
.auth-tabs button.active { color: white; background: #252738; box-shadow: 0 4px 15px rgba(0,0,0,.2); }
.auth-form { display: none; gap: 14px; padding-top: 33px; }
.auth-form.active { display: grid; }
.auth-form h2 { margin: 0; font-size: 2rem; letter-spacing: -.045em; }
.auth-form > p { margin: -5px 0 15px; color: var(--muted); }
.auth-form .button { margin-top: 8px; min-height: 48px; }

/* App shell */
.app-body { height: 100vh; overflow: hidden; }
.topbar { height: 68px; display: grid; grid-template-columns: 290px minmax(260px, 520px) 1fr; align-items: center; gap: 20px; padding: 0 18px; border-bottom: 1px solid var(--line); background: rgba(16,17,27,.96); backdrop-filter: blur(18px); }
.top-brand { font-size: .96rem; }
.global-search { position: relative; }
.global-search span { position: absolute; left: 13px; top: 9px; color: #6f758a; }
.global-search input { height: 39px; padding-left: 36px; border-radius: 11px; background: #151620; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.icon-button { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; color: #a1a6b9; text-decoration: none; background: #171925; }
.icon-button b { position: absolute; right: -5px; top: -5px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--bg); border-radius: 99px; color: #fff; background: var(--danger); font-size: .62rem; }
.account-chip { min-width: 170px; display: flex; align-items: center; gap: 9px; margin-left: 5px; padding: 5px 8px; border-radius: 12px; text-decoration: none; }
.account-chip:hover { background: rgba(255,255,255,.035); }
.account-chip > span:last-child { display: grid; gap: 2px; }
.account-chip b { font-size: .78rem; }
.account-chip small { font-size: .65rem; }
.app-grid { height: calc(100vh - 68px); display: grid; grid-template-columns: 64px 236px minmax(0, 1fr) 245px; transition: grid-template-columns .24s cubic-bezier(.2,.8,.2,1); }
.app-grid.rooms-collapsed { grid-template-columns: 64px 0 minmax(0, 1fr) 245px; }
.app-grid.people-collapsed { grid-template-columns: 64px 236px minmax(0, 1fr) 0; }
.app-grid.rooms-collapsed.people-collapsed { grid-template-columns: 64px 0 minmax(0, 1fr) 0; }
.app-grid.rooms-collapsed .room-sidebar, .app-grid.people-collapsed .people-panel { overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; }
.tool-rail { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #11131c; }
.tool-rail nav, .rail-bottom { display: grid; gap: 3px; padding: 8px 7px; }
.rail-bottom { margin-top: auto; }
.tool-rail a, .tool-rail button { width: 50px; min-height: 49px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; border-radius: 11px; color: #777e93; background: transparent; text-decoration: none; cursor: pointer; }
.tool-rail a span, .tool-rail button span { font-size: 1.08rem; }
.tool-rail small { font-size: .58rem; }
.tool-rail a:hover, .tool-rail a.active, .tool-rail button:hover { color: #fff; background: #252738; }
.tool-rail a.active { box-shadow: inset 3px 0 var(--primary); }
.nav-ping { min-width: 18px; height: 18px; position: absolute; right: 2px; top: 2px; display: grid; place-items: center; padding: 0 4px; border: 2px solid #11131c; border-radius: 99px; color: #fff; background: linear-gradient(145deg,#ff718b,#df3659); box-shadow: 0 4px 12px rgba(255,75,111,.38); font-size: .55rem; font-style: normal; line-height: 1; animation: nav-ping-jump 1.8s ease-in-out infinite; }
.nav-ping.is-new { animation: nav-ping-arrive .45s ease-out, nav-ping-jump 1.8s .45s ease-in-out infinite; }
@keyframes nav-ping-jump { 0%,70%,100% { transform: translateY(0) scale(1); } 78% { transform: translateY(-5px) scale(1.08); } 86% { transform: translateY(0) scale(.96); } 93% { transform: translateY(-2px) scale(1.03); } }
@keyframes nav-ping-arrive { from { opacity: 0; transform: scale(.3) rotate(-18deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
.room-sidebar { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #141620; transition: opacity .18s ease, visibility .18s ease; }
.sidebar-heading, .people-panel > header { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid var(--line); }
.sidebar-heading > span, .people-panel > header > span { display: grid; gap: 2px; }
.sidebar-heading b, .people-panel header b { font-size: .82rem; }
.sidebar-heading small, .people-panel header small { color: var(--faint); font-size: .66rem; }
.sidebar-heading a, .people-panel header a { color: #8f84ff; text-decoration: none; font-size: 1.1rem; }
.room-list { flex: 1; overflow: auto; padding: 8px; }
.room-list > a { min-height: 61px; position: relative; isolation: isolate; display: grid; grid-template-columns: 38px minmax(0,1fr) auto auto; align-items: center; gap: 7px; overflow: hidden; padding: 7px; border-radius: 11px; color: #8e94a8; background-image: linear-gradient(90deg,rgba(20,22,32,.94),rgba(20,22,32,.72)),var(--room-banner,linear-gradient(transparent,transparent)); background-position: center; background-size: cover; text-decoration: none; }
.room-list > a:hover, .room-list > a.active { color: #fff; background: #232533; }
.room-list > a[style*="--room-banner"]:hover, .room-list > a[style*="--room-banner"].active { background-image: linear-gradient(90deg,rgba(35,37,51,.9),rgba(35,37,51,.66)),var(--room-banner); background-position: center; background-size: cover; }
.room-list > a > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.room-list b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.room-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #686f83; font-size: .63rem; }
.room-list em { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: #b8b1ff; background: rgba(118,104,255,.13); font-size: .58rem; font-style: normal; text-transform: uppercase; }
.room-list em.room-level { width: auto; min-width: 34px; padding: 0 6px; border-radius: 999px; text-transform: none; font-weight: 800; }
.room-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: var(--room, var(--primary)); background: color-mix(in srgb, var(--room, var(--primary)) 13%, transparent); font-weight: 850; }
.room-icon.large { width: 43px; height: 43px; border-radius: 13px; }
.room-picture { overflow: hidden; border: 1px solid rgba(255,255,255,.13); background: #222433; box-shadow: 0 5px 16px rgba(0,0,0,.22); }
.room-picture img { width: 100%; height: 100%; object-fit: cover; }
.mini-profile { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 11px; border-top: 1px solid var(--line); }
.mini-profile > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.mini-profile b, .mini-profile small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-profile b { font-size: .73rem; }
.mini-profile small { color: var(--faint); font-size: .6rem; }
.avatar { --avatar-accent: var(--primary); width: 36px; height: 36px; flex: none; display: inline-grid; place-items: center; overflow: hidden; border-radius: 11px; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--avatar-accent) 88%, white), color-mix(in srgb, var(--avatar-accent) 62%, black)); font-size: .72rem; font-weight: 850; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.compact { width: 31px; height: 31px; border-radius: 9px; }
.avatar.tiny { width: 27px; height: 27px; border-radius: 8px; font-size: .6rem; }
.avatar.micro { width: 24px; height: 24px; border-radius: 7px; font-size: .55rem; }
.avatar.large { width: 49px; height: 49px; border-radius: 15px; }
.presence { width: 8px; height: 8px; border-radius: 50%; background: #596075; box-shadow: 0 0 0 3px #141620; }
.presence.online { background: var(--teal); }
.presence.away { background: #f5b95f; }
.presence.busy { background: var(--danger); }
.stage { position: relative; min-width: 0; min-height: 0; overflow-y: auto; background: radial-gradient(circle at 50% -20%, rgba(118,104,255,.075), transparent 34%), #10111a; }
.stage-header { height: 64px; position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--line); background: rgba(16,17,26,.94); backdrop-filter: blur(16px); }
.stage-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.stage-title > span:last-child { min-width: 0; display: grid; gap: 2px; }
.stage-title h1 { margin: 0; font-size: .98rem; }
.stage-title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #777e92; font-size: .65rem; }
.stage-tools { display: flex; gap: 6px; }
.stage-tools button, .stage-tools a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: #8f95a9; background: #171925; text-decoration: none; cursor: pointer; }
.stage-tools .desktop-panel-toggle.active { color: #d4d0ff; border-color: rgba(118,104,255,.32); background: rgba(118,104,255,.12); }
.mobile-people-button, .people-close { display: none !important; }
.mobile-room-tabs { display: none; }
.room-hero { height: clamp(85px,13vw,150px); margin: 12px 16px 0; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background-position: center; background-size: cover; box-shadow: inset 0 -45px 60px rgba(0,0,0,.25),0 12px 34px rgba(0,0,0,.18); }
.room-settings { margin: 12px 16px 0; overflow: hidden; border: 1px solid rgba(118,104,255,.2); border-radius: 14px; background: rgba(23,25,37,.96); }
.room-settings > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; color: #d8d5ff; font-size: .76rem; font-weight: 800; cursor: pointer; list-style: none; }
.room-settings > summary::-webkit-details-marker { display: none; }
.room-settings > summary::after { content: "+"; color: #9c92ff; font-size: 1rem; }
.room-settings[open] > summary::after { content: "−"; }
.room-settings > summary small { margin-left: auto; color: var(--faint); font-size: .61rem; font-weight: 650; }
.room-settings-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(230px,.8fr); gap: 16px; padding: 15px; border-top: 1px solid var(--line); }
.room-settings-grid > form, .room-settings-grid > section, .room-settings-grid section form { display: grid; align-content: start; gap: 12px; }
.room-settings-grid > section { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #11121b; }
.room-settings-grid h3, .room-settings-grid p { margin: 0; }
.room-settings-grid h3 { font-size: .8rem; }
.room-settings-grid p { color: var(--muted); font-size: .69rem; line-height: 1.5; }
.room-notice { margin: 12px 16px 0; padding: 10px 12px; border: 1px solid rgba(118,104,255,.18); border-radius: 11px; color: #a6abbd; background: rgba(118,104,255,.07); font-size: .77rem; }
.room-notice b { margin-right: 8px; color: #c0baff; }
.message-list { min-height: calc(100% - 145px); display: flex; flex-direction: column; padding: 17px 14px 100px; }
.message { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; padding: 9px 8px; border-radius: 10px; }
.message, .dm-list article, .wall-post, .news-card { position: relative; }
.message.menu-open, .dm-list article.menu-open, .wall-post.menu-open, .news-card.menu-open { z-index: 80; }
.message:hover { background: rgba(255,255,255,.025); }
.message > div { min-width: 0; }
.message header { min-height: 22px; display: flex; align-items: center; gap: 7px; }
.message header strong { font-size: .79rem; }
.message header > span { font-size: .61rem; font-weight: 700; }
.message time { color: #5f667b; font-size: .6rem; }
.message header em { border-radius: 99px; padding: 2px 6px; color: #b3acff; background: rgba(118,104,255,.12); font-size: .55rem; font-style: normal; }
.message header .item-menu { margin-left: auto; }
.message p { margin: 1px 0 0; color: #c6c9d7; font-size: .85rem; line-height: 1.52; overflow-wrap: anywhere; }
.avatar-profile-link { align-self: start; display: inline-flex; border-radius: 11px; text-decoration: none; transition: transform .16s, box-shadow .16s; }
.avatar-profile-link:hover, .avatar-profile-link:focus-visible { transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(118,104,255,.18); outline: none; }
.member-profile-link { color: inherit; text-decoration: none; }
.member-profile-link:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb,var(--primary) 55%,transparent); text-underline-offset: 3px; }
.message.system-message { background: rgba(118,104,255,.055); }
.verified { width: 15px; height: 15px; display: inline-grid; place-items: center; margin-left: 4px; border-radius: 50%; color: #fff; background: var(--primary); font-size: .55rem; vertical-align: middle; }
.styled-text { color: var(--style-one, inherit); }
.styled-text.style-gradient { color: transparent; background: linear-gradient(100deg, var(--style-one), var(--style-two), var(--style-one)); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; animation: style-shimmer 4s linear infinite; }
.styled-text.style-neon { color: var(--style-one); text-shadow: 0 0 5px var(--style-two), 0 0 12px var(--style-two), 0 0 22px color-mix(in srgb, var(--style-two) 70%, transparent); }
.styled-text.font-rounded { font-family: "Trebuchet MS", ui-rounded, system-ui, sans-serif; }
.styled-text.font-serif { font-family: Georgia, "Times New Roman", serif; }
.styled-text.font-mono { font-family: "Courier New", ui-monospace, monospace; }
.styled-text.font-elegant { font-family: Palatino, "Book Antiqua", Georgia, serif; font-style: italic; }
.styled-text.font-display { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: .035em; }
.styled-text.font-handwritten { font-family: "Comic Sans MS", "Segoe Print", cursive; }
.message p .styled-text, .dm-list p .styled-text { white-space: pre-wrap; }
@keyframes style-shimmer { to { background-position: 200% center; } }
.composer { position: sticky; bottom: 0; z-index: 4; display: grid; grid-template-columns: 39px minmax(0,1fr) 41px; align-items: end; gap: 7px; margin: -82px 14px 14px; padding: 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: rgba(29,31,44,.96); box-shadow: 0 16px 45px rgba(0,0,0,.35); backdrop-filter: blur(18px); }
.composer textarea { min-height: 40px; max-height: 130px; resize: none; border: 0; background: transparent; box-shadow: none; }
.composer button { height: 40px; border: 0; border-radius: 10px; color: #969caf; background: transparent; cursor: pointer; }
.composer .send-button { color: #fff; background: linear-gradient(145deg, #897cff, #6251df); }
.composer-reply { grid-column: 1 / -1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border-left: 3px solid var(--primary); border-radius: 8px; color: #c7c3ff; background: rgba(118,104,255,.1); }
.composer-reply[hidden] { display: none; }
.composer-reply > span { min-width: 0; display: grid; gap: 2px; }
.composer-reply b { font-size: .66rem; }
.composer-reply b i { font-style: normal; }
.composer-reply small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8e93a7; font-size: .62rem; }
.composer-reply button { width: 28px; height: 28px; flex: none; border: 0; border-radius: 8px; color: #c6c9d7; background: rgba(255,255,255,.06); cursor: pointer; }
.reply-quote { width: min(100%, 430px); display: grid; gap: 2px; margin: 3px 0 4px; padding: 6px 9px; border: 0; border-left: 3px solid #8175ff; border-radius: 7px; color: #9ba0b4; background: rgba(118,104,255,.08); text-align: left; cursor: pointer; }
.reply-quote b { color: #afa8ff; font-size: .62rem; }
.reply-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .65rem; }
.message-highlight { animation: message-highlight 1.25s ease-out !important; }
@keyframes message-highlight { 0%,35% { background: rgba(118,104,255,.22); box-shadow: inset 3px 0 #8e82ff; } }

.item-menu { position: relative; z-index: 3; display: inline-flex; align-items: center; }
.item-menu-toggle { min-width: 28px; height: 25px; border: 0; border-radius: 7px; padding: 0 6px; color: #777e92; background: transparent; font-size: .68rem; letter-spacing: -.08em; cursor: pointer; }
.item-menu-toggle:hover, .item-menu.open .item-menu-toggle { color: #d7d9e6; background: rgba(255,255,255,.07); }
.item-menu-popover { min-width: 130px; position: absolute; top: calc(100% + 4px); right: 0; z-index: 500; display: none; isolation: isolate; padding: 6px; border: 1px solid #45485c; border-radius: 10px; background: #242634; box-shadow: 0 18px 46px rgba(0,0,0,.68); pointer-events: auto; }
.item-menu.open .item-menu-popover { display: grid; animation: menu-pop .14s ease-out; }
.item-menu-popover form { margin: 0; }
.item-menu-popover button, .item-menu-popover > a { width: 100%; min-height: 30px; display: flex; align-items: center; border: 0; border-radius: 7px; padding: 6px 9px; color: #c9ccda; background: transparent; font-size: .68rem; text-align: left; text-decoration: none; cursor: pointer; }
.item-menu-popover button:hover, .item-menu-popover > a:hover { background: rgba(255,255,255,.06); }
.item-menu-popover .danger-option { color: #ff879c; }
@keyframes menu-pop { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
.people-panel { min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: #141620; transition: opacity .18s ease, visibility .18s ease; }
.people-panel-actions { display: flex; align-items: center; gap: 5px; }
.people-panel-actions button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; color: #aeb3c7; background: #202230; cursor: pointer; }
.online-list { flex: 1; overflow-y: auto; padding: 8px; }
.online-list > a { min-height: 53px; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 6px; border-radius: 10px; text-decoration: none; }
.online-list > a:hover { background: rgba(255,255,255,.035); }
.online-list > a.user-glow { border: 1px solid color-mix(in srgb,var(--user-glow,#7668ff) 32%,transparent); background: color-mix(in srgb,var(--user-glow,#7668ff) 7%,transparent); box-shadow: inset 3px 0 var(--user-glow,#7668ff),0 0 17px color-mix(in srgb,var(--user-glow,#7668ff) 24%,transparent); }
.online-list > a.user-glow:hover { background: color-mix(in srgb,var(--user-glow,#7668ff) 13%,transparent); box-shadow: inset 3px 0 var(--user-glow,#7668ff),0 0 23px color-mix(in srgb,var(--user-glow,#7668ff) 35%,transparent); }
.online-list > a > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.online-list b, .online-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-list b { font-size: .73rem; }
.online-list small { font-size: .61rem; }
.people-note { margin: 9px; padding: 14px; border: 1px solid rgba(118,104,255,.16); border-radius: 13px; background: linear-gradient(145deg, rgba(118,104,255,.1), rgba(118,104,255,.035)); }
.people-note > span { color: var(--primary-2); }
.people-note b { display: block; margin-top: 10px; font-size: .78rem; }
.people-note p { margin: 5px 0 0; color: #747b91; font-size: .67rem; line-height: 1.5; }
.toast { position: fixed; top: 80px; left: 50%; z-index: 100; transform: translateX(-50%); max-width: min(430px, calc(100vw - 30px)); padding: 11px 15px; border: 1px solid var(--line); border-radius: 11px; color: #fff; background: #282a3a; box-shadow: 0 18px 60px rgba(0,0,0,.45); font-size: .8rem; animation: toast-in .25s ease-out; }
.toast.success { border-color: rgba(53,211,178,.22); }
.toast.error { border-color: rgba(255,101,127,.25); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } }

/* Content views */
.content-header { min-height: 145px; display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; padding: 28px clamp(18px, 4vw, 44px) 24px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(118,104,255,.055), transparent); }
.content-header h1 { margin: 7px 0 5px; font-size: clamp(1.65rem, 3vw, 2.35rem); letter-spacing: -.05em; }
.content-header p { margin: 0; color: var(--muted); font-size: .86rem; }
.news-grid, .gift-grid, .module-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; padding: 22px clamp(18px, 4vw, 44px) 70px; }
.news-card, .gift-card, .module-grid article, .profile-card, .compose-card, .wall-post, .side-card, .form-card, .notification { border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, #191b28, #151720); }
.news-card { overflow: hidden; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.news-card.featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0,1.2fr); }
.news-cover { width: 100%; height: 240px; object-fit: cover; }
.featured .news-cover { height: 100%; min-height: 290px; }
.news-copy { padding: 20px; }
.category { display: inline-flex; padding: 4px 8px; border-radius: 99px; color: #b5aeff; background: rgba(118,104,255,.12); font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.news-card h2 { margin: 13px 0 6px; font-size: 1.18rem; }
.news-summary { color: #a1a6b8; font-size: .82rem; line-height: 1.5; }
.rich-copy { max-height: 170px; overflow: hidden; color: #878da1; font-size: .78rem; line-height: 1.65; mask-image: linear-gradient(to bottom, #000 78%, transparent); }
.news-copy footer { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.news-copy footer > span:last-child { display: grid; gap: 2px; }
.news-copy footer b { font-size: .7rem; }
.news-copy footer small { color: var(--faint); font-size: .61rem; }
.wall-layout { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 15px; padding: 22px clamp(18px, 4vw, 44px) 70px; }
.compose-card { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; padding: 14px; }
.compose-card textarea { min-height: 80px; border: 0; background: transparent; box-shadow: none; }
.compose-card footer { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.compose-card footer select { width: auto; margin-left: auto; }
.friends-only-chip { margin-left: auto; padding: 5px 8px; border-radius: 99px; color: #aaa3ff; background: rgba(118,104,255,.1); font-size: .65rem; font-weight: 700; }
.file-chip { display: inline-flex; cursor: pointer; color: #9d96ff; }
.file-chip input { display: none; }
.wall-feed { display: grid; gap: 13px; margin-top: 13px; }
.wall-post { padding: 16px; }
.wall-post > header { display: flex; align-items: center; gap: 9px; }
.wall-post > header > span:nth-child(2) { display: grid; gap: 2px; }
.wall-post > header strong { font-size: .78rem; }
.wall-post > header small { font-size: .62rem; }
.wall-post > header em { margin-left: auto; color: #b9b2ff; font-size: .62rem; font-style: normal; }
.wall-post > header .item-menu { margin-left: auto; }
.wall-post > header em + .item-menu { margin-left: 0; }
.wall-post > p { color: #c5c8d7; font-size: .85rem; line-height: 1.6; }
.wall-media { display: block; width: 100%; max-height: 500px; object-fit: cover; margin-top: 12px; border-radius: 12px; }
.post-actions { display: flex; gap: 17px; align-items: center; padding: 12px 0 7px; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
.comments { display: grid; gap: 7px; padding: 8px 0; }
.comments > div { display: grid; grid-template-columns: 25px minmax(0,1fr); gap: 7px; }
.comments p { display: grid; gap: 3px; margin: 0; padding: 8px 10px; border-radius: 10px; color: #b7bbca; background: #10111a; font-size: .75rem; }
.comments p b { color: white; }
.comments p small { color: var(--faint); font-size: .58rem; }
.comment-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; margin-top: 5px; }
.comment-form input { min-height: 35px; padding: 7px 10px; }
.comment-form button { border: 0; border-radius: 9px; color: #b3acff; background: rgba(118,104,255,.12); padding: 0 12px; cursor: pointer; }
.side-card { align-self: start; position: sticky; top: 20px; padding: 18px; }
.side-card h2 { margin: 0; font-size: .95rem; }
.side-card p { color: var(--muted); font-size: .75rem; line-height: 1.6; }
.side-card a { color: #aaa2ff; font-size: .75rem; text-decoration: none; }
.content-section { padding: 22px clamp(18px, 4vw, 44px) 0; }
.content-section > h2 { margin: 0 0 12px; font-size: .95rem; }
.content-section > h2 span { margin-left: 5px; color: var(--faint); font-weight: 500; }
.section-note { margin: -5px 0 12px; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.blocked-section { padding-bottom: 28px; }
.blocked-section .person-card { border-color: rgba(255,101,127,.17); }
.interaction-unavailable { display: inline-flex; align-items: center; padding: 9px 12px; border: 1px solid rgba(255,101,127,.2); border-radius: 10px; color: #ff9bad; background: rgba(255,101,127,.07); font-size: .72rem; }
.people-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.person-card { min-height: 94px; display: grid; grid-template-columns: 50px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: #171925; }
.person-card > div { min-width: 0; display: grid; gap: 3px; }
.person-card strong { font-size: .8rem; }
.person-card small { font-size: .63rem; }
.person-card p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 3px 0 0; color: var(--muted); font-size: .7rem; }
.person-card form, .person-card nav { display: flex; gap: 5px; }
.empty-inline { padding: 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: .78rem; }
.empty-state { min-height: 260px; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #71788d; text-align: center; }
.empty-state.panel { margin: 0; border: 1px dashed var(--line); border-radius: 15px; }
.empty-state > span { color: #9489ff; font-size: 2rem; }
.empty-state h2 { margin: 12px 0 3px; color: #e1e3ed; font-size: 1rem; }
.empty-state p { margin: 0; font-size: .75rem; }
.dm-layout { min-height: calc(100vh - 214px); display: grid; grid-template-columns: 290px minmax(0,1fr); gap: 0; margin: 20px clamp(18px, 4vw, 44px) 50px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #151720; }
.dm-people { max-height: calc(100vh - 214px); overflow-y: auto; padding: 10px; border-right: 1px solid var(--line); background: #12141d; }
.conversation-section + .conversation-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.conversation-section > header { min-height: 27px; display: flex; align-items: center; justify-content: space-between; padding: 0 5px 5px; }
.conversation-section > header b { color: #d9dbea; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.conversation-section > header small { padding: 3px 6px; border-radius: 99px; color: #9992ff; background: rgba(118,104,255,.1); font-size: .55rem; }
.conversation-list, .request-list { display: grid; gap: 5px; }
.conversation-list > a { min-height: 58px; position: relative; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 7px; border-radius: 11px; color: inherit; text-decoration: none; transition: background .18s, transform .18s; }
.conversation-list > a:hover, .conversation-list > a.active { background: #242633; transform: translateX(2px); }
.conversation-list > a > span:nth-child(2), .request-list article > span { min-width: 0; display: grid; gap: 3px; }
.conversation-list strong, .request-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
.conversation-list small, .request-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #747b90; font-size: .6rem; }
.conversation-list em { min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border-radius: 99px; color: #fff; background: var(--danger); font-size: .53rem; font-style: normal; }
.conversation-empty { margin: 3px 5px 8px; color: #666d81; font-size: .63rem; line-height: 1.5; }
.request-section { margin: 8px -2px 0; padding: 10px 7px 7px !important; border: 1px solid rgba(255,101,127,.18) !important; border-radius: 13px; background: rgba(255,101,127,.045); }
.request-list article { display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: center; gap: 8px; padding: 7px; border-radius: 11px; background: rgba(255,255,255,.025); animation: cove-rise-in .32s ease-out both; }
.request-list form { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.request-list button { min-height: 31px; border: 0; border-radius: 8px; color: #fff; font-size: .62rem; font-weight: 800; cursor: pointer; }
.request-accept { background: linear-gradient(145deg,#8274ff,#5f50d6); }
.request-ignore { color: #a4a9ba !important; background: #242633; }
.sent-section { opacity: .86; }
.find-message-link { min-height: 36px; display: flex; align-items: center; justify-content: center; margin-top: 13px; border: 1px dashed rgba(118,104,255,.25); border-radius: 10px; color: #aaa3ff; text-decoration: none; font-size: .63rem; }
.dm-thread { min-width: 0; display: flex; flex-direction: column; }
.dm-thread > header { height: 64px; display: flex; align-items: center; gap: 9px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.dm-thread > header > span:last-child { display: grid; gap: 2px; }
.dm-thread > header small { font-size: .65rem; }
.dm-list { flex: 1; min-height: 300px; max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 16px; }
.dm-list article { display: flex; align-items: end; gap: 7px; max-width: 78%; }
.dm-list article.mine { align-self: flex-end; flex-direction: row-reverse; }
.dm-bubble { min-width: 0; display: grid; }
.dm-list article p { display: grid; gap: 5px; margin: 0; padding: 10px 12px; border-radius: 13px 13px 13px 4px; color: #c9ccda; background: #232534; font-size: .8rem; line-height: 1.5; }
.dm-list article.mine p { border-radius: 13px 13px 4px 13px; background: #6558db; color: white; }
.dm-list .reply-quote { width: auto; max-width: 100%; margin-bottom: -2px; border-radius: 9px 9px 0 0; }
.dm-message-menu { align-self: center; }
.dm-list article.mine .dm-message-menu .item-menu-popover { right: auto; left: 0; }
.dm-list article small { color: rgba(255,255,255,.55); font-size: .57rem; }
.dm-compose { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.dm-compose textarea { min-height: 43px; max-height: 120px; }
.removing { opacity: 0 !important; transform: scale(.97) !important; transition: opacity .22s, transform .22s !important; }
.profile-page { padding-bottom: 70px; }
.profile-theme-aurora { --profile-glow: #37e5b8; }
.profile-theme-sunset { --profile-glow: #ff7d74; }
.profile-theme-ocean { --profile-glow: #4cbcff; }
.profile-theme-royal { --profile-glow: #ffd166; }
.profile-page:not(.profile-theme-midnight) .profile-cover { box-shadow: inset 0 -70px 100px color-mix(in srgb, var(--profile-glow) 16%, transparent); }
.profile-page:not(.profile-theme-midnight) .profile-card, .profile-page:not(.profile-theme-midnight) .profile-editor { border-color: color-mix(in srgb, var(--profile-glow) 22%, transparent); }
.profile-cover { height: 210px; background-color: color-mix(in srgb, var(--cover-accent, var(--primary)) 22%, #161825); background-image: radial-gradient(circle at 25% 30%, color-mix(in srgb, var(--cover-accent, var(--primary)) 45%, transparent), transparent 35%), linear-gradient(140deg, transparent, rgba(53,211,178,.12)); background-position: center; background-size: cover; }
.profile-identity { min-height: 125px; display: grid; grid-template-columns: 126px minmax(0,1fr) auto; gap: 18px; align-items: center; margin-top: -42px; padding: 0 clamp(18px, 4vw, 44px); }
.profile-avatar { width: 118px; height: 118px; border: 6px solid #10111a; border-radius: 30px; font-size: 2rem; }
.profile-identity > div:nth-child(2) { align-self: end; padding-bottom: 12px; }
.profile-identity strong { font-size: 1.5rem; }
.profile-identity .username { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; }
.profile-identity p { margin: 9px 0 0; color: #b6bacb; font-size: .85rem; }
.profile-rank { align-self: end; display: flex; align-items: center; gap: 10px; margin-bottom: 11px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 14px; background: #171925; }
.profile-rank img { width: 42px; height: 42px; }
.profile-rank span { display: grid; gap: 3px; }
.profile-rank small { color: var(--faint); font-size: .6rem; text-transform: uppercase; }
.profile-rank b { font-size: .76rem; }
.profile-music { width: min(320px,calc(100% - 36px)); height: 36px; display: inline-flex; align-items: center; margin: 0 clamp(18px,4vw,44px) 14px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.28)); }
.profile-music-toggle { width: 36px; height: 36px; position: relative; z-index: 2; flex: none; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.72); border-radius: 50%; padding: 0; color: #fff; background: linear-gradient(145deg,color-mix(in srgb,var(--profile-glow,var(--primary)) 80%,#c89dff),color-mix(in srgb,var(--profile-glow,var(--primary)) 80%,#6248ae)); box-shadow: 0 4px 12px color-mix(in srgb,var(--profile-glow,var(--primary)) 32%,transparent), inset 0 1px rgba(255,255,255,.28); cursor: pointer; }
.profile-music-toggle span { display: block; margin-left: 2px; font-size: .72rem; font-weight: 900; line-height: 1; }
.profile-music.is-playing .profile-music-toggle span { margin-left: 0; font-size: .68rem; letter-spacing: -2px; }
.profile-music-strip { min-width: 0; height: 27px; flex: 1; display: flex; align-items: center; gap: 8px; margin-left: -5px; padding: 0 10px 0 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-left: 0; border-radius: 0 999px 999px 0; color: rgba(255,255,255,.92); background: linear-gradient(90deg,color-mix(in srgb,var(--profile-glow,var(--primary)) 22%,rgba(255,255,255,.16)),rgba(255,255,255,.1)); backdrop-filter: blur(12px); }
.profile-music-title { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .67rem; font-weight: 750; }
.profile-music-dots { flex: none; display: inline-flex; align-items: center; gap: 3px; }
.profile-music-dots i { width: 3px; height: 3px; display: block; border-radius: 50%; background: rgba(255,255,255,.72); }
.profile-music.is-playing .profile-music-dots i { animation: music-dot 1s ease-in-out infinite alternate; }
.profile-music.is-playing .profile-music-dots i:nth-child(2) { animation-delay: .18s; }
.profile-music.is-playing .profile-music-dots i:nth-child(3) { animation-delay: .36s; }
.profile-music audio { display: none; }
@keyframes music-dot { to { transform: translateY(-3px); opacity: .42; } }
.profile-stats { display: grid; grid-template-columns: repeat(4,1fr); margin: 12px clamp(18px, 4vw, 44px) 16px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.profile-stats span { display: grid; gap: 3px; padding: 13px; border-right: 1px solid var(--line); text-align: center; }
.profile-stats span:last-child { border: 0; }
.profile-stats b { font-size: 1rem; }
.profile-stats small { color: var(--faint); font-size: .62rem; text-transform: uppercase; }
.profile-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; margin: 0 clamp(18px, 4vw, 44px); }
.profile-card { padding: 19px; }
.profile-card h2 { margin: 0 0 13px; font-size: .95rem; }
.profile-card .subheading { margin-top: 23px; }
.profile-card .bio { min-height: 48px; color: #b6bac9; font-size: .8rem; line-height: 1.65; }
.profile-card dl { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 18px 0 0; }
.profile-card dl div { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.profile-card dt { color: var(--faint); font-size: .62rem; text-transform: uppercase; }
.profile-card dd { margin: 0; color: #c7cada; font-size: .75rem; }
.badge-list { display: grid; gap: 8px; }
.badge-list > span { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 11px; background: color-mix(in srgb, var(--badge) 9%, #10111a); }
.badge-list > span > b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--badge); background: color-mix(in srgb, var(--badge) 13%, transparent); }
.badge-list > span > span { display: grid; gap: 2px; }
.badge-list strong { font-size: .72rem; }
.badge-list small { color: var(--muted); font-size: .62rem; }
.gift-row { display: flex; flex-wrap: wrap; gap: 7px; }
.gift-row > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #10111a; font-size: 1.25rem; }
.profile-editor { margin: 15px clamp(18px, 4vw, 44px); padding: 23px; border: 1px solid rgba(118,104,255,.18); border-radius: 18px; background: linear-gradient(145deg, rgba(118,104,255,.085), #171925 34%); }
.profile-editor header h2 { margin: 6px 0 4px; font-size: 1.25rem; }
.profile-editor header p { margin: 0; color: var(--muted); font-size: .77rem; }
.profile-editor form { display: grid; gap: 14px; margin-top: 22px; }
.profile-editor form > .button { justify-self: start; margin-top: 5px; }
.profile-editor form[aria-busy="true"] > .button { min-width: 170px; cursor: wait; opacity: .82; }
.style-studio, .music-editor { overflow: hidden; border: 1px solid rgba(118,104,255,.16); border-radius: 15px; background: #11121b; }
.style-studio > header, .music-editor > header { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.style-studio > header > span, .music-editor > header { gap: 3px; }
.style-studio > header > span { display: grid; }
.style-studio header b, .music-editor header b { font-size: .8rem; }
.style-studio header small, .music-editor header small { color: var(--muted); font-size: .66rem; }
.style-panels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.style-panels fieldset { padding: 15px; }
.style-panels fieldset + fieldset { border-left: 1px solid var(--line); }
.style-panels legend { font-size: .75rem; }
.style-preview { min-height: 63px; display: grid; place-items: center; margin-bottom: 12px; border: 1px dashed rgba(255,255,255,.11); border-radius: 11px; background: radial-gradient(circle,rgba(118,104,255,.08),transparent 70%); font-size: .93rem; font-weight: 800; text-align: center; }
.music-editor { padding-bottom: 15px; }
.music-editor > header { display: grid; }
.music-editor > .form-grid, .music-editor > .check-label { margin: 14px 15px 0; }
.profile-actions { display: flex; gap: 8px; margin: 16px clamp(18px, 4vw, 44px); }
.store-header { align-items: center; }
.coin-balance { min-width: 120px; display: grid; gap: 2px; padding: 13px; border: 1px solid rgba(255,209,102,.18); border-radius: 14px; text-align: center; background: rgba(255,209,102,.07); }
.coin-balance b { color: var(--gold); font-size: 1.4rem; }
.coin-balance small { color: #9c8c67; font-size: .62rem; text-transform: uppercase; }
.gift-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.gift-card { padding: 19px; text-align: center; }
.gift-card > span { width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto; border-radius: 20px; background: rgba(118,104,255,.1); font-size: 2rem; }
.gift-card h2 { margin: 13px 0 3px; font-size: .92rem; }
.gift-card > p { margin: 0 0 15px; color: var(--gold); font-size: .72rem; }
.gift-card form { display: grid; gap: 7px; }
.gift-card input, .gift-card select { padding: 8px; font-size: .72rem; }
.module-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.module-grid article { min-height: 210px; display: flex; flex-direction: column; align-items: flex-start; padding: 20px; }
.module-grid article > span { color: #9d94ff; font-size: 1.7rem; }
.module-grid h2 { margin: 30px 0 7px; font-size: 1rem; }
.module-grid p { flex: 1; margin: 0 0 18px; color: var(--muted); font-size: .77rem; line-height: 1.6; }
.module-grid em { color: #7e76df; font-size: .66rem; font-style: normal; text-transform: uppercase; letter-spacing: .07em; }
.notification-list { display: grid; gap: 8px; padding: 22px clamp(18px, 4vw, 44px) 70px; }
.notification { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px; padding: 13px; text-decoration: none; }
.notification.unread { border-color: rgba(118,104,255,.25); background: linear-gradient(145deg, rgba(118,104,255,.1), #171925); }
.notification > span:last-child { display: grid; gap: 3px; }
.notification b { font-size: .8rem; }
.notification p { margin: 0; color: var(--muted); font-size: .72rem; }
.notification small { color: var(--faint); font-size: .61rem; }
.notice-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: var(--primary-2); background: rgba(118,104,255,.1); }
.form-card { max-width: 720px; margin: 22px clamp(18px, 4vw, 44px) 70px; padding: 22px; }
.form-card > form { display: grid; gap: 14px; }

/* Administration */
.admin-app { min-height: 100vh; display: grid; grid-template-columns: 230px minmax(0,1fr); }
.admin-sidebar { height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; padding: 17px 12px; border-right: 1px solid var(--line); background: #13151f; }
.admin-brand { padding: 0 6px 26px; }
.admin-sidebar nav { display: grid; gap: 3px; }
.admin-sidebar nav a { min-height: 41px; position: relative; display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 0 10px; border-radius: 10px; color: #858ba0; text-decoration: none; }
.admin-sidebar nav a:hover, .admin-sidebar nav a.active { color: white; background: #252735; }
.admin-sidebar nav a.active::before { content: ""; position: absolute; left: -12px; width: 3px; height: 22px; border-radius: 0 5px 5px 0; background: var(--primary); box-shadow: 0 0 14px var(--primary); }
.admin-sidebar nav a span { text-align: center; }
.admin-sidebar nav a b { font-size: .78rem; }
.admin-sidebar nav a em { min-width: 19px; height: 19px; display: grid; place-items: center; border-radius: 99px; color: white; background: var(--danger); font-size: .6rem; font-style: normal; }
.admin-account { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 10px; border-radius: 12px; background: #0e0f17; }
.admin-account > span { width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: linear-gradient(145deg, #8c7fff, #4c4193); font-size: .7rem; font-weight: 850; }
.admin-account > span img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-account p { display: grid; gap: 2px; margin: 0; }
.admin-account b { font-size: .72rem; }
.admin-account small { font-size: .62rem; }
.admin-main { min-width: 0; background: radial-gradient(circle at 85% -15%, rgba(118,104,255,.12), transparent 29%), var(--bg); }
.admin-top { min-height: 84px; position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px clamp(20px,4vw,48px); border-bottom: 1px solid var(--line); background: rgba(15,16,25,.93); backdrop-filter: blur(18px); }
.admin-top h1 { margin: 4px 0 0; font-size: 1.35rem; letter-spacing: -.035em; }
.admin-top > div:last-child { display: flex; align-items: center; gap: 12px; }
.healthy { color: #69dec1; font-size: .7rem; }
.admin-content { padding: 27px clamp(20px,4vw,48px) 75px; }
.stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 15px; }
.stat-grid > a { min-height: 105px; display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg,#191b28,#151720); text-decoration: none; }
.stat-grid > a > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #9b91ff; background: rgba(118,104,255,.11); }
.stat-grid p { display: grid; gap: 3px; margin: 0; }
.stat-grid small { color: var(--muted); font-size: .65rem; }
.stat-grid b { font-size: 1.55rem; }
.admin-dashboard-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(280px,.75fr); gap: 14px; }
.admin-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg,#191b28,#151720); }
.admin-card > header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.admin-card > header > span { display: grid; gap: 3px; }
.admin-card > header b { font-size: .8rem; }
.admin-card > header small { color: var(--faint); font-size: .62rem; }
.admin-card > header a { color: #9f96ff; font-size: .68rem; text-decoration: none; }
.pulse-bars { height: 180px; display: flex; align-items: flex-end; gap: 10px; padding: 32px 25px 0; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0 43px, rgba(255,255,255,.04) 44px 45px); }
.pulse-bars i { flex: 1; max-width: 30px; margin: 0 auto; border-radius: 6px 6px 0 0; background: linear-gradient(to top,#5647c6,#9d93ff); opacity: .82; }
.admin-card > footer { display: grid; grid-template-columns: repeat(3,1fr); padding: 13px; }
.admin-card > footer span { display: grid; gap: 3px; padding-left: 13px; border-left: 1px solid var(--line); }
.admin-card > footer span:first-child { border: 0; }
.admin-card > footer b { font-size: .9rem; }
.admin-card > footer small { color: var(--faint); font-size: .61rem; }
.staff-mini-list { display: grid; padding: 8px; }
.staff-mini-list > div { min-height: 50px; display: flex; align-items: center; gap: 9px; padding: 6px; border-radius: 10px; }
.staff-mini-list > div:hover { background: rgba(255,255,255,.025); }
.staff-mini-list img { width: 37px; height: 37px; }
.staff-mini-list span { display: grid; gap: 2px; }
.staff-mini-list b { font-size: .72rem; }
.staff-mini-list small { color: var(--faint); font-size: .6rem; }
.recent-card { margin-top: 14px; }
.compact-table { width: 100%; overflow-x: auto; }
.compact-table table { width: 100%; min-width: 720px; border-collapse: collapse; }
.compact-table th, .compact-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.compact-table th { height: 42px; color: #73798e; font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; }
.compact-table td { color: #b8bbca; font-size: .72rem; }
.table-person { display: flex; align-items: center; gap: 9px; }
.table-person > i { --avatar-accent:var(--primary); width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; color: white; background: linear-gradient(145deg,var(--avatar-accent),#3d365f); font-size: .62rem; font-style: normal; font-weight: 800; }
.table-person > i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.table-person > span { display: grid; gap: 2px; }
.table-person b { color: #fff; font-size: .72rem; }
.table-person small { color: var(--faint); font-size: .6rem; }
.table-card > header form { display: flex; gap: 7px; }
.table-card > header form input { width: 230px; padding: 8px 10px; }
.inline-admin-form { display: flex; align-items: center; gap: 5px; }
.inline-admin-form select { width: 135px; padding: 7px; }
.inline-admin-form > input[name="suspend_reason"] { width: 145px; padding: 7px; }
.check-label { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.check-label input { width: auto; }
.section-heading { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.section-heading h2 { margin: 0 0 5px; font-size: 1.22rem; }
.section-heading p { margin: 0; color: var(--muted); font-size: .78rem; }
.rank-admin-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.rank-admin-grid article { min-height: 155px; display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 15px; padding: 18px; border: 1px solid color-mix(in srgb,var(--rank) 26%,transparent); border-radius: 17px; background: linear-gradient(145deg,color-mix(in srgb,var(--rank) 10%,#191b28),#151720 65%); }
.rank-admin-grid img { width: 82px; height: 82px; filter: drop-shadow(0 12px 16px rgba(0,0,0,.35)); }
.rank-admin-grid small { color: var(--faint); font-size: .6rem; text-transform: uppercase; }
.rank-admin-grid h2 { margin: 5px 0; color: var(--rank); font-size: 1.05rem; }
.rank-admin-grid p { min-height: 30px; margin: 0 0 10px; color: var(--muted); font-size: .67rem; line-height: 1.5; }
.rank-admin-grid form { display: grid; grid-template-columns: minmax(0,1fr) 38px auto; gap: 5px; }
.rank-admin-grid form input { padding: 7px 8px; }
.rank-admin-grid input[type="color"] { padding: 3px; }
.admin-split { display: grid; grid-template-columns: minmax(320px,.72fr) minmax(0,1.28fr); gap: 14px; align-items: start; }
.admin-card.form-card { max-width: none; margin: 0; padding: 0; }
.admin-card.form-card > form { padding: 17px; }
.room-admin-list, .admin-feed { display: grid; gap: 9px; }
.room-admin-list article, .admin-feed article { display: flex; align-items: center; gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #171925; }
.room-admin-list article > div { min-width: 0; }
.room-admin-list h2, .admin-feed h2 { margin: 0; font-size: .82rem; }
.room-admin-list p, .admin-feed p { margin: 4px 0; color: var(--muted); font-size: .7rem; }
.room-admin-list small, .admin-feed small { color: var(--faint); font-size: .62rem; }
.admin-feed article { display: block; }
.admin-feed h2 { margin-top: 9px; }
.report-admin-list { display: grid; gap: 9px; }
.report-admin-list article { display: grid; grid-template-columns: 74px minmax(0,1fr) minmax(210px,.4fr); align-items: center; gap: 15px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #171925; }
.report-admin-list article > div { display: grid; gap: 4px; }
.report-admin-list h2 { margin: 0; font-size: .83rem; }
.report-admin-list p { margin: 0; color: #bcc0cf; font-size: .76rem; line-height: 1.5; }
.report-admin-list small, .report-admin-list em { color: var(--faint); font-size: .62rem; font-style: normal; }
.report-admin-list blockquote { display: grid; gap: 5px; margin: 8px 0; padding: 9px 11px; border: 0; border-left: 3px solid var(--primary); border-radius: 8px; color: #b8bccb; background: #10111a; font-size: .7rem; line-height: 1.45; }
.report-admin-list blockquote b { color: #aaa3ff; font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; }
.report-context { display: grid; gap: 6px; padding: 12px; border: 1px solid rgba(118,104,255,.2); border-radius: 12px; background: rgba(118,104,255,.07); }
.report-context small { color: #aaa3ff; font-size: .67rem; font-weight: 750; }
.report-context p { max-height: 130px; overflow: auto; margin: 0; color: #c5c8d7; font-size: .78rem; line-height: 1.55; white-space: pre-wrap; }
.report-admin-list form { display: grid; gap: 6px; }
.report-admin-list form input { padding: 7px; font-size: .68rem; }
.report-status { justify-self: start; padding: 5px 8px; border-radius: 99px; color: #ff96a8; background: rgba(255,101,127,.1); font-size: .6rem; font-weight: 800; text-transform: uppercase; }
.report-status.resolved { color: #6fe3c5; background: rgba(53,211,178,.09); }
.settings-form { max-width: 690px; }
.settings-form > form { display: grid; gap: 14px; padding: 20px; }
.settings-group { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #11121a; }
.settings-group > header { padding: 13px 15px; border-bottom: 1px solid var(--line); }
.settings-group > header span { display: grid; gap: 3px; }
.settings-group > header b { font-size: .8rem; }
.settings-group > header small { color: var(--muted); font-size: .66rem; }
.limit-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 14px; }
.setting-toggle { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 0; border-top: 1px solid var(--line); }
.setting-toggle > span { display: grid; gap: 3px; }
.setting-toggle b { color: #fff; font-size: .78rem; }
.setting-toggle input { width: 20px; height: 20px; }
.admin-modules { padding: 0; }

@media (max-width: 1220px) {
  .app-grid { grid-template-columns: 64px 220px minmax(0,1fr); }
  .app-grid.people-collapsed { grid-template-columns: 64px 220px minmax(0,1fr); }
  .app-grid.rooms-collapsed, .app-grid.rooms-collapsed.people-collapsed { grid-template-columns: 64px 0 minmax(0,1fr); }
  .app-grid.people-collapsed .people-panel { opacity: 1; visibility: visible; pointer-events: auto; }
  [data-desktop-people-toggle] { display: none !important; }
  .people-panel { display: none; }
  .gift-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 960px) {
  .topbar { grid-template-columns: 240px minmax(200px,1fr) auto; }
  .account-chip { min-width: 0; }
  .account-chip > span:last-child { display: none; }
  .install-layout, .auth-shell { grid-template-columns: 1fr; }
  .install-intro { min-height: auto; gap: 70px; }
  .install-card { max-height: none; }
  .auth-story { min-height: 570px; }
  .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-dashboard-grid, .admin-split { grid-template-columns: 1fr; }
  .module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wall-layout { grid-template-columns: 1fr; }
  .side-card { position: static; }
}
@media (max-width: 720px) {
  .topbar { height: 59px; grid-template-columns: 1fr auto; padding: 0 10px; }
  .top-brand small, .global-search { display: none; }
  .app-grid { height: calc(100vh - 59px); grid-template-columns: 55px minmax(0,1fr); }
  .app-grid.rooms-collapsed, .app-grid.people-collapsed, .app-grid.rooms-collapsed.people-collapsed { grid-template-columns: 55px minmax(0,1fr); }
  .desktop-panel-toggle { display: none !important; }
  .room-sidebar { display: none; }
  .tool-rail a, .tool-rail button { width: 43px; min-height: 44px; }
  .tool-rail small { display: none; }
  .stage-header { height: 58px; padding: 0 10px; }
  .message-list { padding-inline: 6px; }
  .content-header { min-height: 128px; padding: 22px 14px 19px; align-items: flex-end; }
  .content-header > .button, .content-header form { flex: none; }
  .news-grid, .gift-grid, .module-grid, .notification-list { grid-template-columns: 1fr; padding: 15px 13px 65px; }
  .news-card.featured { grid-column: auto; display: block; }
  .wall-layout, .content-section { padding-left: 13px; padding-right: 13px; }
  .people-grid { grid-template-columns: 1fr; }
  .dm-layout { grid-template-columns: 1fr; margin: 13px; }
  .dm-people { border-right: 0; border-bottom: 1px solid var(--line); }
  .profile-cover { height: 155px; }
  .profile-identity { grid-template-columns: 92px minmax(0,1fr); margin-top: -28px; }
  .profile-avatar { width: 88px; height: 88px; border-radius: 24px; }
  .profile-rank { grid-column: 1 / -1; justify-self: start; margin: 0; }
  .profile-music { grid-template-columns: 42px minmax(0,1fr); }
  .profile-music audio { grid-column: 1 / -1; }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-editor, .profile-grid, .profile-stats, .profile-actions { margin-left: 13px; margin-right: 13px; }
  .form-grid.two, .form-grid.three { grid-template-columns: 1fr; }
  .style-panels, .limit-grid { grid-template-columns: 1fr; }
  .style-panels fieldset + fieldset { border-left: 0; border-top: 1px solid var(--line); }
  .admin-app { grid-template-columns: 58px minmax(0,1fr); }
  .admin-sidebar { padding-inline: 6px; }
  .admin-brand { padding-inline: 5px; }
  .admin-brand > span:last-child, .admin-sidebar nav a b, .admin-sidebar nav a em, .admin-account p { display: none; }
  .admin-sidebar nav a { grid-template-columns: 1fr; justify-items: center; padding: 0; }
  .admin-account { justify-content: center; padding: 7px; }
  .admin-top { padding: 12px 13px; }
  .admin-top .eyebrow, .healthy { display: none; }
  .admin-top h1 { font-size: 1.05rem; }
  .admin-content { padding: 16px 12px 65px; }
  .stat-grid, .rank-admin-grid, .module-grid { grid-template-columns: 1fr; }
  .report-admin-list article { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .install-layout { padding: 20px; }
  .install-intro h1 { font-size: 3.2rem; }
  .install-features { grid-template-columns: 1fr; }
  .auth-story { min-height: 470px; padding: 25px; }
  .auth-copy h1 { font-size: 3.25rem; }
  .auth-panel { padding: 25px 18px; }
  .content-header { display: block; }
  .content-header > :last-child { margin-top: 13px; }
  .profile-stats { grid-template-columns: repeat(2,1fr); }
  .profile-stats span:nth-child(2) { border-right: 0; }
  .profile-stats span:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .compose-card footer { flex-wrap: wrap; }
  .compose-card footer select { margin-left: 0; }
  .person-card { grid-template-columns: 49px minmax(0,1fr); }
  .person-card form, .person-card nav { grid-column: 1 / -1; }
  .stat-grid { grid-template-columns: 1fr; }
  .rank-admin-grid article { grid-template-columns: 65px minmax(0,1fr); }
  .rank-admin-grid img { width: 62px; height: 62px; }
  .rank-admin-grid form { grid-column: 1 / -1; }
}

/* Legal and owner documentation */
.legal-page { min-height: 100vh; padding: clamp(25px,5vw,70px); background: radial-gradient(circle at 12% 8%,rgba(118,104,255,.16),transparent 27%),var(--bg); }
.legal-page > article { max-width: 780px; margin: 70px auto 0; padding: clamp(24px,5vw,50px); border: 1px solid var(--line); border-radius: 20px; background: #171925; }
.legal-page h1 { margin: 8px 0 24px; font-size: clamp(2.3rem,6vw,4.6rem); letter-spacing: -.06em; }
.legal-page h2 { margin: 28px 0 8px; font-size: 1.05rem; }
.legal-page p, .legal-page li { color: #a9aec0; font-size: .9rem; line-height: 1.75; }
.legal-page code { border: 1px solid var(--line); border-radius: 6px; padding: 2px 5px; color: #b8b1ff; background: #10111a; }
.legal-page .legal-note { margin-top: 30px; padding: 14px; border: 1px solid rgba(118,104,255,.18); border-radius: 12px; color: #8f95a9; background: rgba(118,104,255,.06); font-size: .78rem; }

/* Mobile app navigation and iPhone safe-area support */
@media (max-width: 720px) {
  input, textarea, select { font-size: 16px; }
  body.app-body { width: 100%; height: 100dvh; min-height: 100dvh; overflow: hidden; overscroll-behavior: none; }
  .topbar { position: relative; z-index: 40; gap: 8px; padding: 0 9px; }
  .top-brand { min-width: 0; font-size: .9rem; }
  .top-brand > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-actions { min-width: 0; gap: 5px; }
  .top-actions .icon-button { width: 36px; height: 36px; }
  .account-chip { min-width: 0; margin-left: 0; padding: 3px; }

  .app-grid, .app-grid.rooms-collapsed, .app-grid.people-collapsed, .app-grid.rooms-collapsed.people-collapsed { width: 100%; height: calc(100dvh - 59px); display: grid; grid-template-columns: minmax(0,1fr); }
  .stage { width: 100%; height: 100%; grid-column: 1; padding-bottom: calc(72px + env(safe-area-inset-bottom)); overscroll-behavior-y: contain; }
  .room-sidebar, .people-panel { display: none; }

  .tool-rail {
    width: 100%; height: calc(66px + env(safe-area-inset-bottom)); position: fixed; inset: auto 0 0 0; z-index: 60;
    display: flex; flex-direction: row; align-items: flex-start; overflow-x: auto; overflow-y: hidden;
    border: 0; border-top: 1px solid rgba(255,255,255,.1); padding: 0 0 env(safe-area-inset-bottom);
    background: rgba(17,19,28,.97); box-shadow: 0 -14px 38px rgba(0,0,0,.34); backdrop-filter: blur(18px);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .tool-rail::-webkit-scrollbar { display: none; }
  .tool-rail nav, .tool-rail .rail-bottom { flex: none; display: flex; gap: 2px; margin: 0; padding: 5px 3px; }
  .tool-rail .rail-bottom form { flex: none; }
  .tool-rail a, .tool-rail button { width: 58px; min-width: 58px; min-height: 55px; height: 55px; gap: 2px; border-radius: 10px; }
  .tool-rail a span, .tool-rail button span { font-size: 1rem; }
  .tool-rail small { display: block; max-width: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .54rem; }
  .tool-rail a.active { box-shadow: inset 0 3px var(--primary); }

  .stage-header { min-height: 66px; height: auto; gap: 8px; padding: 8px 9px; }
  .stage-title { flex: 1; overflow: hidden; gap: 8px; }
  .stage-title .room-icon.large { width: 39px; height: 39px; border-radius: 11px; }
  .stage-title h1 { font-size: .94rem; }
  .stage-title small { max-width: 100%; font-size: .61rem; }
  .stage-tools { flex: none; gap: 5px; }
  .stage-tools button, .stage-tools a { width: 35px; height: 35px; }

  .mobile-room-tabs {
    min-height: 43px; position: sticky; top: 66px; z-index: 4; display: flex; gap: 6px; overflow-x: auto;
    padding: 6px 9px; border-bottom: 1px solid var(--line); background: rgba(16,17,26,.96);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .mobile-room-tabs::-webkit-scrollbar { display: none; }
  .mobile-room-tabs a { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: #858ba0; background: #171925; text-decoration: none; font-size: .65rem; font-weight: 750; }
  .mobile-room-tabs a span { color: var(--room,var(--primary)); }
  .mobile-room-tabs a img { width: 21px; height: 21px; object-fit: cover; border-radius: 7px; }
  .mobile-room-tabs a.active { color: #fff; border-color: color-mix(in srgb,var(--room,var(--primary)) 45%,transparent); background: color-mix(in srgb,var(--room,var(--primary)) 14%,#171925); }

  .room-hero { height: 82px; margin: 7px 8px 0; border-radius: 12px; }
  .room-settings { margin: 8px 8px 0; }
  .room-settings-grid { grid-template-columns: 1fr; padding: 11px; }
  .room-notice { margin: 8px 8px 0; }
  .message-list { min-height: calc(100% - 175px); padding: 9px 5px calc(162px + env(safe-area-inset-bottom)); }
  .message { grid-template-columns: 34px minmax(0,1fr); gap: 8px; padding: 8px 5px; }
  .message > .avatar { width: 34px; height: 34px; border-radius: 10px; }
  .message header { min-height: 20px; flex-wrap: wrap; column-gap: 6px; row-gap: 2px; }
  .message header strong { max-width: 100%; overflow-wrap: anywhere; font-size: .76rem; }
  .message header > span, .message time { font-size: .57rem; }
  .message p { margin-top: 3px; font-size: .82rem; line-height: 1.5; }
  .composer { bottom: calc(66px + env(safe-area-inset-bottom)); grid-template-columns: 36px minmax(0,1fr) 40px; gap: 4px; margin: -77px 7px 8px; padding: 6px; border-radius: 14px; }
  .composer textarea { min-height: 39px; padding: 8px 7px; }
  .composer button { height: 39px; }

  .content-header, .news-grid, .gift-grid, .module-grid, .notification-list, .wall-layout, .content-section, .profile-page, .form-card { min-width: 0; }
  .content-header { gap: 12px; }
  .content-header h1 { overflow-wrap: anywhere; }
  .profile-editor { padding: 17px; }
  .profile-actions { flex-wrap: wrap; }
  .style-studio > header, .music-editor > header { align-items: flex-start; flex-wrap: wrap; gap: 7px; }

  body.admin-body { min-height: 100dvh; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .admin-app { min-height: 100dvh; display: block; }
  .admin-sidebar {
    width: 100%; height: calc(66px + env(safe-area-inset-bottom)); position: fixed; inset: auto 0 0 0; z-index: 70;
    display: block; overflow-x: auto; overflow-y: hidden; padding: 0 0 env(safe-area-inset-bottom); border: 0; border-top: 1px solid var(--line);
    background: rgba(19,21,31,.98); box-shadow: 0 -14px 38px rgba(0,0,0,.35); scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .admin-sidebar::-webkit-scrollbar { display: none; }
  .admin-brand, .admin-account { display: none; }
  .admin-sidebar nav { width: max-content; display: flex; gap: 2px; padding: 5px 4px; }
  .admin-sidebar nav a { min-width: 70px; width: 70px; min-height: 55px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; }
  .admin-sidebar nav a span { font-size: .9rem; }
  .admin-sidebar nav a b { display: block; max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .55rem; }
  .admin-sidebar nav a em { position: absolute; right: 8px; top: 4px; display: grid; }
  .admin-sidebar nav a.active::before { width: calc(100% - 18px); height: 3px; left: 9px; top: -5px; border-radius: 0 0 5px 5px; }
  .admin-main { min-width: 0; }
  .admin-top { top: 0; min-height: 65px; padding: 10px 11px; }
  .admin-top > div:last-child { gap: 6px; }
  .admin-content { min-width: 0; padding: 14px 10px calc(82px + env(safe-area-inset-bottom)); }
  .admin-card > header { flex-wrap: wrap; }
  .compact-table { max-width: calc(100vw - 20px); -webkit-overflow-scrolling: touch; }
  .table-card > header form { flex-wrap: wrap; width: 100%; }
  .table-card > header form input { width: min(100%,230px); }
  .inline-admin-form { flex-wrap: wrap; }
  .setting-toggle { align-items: flex-start; }
  .compact-setting { min-height: 0; }
}

@media (max-width: 430px) {
  .brand-mark.small { width: 32px; height: 32px; }
  .top-brand { gap: 8px; font-size: .82rem; }
  .top-actions .icon-button { width: 33px; height: 34px; }
  .account-chip .avatar.compact { width: 30px; height: 30px; }
  .tool-rail a, .tool-rail button { width: 56px; min-width: 56px; }
  .stage-title small { font-size: .58rem; }
  .message header > span:not(.item-menu) { max-width: 85px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .message header .item-menu { max-width: none; overflow: visible; }
  .item-menu-toggle { min-width: 32px; min-height: 30px; }
  .content-header { padding-left: 11px; padding-right: 11px; }
  .profile-identity { gap: 11px; padding-left: 11px; padding-right: 11px; }
  .profile-identity strong { font-size: 1.15rem; }
  .profile-editor, .profile-grid, .profile-stats, .profile-actions, .profile-music { margin-left: 9px; margin-right: 9px; }
  .profile-editor { padding: 14px; }
  .rank-admin-grid article { padding: 13px; gap: 10px; }
  .rank-admin-grid form { grid-template-columns: minmax(0,1fr) 38px; }
  .rank-admin-grid form .button { grid-column: 1 / -1; }
  .table-card > header form input { width: 100%; }
  .inline-admin-form { display: grid; grid-template-columns: 1fr; width: 100%; }
  .inline-admin-form select, .inline-admin-form > input[name="suspend_reason"] { width: 100%; }
  .legal-page { padding: 17px; }
  .legal-page > article { margin-top: 40px; padding: 20px; }
}

/* Collapsible people list when the desktop people column is unavailable */
@media (max-width: 1220px) {
  .mobile-people-button { display: grid !important; }
  .people-close { display: grid !important; place-items: center; }
  .people-panel.mobile-open {
    width: min(330px,calc(100vw - 28px)); max-height: calc(100dvh - 104px); position: fixed; inset: 82px 14px 14px auto; z-index: 75;
    display: flex; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 17px;
    background: rgba(20,22,32,.985); box-shadow: 0 28px 90px rgba(0,0,0,.62); backdrop-filter: blur(22px);
  }
  .people-panel.mobile-open .online-list { min-height: 120px; }
}

@media (max-width: 720px) {
  .people-panel.mobile-open {
    width: auto; max-height: min(68dvh,560px); inset: auto 8px calc(73px + env(safe-area-inset-bottom)) 8px;
    border-radius: 18px;
  }
  .people-panel.mobile-open > header { flex: none; }
  .people-panel.mobile-open .online-list { min-height: 150px; }
  .people-panel.mobile-open .people-note { flex: none; }
  .dm-people { max-height: 38dvh; border-right: 0; border-bottom: 1px solid var(--line); }
}

/* Motion polish */
.message, .news-card, .wall-post, .person-card, .gift-card, .module-grid article, .profile-card, .notification, .admin-card { animation: cove-rise-in .34s ease-out both; }
.message:nth-child(2), .news-card:nth-child(2), .person-card:nth-child(2), .gift-card:nth-child(2), .module-grid article:nth-child(2) { animation-delay: .035s; }
.message:nth-child(3), .news-card:nth-child(3), .person-card:nth-child(3), .gift-card:nth-child(3), .module-grid article:nth-child(3) { animation-delay: .07s; }
.message:nth-child(4), .news-card:nth-child(4), .person-card:nth-child(4), .gift-card:nth-child(4), .module-grid article:nth-child(4) { animation-delay: .105s; }
.message:nth-child(n+5) { animation-delay: .12s; }
.button, .icon-button, .stage-tools button, .stage-tools a, .profile-music-toggle, .tool-rail a, .admin-sidebar nav a { transition: transform .17s ease, background .17s ease, border-color .17s ease, box-shadow .17s ease, color .17s ease; }
.icon-button:hover, .stage-tools button:hover, .stage-tools a:hover { transform: translateY(-2px); border-color: rgba(118,104,255,.32); box-shadow: 0 8px 20px rgba(0,0,0,.22); }
.profile-music-toggle:hover { transform: scale(1.07); }
.profile-music.is-playing .profile-music-toggle { animation: music-button-pulse 2.2s ease-in-out infinite; }
.people-panel.mobile-open { animation: cove-panel-in .24s cubic-bezier(.2,.8,.2,1) both; }
.conversation-list > a.active::after { content: ""; width: 3px; height: 24px; position: absolute; right: 0; border-radius: 5px 0 0 5px; background: var(--primary); box-shadow: 0 0 13px var(--primary); animation: cove-glow-in .3s ease-out; }
@keyframes cove-rise-in { from { opacity: 0; transform: translateY(8px) scale(.992); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes cove-panel-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes cove-glow-in { from { opacity: 0; transform: scaleY(.2); } to { opacity: 1; transform: scaleY(1); } }
@keyframes music-button-pulse { 0%,100% { box-shadow: 0 4px 12px color-mix(in srgb,var(--profile-glow,var(--primary)) 32%,transparent), inset 0 1px rgba(255,255,255,.28); } 50% { box-shadow: 0 5px 22px color-mix(in srgb,var(--profile-glow,var(--primary)) 55%,transparent), inset 0 1px rgba(255,255,255,.35); } }

/* Unified menu shell, room drawer, and in-chat profile overlays */
.topbar { position: relative; z-index: 100; grid-template-columns: minmax(230px,290px) minmax(220px,520px) 1fr; }
.topbar-leading { min-width: 0; display: flex; align-items: center; gap: 11px; }
.top-menu-button { width: 39px; height: 39px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; color: #b4aee6; background: #171925; font-size: 1.12rem; cursor: pointer; }
.top-popover-wrap { position: relative; }
.top-popover { width: 310px; position: absolute; right: 0; top: calc(100% + 11px); z-index: 130; display: none; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 15px; background: #171826; box-shadow: 0 28px 80px rgba(0,0,0,.62); }
.top-popover.open { display: block; animation: cove-panel-in .2s cubic-bezier(.2,.8,.2,1) both; }
.top-popover > header { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.top-popover > header > span { display: grid; gap: 3px; }
.top-popover > header b { font-size: .78rem; }
.top-popover > header small { color: var(--faint); font-size: .61rem; }
.top-popover > header a { color: #aaa2ff; font-size: .63rem; font-weight: 750; text-decoration: none; }
.message-quick-list { max-height: 330px; display: grid; gap: 3px; overflow-y: auto; padding: 7px; }
.message-quick-list > a { min-height: 55px; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 6px; border-radius: 10px; color: inherit; text-decoration: none; }
.message-quick-list > a:hover { background: #242635; }
.message-quick-list > a > span { min-width: 0; display: grid; gap: 2px; }
.message-quick-list strong, .message-quick-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-quick-list strong { font-size: .7rem; }
.message-quick-list small { color: var(--muted); font-size: .59rem; }
.message-quick-list em { min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 4px; border-radius: 99px; color: #fff; background: var(--danger); font-size: .55rem; font-style: normal; }
.notification-quick-menu { width: 350px; }
.notification-quick-menu > header { min-height: 50px; padding: 10px 13px; }
.notification-clear-button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; color: #ff9fda; background: transparent; cursor: pointer; font-size: .82rem; }
.notification-clear-button svg { width: 16px; height: 16px; display: block; }
.notification-clear-button:hover { color: #fff; background: rgba(255,255,255,.07); }
.notification-clear-button:disabled { opacity: .45; cursor: wait; }
.notification-quick-list { max-height: 390px; display: grid; gap: 3px; overflow-y: auto; padding: 7px; }
.notification-quick-item { min-height: 62px; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 9px; padding: 8px; border: 1px solid transparent; border-radius: 11px; color: inherit; text-decoration: none; }
.notification-quick-item:hover { background: #242635; }
.notification-quick-item.unread { border-color: rgba(118,104,255,.22); background: rgba(118,104,255,.08); }
.notification-quick-item > span:last-child { min-width: 0; display: grid; gap: 2px; }
.notification-quick-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }
.notification-quick-item p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .61rem; }
.notification-quick-item small { color: var(--faint); font-size: .56rem; }
.notification-quick-empty { min-height: 175px; display: grid; place-items: center; align-content: center; gap: 12px; padding: 24px; text-align: center; }
.notification-quick-empty > span { font-size: 2.7rem; filter: grayscale(.35); opacity: .68; }
.notification-quick-empty p { margin: 0; color: #ececff; font-size: .7rem; }
.notification-nav-button .notification-ping { position: absolute; min-width: 16px; height: 16px; display: grid; place-items: center; top: -4px; right: -4px; padding: 0 4px; border: 2px solid #10111b; border-radius: 999px; color: #fff; background: var(--danger); font-size: .48rem; line-height: 1; }
.notification-nav-button { position: relative; }
.quick-empty { min-height: 145px; display: grid; place-items: center; align-content: center; gap: 9px; color: #777d91; text-align: center; }
.quick-empty span { font-size: 2.1rem; }
.quick-empty p { margin: 0; font-size: .72rem; }
.account-quick-menu { width: 300px; }
.account-menu-profile { display: grid; grid-template-columns: 49px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 13px; color: inherit; text-decoration: none; background: linear-gradient(135deg,rgba(118,104,255,.1),transparent); }
.account-menu-profile > span { min-width: 0; display: grid; gap: 2px; }
.account-menu-profile small { font-size: .61rem; }
.account-menu-profile b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .83rem; }
.account-menu-profile em { color: var(--muted); font-size: .61rem; font-style: normal; }
.account-quick-menu nav { display: grid; gap: 3px; padding: 7px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.account-quick-menu nav a, .account-quick-menu form button { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 11px; padding: 8px 10px; border: 0; border-radius: 9px; color: #c6c9d8; background: transparent; font-size: .72rem; text-decoration: none; cursor: pointer; }
.account-quick-menu nav a:hover, .account-quick-menu form button:hover { color: #fff; background: #242635; }
.account-quick-menu nav span, .account-quick-menu form span { width: 22px; color: #a99fff; font-size: .95rem; text-align: center; }
.account-quick-menu form { padding: 7px; }

.drawer-backdrop { position: fixed; inset: 68px 0 0; z-index: 104; opacity: 0; visibility: hidden; background: rgba(5,6,12,.58); backdrop-filter: blur(3px); transition: opacity .2s,visibility .2s; }
.drawer-backdrop.open { opacity: 1; visibility: visible; }
.main-menu-drawer, .room-sidebar, .content-drawer { width: min(390px,calc(100vw - 22px)); position: fixed; inset: 68px auto 0 0; z-index: 110; display: flex; flex-direction: column; overflow: hidden; border: 0; border-right: 1px solid rgba(255,255,255,.1); background: #131421; box-shadow: 25px 0 70px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateX(-105%); transition: transform .24s cubic-bezier(.2,.8,.2,1),opacity .2s,visibility .2s; }
.main-menu-drawer.open, .room-sidebar.open, .content-drawer.open { opacity: 1; visibility: visible; transform: translateX(0); }
.main-menu-drawer > header, .sidebar-heading { min-height: 65px; height: auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.main-menu-drawer > header b, .sidebar-heading b { font-size: 1rem; }
.main-menu-drawer > header button, .sidebar-heading button { width: 35px; height: 35px; display: grid; place-items: center; border: 0; border-radius: 9px; color: #d5d7e2; background: transparent; font-size: 1.25rem; cursor: pointer; }
.main-menu-drawer > header button:hover, .sidebar-heading button:hover { background: rgba(255,255,255,.06); }
.main-menu-drawer > nav { flex: 1; display: grid; align-content: start; gap: 5px; overflow-y: auto; padding: 12px; }
.main-menu-drawer > nav > a, .main-menu-drawer > nav > button, .main-menu-drawer > form button { width: 100%; min-height: 55px; display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: center; gap: 11px; border: 0; border-radius: 11px; padding: 9px 11px; color: #c1c4d3; background: transparent; text-align: left; text-decoration: none; cursor: pointer; }
.main-menu-drawer > nav > button { grid-template-columns: 36px minmax(0,1fr); }
.main-menu-drawer > nav > button[data-content-nav] { grid-template-columns: 36px minmax(0,1fr) auto; }
.menu-unread-badge { grid-column: 3; grid-row: 1 / span 2; min-width: 20px; height: 20px; display: grid; place-items: center; align-self: center; padding: 0 5px; border-radius: 99px; color: #fff; background: linear-gradient(145deg,#ff718b,#df3659); box-shadow: 0 4px 12px rgba(255,75,111,.3); font-size: .57rem; font-weight: 800; font-style: normal; line-height: 1; }
.menu-unread-badge.is-new { animation: nav-ping-arrive .45s ease-out, nav-ping-jump 1.8s .45s ease-in-out infinite; }
.main-menu-drawer > nav > a:hover, .main-menu-drawer > nav > button:hover, .main-menu-drawer > nav > .active { color: #fff; background: #242635; }
.main-menu-drawer nav span, .main-menu-drawer form span { grid-row: 1 / span 2; color: #a99fff; font-size: 1.15rem; text-align: center; }
.main-menu-drawer nav b, .main-menu-drawer form b { font-size: .78rem; }
.main-menu-drawer nav small { color: var(--muted); font-size: .6rem; }
.main-menu-drawer > form { padding: 11px; border-top: 1px solid var(--line); }
.main-menu-drawer > form button { grid-template-columns: 36px minmax(0,1fr); }
.room-drawer-tools { display: grid; gap: 12px; padding: 14px 16px 7px; }
.room-drawer-tools .button { justify-self: start; }
.room-drawer-tools label { position: relative; }
.room-drawer-tools label span { position: absolute; left: 13px; top: 11px; color: #777d91; }
.room-drawer-tools input { height: 43px; padding-left: 37px; }
.room-sidebar .room-list { padding: 9px 16px 20px; }
.room-sidebar .room-list > a { min-height: 84px; grid-template-columns: 52px minmax(0,1fr) auto auto; margin-bottom: 9px; padding: 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background-image: linear-gradient(90deg,rgba(15,16,27,.91),rgba(15,16,27,.48)),var(--room-banner,linear-gradient(#1a1c29,#1a1c29)); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.room-sidebar .room-list > a:hover, .room-sidebar .room-list > a.active { border-color: color-mix(in srgb,var(--primary) 42%,transparent); background-image: linear-gradient(90deg,rgba(29,31,45,.9),rgba(29,31,45,.5)),var(--room-banner,linear-gradient(#232533,#232533)); box-shadow: 0 9px 28px rgba(0,0,0,.28),inset 3px 0 var(--primary); }
.room-sidebar .room-list > a[hidden] { display: none; }
.room-sidebar .room-list .room-icon { width: 50px; height: 50px; border-radius: 13px; }
.room-sidebar .room-list b { color: #f2f3fa; font-size: .83rem; text-shadow: 0 2px 7px rgba(0,0,0,.7); }
.room-sidebar .room-list small { color: #b7bac8; font-size: .64rem; text-shadow: 0 2px 7px rgba(0,0,0,.8); }

.content-drawer { width: min(410px,calc(100vw - 22px)); background: #111322; }
.content-drawer .sidebar-heading > span { min-width: 0; display: grid; gap: 3px; }
.content-drawer .sidebar-heading small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .59rem; font-weight: 500; }
.content-drawer-tools { display: flex; align-items: center; padding: 13px 14px 8px; }
.drawer-add-button { min-height: 38px; padding: 8px 13px; border-radius: 9px; }
.content-drawer-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 10px 24px; }
.wall-drawer-feed, .news-drawer-feed { display: grid; gap: 11px; }
.drawer-wall-post { padding: 12px; border-radius: 13px; }
.drawer-wall-post > header { align-items: center; }
.drawer-wall-post > header .avatar { width: 34px; height: 34px; }
.drawer-wall-post > header strong { font-size: .74rem; }
.drawer-wall-post > header small { font-size: .57rem; }
.drawer-wall-post > p { margin: 11px 0; font-size: .78rem; line-height: 1.52; }
.drawer-wall-post .wall-media { max-height: 390px; margin-top: 9px; border-radius: 10px; }
.drawer-wall-post .comments { max-height: 235px; overflow-y: auto; }
.drawer-wall-post .comments p { font-size: .68rem; }
.drawer-wall-post .comment-form input { min-width: 0; }
.news-drawer-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg,#191b28,#151720); }
.news-drawer-cover { display: block; width: 100%; max-height: 220px; object-fit: cover; }
.news-drawer-copy { padding: 13px; }
.news-drawer-copy h2 { margin: 10px 0 5px; color: #f0f1f8; font-size: .94rem; line-height: 1.28; }
.news-drawer-copy .news-summary { margin: 0 0 8px; font-size: .72rem; }
.news-drawer-body-copy { color: #aeb2c3; font-size: .7rem; line-height: 1.58; white-space: normal; }
.news-drawer-copy footer { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.news-drawer-copy footer > span:last-child { display: grid; gap: 1px; }
.news-drawer-copy footer b { font-size: .65rem; }
.news-drawer-copy footer small { color: var(--faint); font-size: .55rem; }
.drawer-empty { min-height: 230px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 24px; color: var(--muted); text-align: center; }
.drawer-empty > span { color: #a99fff; font-size: 2.2rem; }
.drawer-empty b { color: #f0f1f8; font-size: .83rem; }
.drawer-empty p { max-width: 270px; margin: 0; font-size: .68rem; line-height: 1.55; }

.drawer-compose-modal[hidden] { display: none; }
.drawer-compose-modal { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 18px; }
.drawer-compose-backdrop { position: absolute; inset: 0; border: 0; background: rgba(4,5,11,.68); backdrop-filter: blur(5px); }
.drawer-compose-window { width: min(520px,calc(100vw - 28px)); position: relative; z-index: 1; overflow: hidden; border: 1px solid rgba(199,113,170,.42); border-radius: 18px; background: #121321; box-shadow: 0 28px 95px rgba(0,0,0,.7); animation: cove-panel-in .2s ease both; }
.drawer-compose-window > header { min-height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 12px 17px; }
.drawer-compose-window > header b { font-size: .88rem; }
.drawer-compose-window > header button { width: 34px; height: 34px; border: 0; border-radius: 9px; color: #f0f1f8; background: transparent; font-size: 1.25rem; cursor: pointer; }
.drawer-compose-window > header button:hover { background: rgba(255,255,255,.06); }
.drawer-compose-window form { display: grid; gap: 11px; padding: 0 17px 16px; }
.drawer-compose-window form > textarea { min-height: 120px; resize: vertical; }
.drawer-compose-window form > footer { display: flex; align-items: center; gap: 9px; min-height: 40px; }
.drawer-compose-window form > footer .button { margin-left: auto; }
.compose-icon-button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; color: #a8a0ff; background: rgba(118,104,255,.1); cursor: pointer; }
.compose-icon-button input { display: none; }
.news-compose-window { width: min(610px,calc(100vw - 28px)); max-height: min(88dvh,760px); overflow-y: auto; }
.drawer-compose-window label { display: grid; gap: 5px; color: #bfc2d2; font-size: .65rem; }
.drawer-compose-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.compose-file-field { min-height: 42px; display: flex; align-items: center; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; color: #a8a0ff; background: #0f1018; cursor: pointer; }
.compose-file-field input { display: none; }
.compose-image-preview[hidden] { display: none; }
.compose-image-preview { position: relative; min-height: 96px; display: grid; grid-template-columns: 104px minmax(0,1fr) 32px; align-items: center; gap: 11px; overflow: hidden; padding: 9px; border: 1px solid rgba(199,113,170,.38); border-radius: 12px; background: rgba(8,9,16,.72); }
.compose-image-preview img { width: 104px; height: 78px; display: block; object-fit: cover; border-radius: 9px; border: 1px solid rgba(255,255,255,.09); background: #0b0c13; }
.compose-image-preview > span { min-width: 0; overflow: hidden; color: #bfc2d2; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.compose-image-preview > button { width: 30px; height: 30px; align-self: start; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(210,91,146,.9); box-shadow: 0 4px 14px rgba(0,0,0,.3); font-size: 1rem; line-height: 1; cursor: pointer; }
.compose-image-preview > button:hover { background: #e273a8; }
.compose-image-preview-news { grid-template-columns: 150px minmax(0,1fr) 32px; }
.compose-image-preview-news img { width: 150px; height: 86px; }
.drawer-compose-window .check-label { display: flex; align-items: center; gap: 7px; }
.drawer-compose-window .check-label input { width: auto; }

.app-grid, .app-grid.rooms-collapsed { height: calc(100vh - 68px); grid-template-columns: minmax(0,1fr) 245px; }
.app-grid.people-collapsed, .app-grid.rooms-collapsed.people-collapsed { grid-template-columns: minmax(0,1fr) 0; }
.app-grid.rooms-collapsed .room-sidebar { opacity: 0; visibility: hidden; pointer-events: auto; }
.stage { grid-column: 1; }
.people-panel { grid-column: 2; }
.people-close { display: grid !important; place-items: center; }
.message-list { min-height: 100%; padding-top: 16px; }
.room-hero, .mobile-room-tabs, .stage-header { display: none !important; }

.room-settings { display: none; }
.room-settings.dialog-open { width: min(820px,calc(100vw - 30px)); max-height: min(84vh,760px); position: fixed; inset: 50% auto auto 50%; z-index: 151; display: block; overflow-y: auto; margin: 0; transform: translate(-50%,-50%); border-color: rgba(139,126,255,.38); box-shadow: 0 0 0 100vmax rgba(4,5,10,.72),0 30px 100px rgba(0,0,0,.7); }

.profile-modal[hidden] { display: none; }
.profile-modal { position: fixed; inset: 0; z-index: 270; display: grid; place-items: center; padding: 28px; }
.profile-modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(5,6,12,.73); backdrop-filter: blur(7px); cursor: default; }
.profile-modal-window { width: min(760px,calc(100vw - 32px)); max-height: min(90dvh,900px); position: relative; z-index: 1; overflow-y: auto; border: 1px solid color-mix(in srgb,var(--primary) 55%,transparent); border-radius: 22px; background: #10111a; box-shadow: 0 0 34px color-mix(in srgb,var(--primary) 26%,transparent),0 35px 110px rgba(0,0,0,.72); }
.profile-modal-toolbar { position: sticky; top: 10px; z-index: 12; display: flex; justify-content: flex-end; gap: 6px; height: 0; padding: 0 12px; }
.profile-modal-toolbar button { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 11px; color: #f2f0ff; background: rgba(20,21,31,.82); box-shadow: 0 7px 24px rgba(0,0,0,.32); backdrop-filter: blur(12px); font-size: 1rem; cursor: pointer; }
.profile-modal-toolbar button[hidden] { display: none; }
.profile-modal-content .profile-page { min-height: 0; padding-bottom: 22px; }
.profile-modal-content .profile-cover { border-radius: 21px 21px 0 0; }
.profile-modal-content .profile-editor { display: none; }
.profile-modal.editing-profile .profile-stats, .profile-modal.editing-profile .profile-grid, .profile-modal.editing-profile .profile-actions { display: none; }
.profile-modal.editing-profile .profile-editor { display: block; }
.profile-modal-loading { min-height: 330px; display: grid; place-items: center; color: var(--muted); font-size: .8rem; }
.profile-modal-loading.error { color: #ff8da1; }
body.modal-open { overflow: hidden; }

/* Compact account, room, and member action menus */
.account-quick-menu nav button { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 11px; padding: 8px 10px; border: 0; border-radius: 9px; color: #c6c9d8; background: transparent; font-size: .72rem; text-align: left; cursor: pointer; }
.account-quick-menu nav button:hover { color: #fff; background: #242635; }
.account-quick-menu nav button span { width: 22px; color: #a99fff; font-size: .95rem; text-align: center; }
.account-quick-menu nav button i { margin-left: auto; color: #8f94a8; font-size: 1.15rem; font-style: normal; }
.account-room-options[hidden] { display: none; }
.account-quick-menu.room-options-open .account-menu-main { display: none; }
.account-room-options > header { min-height: 54px; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.account-room-options > header button { width: 31px; height: 31px; border: 0; border-radius: 8px; color: #cbc7ff; background: transparent; font-size: 1.25rem; cursor: pointer; }
.account-room-options > header button:hover { background: #252738; }
.account-room-options > header b { font-size: .78rem; }
.account-room-options nav { border: 0; padding: 7px; }

.room-control-modal[hidden] { display: none; }
.room-control-modal { position: fixed; inset: 0; z-index: 158; display: grid; place-items: center; padding: 18px; }
.room-control-backdrop { position: absolute; inset: 0; border: 0; background: rgba(4,5,11,.7); backdrop-filter: blur(5px); }
.room-control-window { width: min(470px,calc(100vw - 24px)); max-height: min(78dvh,680px); position: relative; z-index: 1; overflow-y: auto; border: 1px solid rgba(139,126,255,.32); border-radius: 18px; padding-bottom: 14px; background: #121321; box-shadow: 0 28px 90px rgba(0,0,0,.68); animation: cove-panel-in .2s ease both; }
.room-control-window > header { min-height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 11px 15px; border-bottom: 1px solid var(--line); }
.room-control-window > header span { display: grid; gap: 3px; }
.room-control-window > header small { color: var(--muted); font-size: .6rem; }
.room-control-window > header b { font-size: .86rem; }
.room-control-window > header button { width: 34px; height: 34px; border: 0; border-radius: 9px; color: #eee; background: transparent; font-size: 1.2rem; cursor: pointer; }
.room-control-window > div { padding: 17px; }
.room-control-window h3 { margin: 0 0 8px; font-size: .9rem; }
.room-control-window p { color: var(--muted); font-size: .7rem; }
.room-progress-orb { width: 116px; height: 116px; display: grid; place-items: center; align-content: center; gap: 2px; margin: 8px auto 18px; border: 1px solid rgba(139,126,255,.4); border-radius: 50%; background: radial-gradient(circle,rgba(118,104,255,.32),rgba(118,104,255,.05) 65%); box-shadow: 0 0 35px rgba(118,104,255,.2); }
.room-progress-orb b { font-size: 2rem; }
.room-progress-orb small { color: var(--muted); font-size: .62rem; }
.room-control-list { display: grid; gap: 6px; margin-top: 12px; }
.room-control-list > button { width: 100%; min-height: 57px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 8px; border: 1px solid transparent; border-radius: 11px; color: #e8e8f1; background: #191a29; text-align: left; cursor: pointer; }
.room-control-list > button:hover { border-color: rgba(139,126,255,.35); background: #222438; }
.room-control-list > button > span { display: grid; gap: 2px; }
.room-control-list > button b { font-size: .72rem; }
.room-control-list > button small { color: var(--muted); font-size: .6rem; }
.room-control-list > button i { color: #8f94aa; font-style: normal; }
.room-control-list:has(> button) .room-actions-empty { display: none; }

.member-action-popover[hidden] { display: none; }
.member-action-popover { position: fixed; z-index: 255; max-height: min(76dvh,660px); overflow-y: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; color: #eff0f8; background: #141522; box-shadow: 0 24px 75px rgba(0,0,0,.72); animation: cove-panel-in .18s ease both; }
.member-action-popover > header { position: relative; min-height: 118px; display: grid; grid-template-columns: 52px minmax(0,1fr) 32px; align-items: end; gap: 10px; overflow: hidden; padding: 57px 11px 11px; border-bottom: 1px solid var(--line); background-color: #1a1b2b; background-image: linear-gradient(180deg,rgba(9,10,18,.05) 0%,rgba(9,10,18,.22) 43%,rgba(9,10,18,.92) 100%), radial-gradient(circle at 18% 20%,color-mix(in srgb,var(--member-accent,#7668ff) 42%,transparent),transparent 46%), var(--member-cover,none); background-size: cover,cover,cover; background-position: center,center,center; }
.member-action-popover > header::after { content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 -1px rgba(255,255,255,.05); }
.member-action-popover > header > * { position:relative; z-index:1; }
.member-action-popover > header .avatar { width:52px; height:52px; border:2px solid rgba(255,255,255,.88); border-radius:15px; box-shadow:0 8px 24px rgba(0,0,0,.38); }
.member-action-popover > header > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; padding-bottom:2px; }
.member-action-popover > header b, .member-action-popover > header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow:0 1px 8px rgba(0,0,0,.82); }
.member-action-popover > header b { font-size: .82rem; }
.member-action-popover > header small { color: #d9dbea; font-size: .59rem; }
.member-action-popover > header button { align-self:start; width:31px; height:31px; margin-top:-47px; border:1px solid rgba(255,255,255,.12); border-radius:9px; color:#f4f5fb; background:rgba(10,11,18,.56); backdrop-filter:blur(8px); font-size:1.05rem; cursor:pointer; }
[data-member-avatar-trigger] { cursor:pointer; }
[data-member-avatar-trigger]:hover { filter:brightness(1.06); }
.member-action-popover > nav { display: flex; gap: 3px; padding: 7px; border-bottom: 1px solid var(--line); }
.member-action-popover > nav button { flex: 1; min-height: 34px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: .65rem; font-weight: 750; cursor: pointer; }
.member-action-popover > nav button.active { color: #fff; background: #292b3e; }
.member-action-content { padding: 7px; }
.member-action-content section { display: grid; gap: 5px; }
.member-action-content section[hidden] { display: none; }
.member-action-content a, .member-action-content form > button, .member-action-content section > button { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 9px; padding: 8px 10px; color: #dfe0e9; background: #1a1b2a; font-size: .7rem; text-align: left; text-decoration: none; cursor: pointer; }
.member-action-content a:hover, .member-action-content form > button:hover, .member-action-content section > button:hover { color: #fff; background: #25273a; }
.member-action-content a span, .member-action-content form > button span, .member-action-content section > button span { width: 22px; color: #aaa0ff; text-align: center; }
.member-action-content form { display: grid; gap: 7px; margin: 0; padding: 7px; border-radius: 10px; background: #181927; }
.member-action-content form label { gap: 5px; font-size: .62rem; }
.member-action-content form input, .member-action-content form select { min-height: 37px; }
.member-action-buttons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.member-action-buttons button { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; color: #dddfea; background: #242638; font-size: .62rem; cursor: pointer; }
.member-action-buttons .danger-option { color: #ff9aaa; background: rgba(255,98,125,.08); }
.member-action-note, .member-rating { min-height: 43px; display: grid; grid-template-columns: 25px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 9px; color: var(--muted); background: #191a29; font-size: .65rem; }
.member-rating span { color: #ffd166; }
.member-rating small { color: var(--faint); }

@media (max-width: 1220px) {
  .app-grid, .app-grid.rooms-collapsed, .app-grid.people-collapsed, .app-grid.rooms-collapsed.people-collapsed { grid-template-columns: minmax(0,1fr); }
  .app-grid.people-collapsed .people-panel { opacity: 1; visibility: visible; }
  .people-panel.mobile-open { top: 78px; }
}

@media (max-width: 720px) {
  .topbar { height: 64px; grid-template-columns: minmax(0,1fr) auto; padding: 0 9px; }
  .topbar-leading { gap: 7px; }
  .top-menu-button { width: 36px; height: 36px; }
  .top-brand > span:last-child { display: none; }
  .top-actions { gap: 4px; }
  .account-chip { min-width: 0; padding: 3px; }
  .account-chip > span:last-child { display: none; }
  .people-top-button { display: grid !important; }
  .drawer-backdrop { top: 64px; }
  .main-menu-drawer, .room-sidebar { width: min(92vw,390px); top: 64px; }
  .content-drawer { width: min(94vw,410px); top: 64px; }
  .top-popover { width: min(330px,calc(100vw - 18px)); position: fixed; top: 61px; right: 9px; }
  .app-grid, .app-grid.rooms-collapsed, .app-grid.people-collapsed, .app-grid.rooms-collapsed.people-collapsed { height: calc(100dvh - 64px); grid-template-columns: minmax(0,1fr); }
  .stage { padding-bottom: 0; }
  .message-list { min-height: 100%; padding: 9px 5px calc(92px + env(safe-area-inset-bottom)); }
  .composer { bottom: env(safe-area-inset-bottom); margin: -77px 7px 8px; }
  .people-panel.mobile-open { max-height: min(72dvh,610px); inset: 72px 8px auto 8px; }
  .room-sidebar .room-list { padding-inline: 11px; }
  .content-drawer-scroll { padding-inline: 8px; }
  .drawer-compose-modal { padding: 8px; }
  .drawer-compose-window, .news-compose-window { width: 100%; max-height: calc(100dvh - 16px); }
  .drawer-compose-row { grid-template-columns: 1fr; }
  .profile-modal { padding: 8px; }
  .profile-modal-window { width: 100%; max-height: calc(100dvh - 16px); border-radius: 18px; }
  .profile-modal-content .profile-cover { height: 180px; border-radius: 17px 17px 0 0; }
  .profile-modal-content .profile-identity { grid-template-columns: 92px minmax(0,1fr); }
  .profile-modal-content .profile-rank { grid-column: 1 / -1; }
  .profile-modal-content .profile-editor, .profile-modal-content .profile-grid, .profile-modal-content .profile-stats, .profile-modal-content .profile-actions, .profile-modal-content .profile-music { margin-left: 10px; margin-right: 10px; }
  .room-settings.dialog-open { width: calc(100vw - 16px); max-height: calc(100dvh - 20px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* v23: profile social controls are isolated from the original v20 profile layout. */
.profile-like-anchor {
  position: relative;
  z-index: 14;
  height: 0;
  pointer-events: none;
}
.profile-like-button {
  position: absolute;
  top: 14px;
  left: 14px;
  min-width: 66px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: #fff;
  background: rgba(18,19,29,.72);
  box-shadow: 0 7px 22px rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
  cursor: pointer;
  pointer-events: auto;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.profile-like-button:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.34); background: rgba(27,29,42,.86); }
.profile-like-button svg { width: 18px; height: 18px; color: #c8cbd7; transition: color .16s ease, transform .16s ease; }
.profile-like-button b { font-size: .76rem; }
.profile-like-button.liked { border-color: rgba(55,229,184,.55); color: #caffef; background: rgba(25,132,103,.82); box-shadow: 0 7px 22px rgba(55,229,184,.2); }
.profile-like-button.liked svg { color: #52efbd; transform: scale(1.08); }

.rating-modal { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 18px; }
.rating-modal[hidden] { display: none !important; }
.rating-modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(5,6,10,.7); backdrop-filter: blur(5px); cursor: default; }
.rating-dialog { width: min(360px,calc(100vw - 32px)); position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px; padding: 24px 22px 20px; border: 1px solid var(--line); border-radius: 16px; background: #1b1c24; box-shadow: 0 26px 70px rgba(0,0,0,.5); text-align: center; }
.rating-dialog h3 { margin: 0; font-size: .94rem; }
.rating-dialog > p { min-height: 16px; margin: -5px 0 0; color: var(--muted); font-size: .7rem; }
.rating-stars { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 0 4px; }
.rating-stars button { width: 42px; height: 42px; border: 0; padding: 0; color: #555860; background: transparent; font-size: 2rem; line-height: 1; cursor: pointer; transition: color .12s ease, transform .12s ease, filter .12s ease; }
.rating-stars button.active, .rating-stars button.preview { color: #ffd166; filter: drop-shadow(0 3px 8px rgba(255,209,102,.2)); }
.rating-stars button:hover { transform: scale(1.12); }
.rating-cancel { border: 0; padding: 3px 6px; color: #aaaebb; background: transparent; font-size: .72rem; text-decoration: underline; cursor: pointer; }
.rating-cancel:hover { color: #fff; }

@media (max-width: 720px) {
  .profile-like-button { top: 12px; left: 12px; min-width: 60px; height: 32px; padding: 0 10px; }
}

/* v30: owner rank manager + room deletion controls */
.rank-create-card { margin-bottom: 16px; }
.rank-create-card > form { display: grid; gap: 14px; padding: 18px; }
.rank-create-fields { display: grid; grid-template-columns: minmax(180px,1.25fr) minmax(120px,.55fr) minmax(120px,.55fr) minmax(210px,1fr); gap: 10px; align-items: start; }
.rank-create-fields label { display: grid; gap: 6px; color: var(--muted); font-size: .68rem; }
.rank-create-fields label > small { color: var(--faint); font-size: .58rem; line-height: 1.35; }
.rank-create-fields input { width: 100%; }
.rank-create-fields input[type="color"] { min-height: 39px; padding: 4px; }
.rank-staff-toggle { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: #141621; }
.rank-staff-toggle input { width: auto; }
.rank-staff-toggle span { display: grid; gap: 2px; }
.rank-staff-toggle b { color: var(--text); font-size: .72rem; }
.rank-staff-toggle small { color: var(--faint); font-size: .61rem; }
.rank-permission-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.rank-permission-grid label { display: flex; align-items: flex-start; gap: 8px; min-height: 72px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #141621; cursor: pointer; }
.rank-permission-grid input { width: auto; margin-top: 3px; }
.rank-permission-grid span { display: grid; gap: 3px; }
.rank-permission-grid b { color: var(--text); font-size: .68rem; }
.rank-permission-grid small { color: var(--faint); font-size: .58rem; line-height: 1.4; }
.rank-manager-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.rank-manager-card { min-width: 0; padding: 16px; border: 1px solid color-mix(in srgb,var(--rank) 24%,var(--line)); border-radius: 17px; background: linear-gradient(145deg,color-mix(in srgb,var(--rank) 8%,#191b28),#151720 62%); }
.rank-manager-head { display: flex; align-items: center; gap: 13px; margin-bottom: 13px; }
.rank-manager-head img { width: 68px; height: 68px; object-fit: contain; filter: drop-shadow(0 10px 15px rgba(0,0,0,.32)); }
.rank-manager-head > span { min-width: 0; }
.rank-manager-head small { color: var(--faint); font-size: .59rem; text-transform: uppercase; }
.rank-manager-head h2 { margin: 4px 0 2px; color: var(--rank); font-size: 1.02rem; }
.rank-manager-head p { margin: 0; color: var(--muted); font-size: .63rem; }
.rank-edit-form { display: grid; gap: 10px; }
.rank-edit-form .rank-create-fields { grid-template-columns: minmax(145px,1.2fr) 92px 90px minmax(145px,1fr); }
.rank-permission-grid.compact { grid-template-columns: repeat(2,minmax(0,1fr)); }
.rank-permission-grid.compact label { min-height: 64px; padding: 9px; }
.rank-protected-note { padding: 10px 12px; border: 1px solid color-mix(in srgb,var(--rank) 28%,var(--line)); border-radius: 11px; color: var(--muted); background: color-mix(in srgb,var(--rank) 7%,#141621); font-size: .64rem; line-height: 1.45; }
.rank-delete-form { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.rank-permission-summary { display: flex; flex-wrap: wrap; gap: 6px; }
.rank-permission-summary span { padding: 5px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #141621; font-size: .59rem; }
.danger-button { border-color: rgba(255,91,112,.38) !important; color: #ff8d9d !important; }
.danger-button:hover { background: rgba(255,91,112,.09) !important; }
.room-admin-list article { align-items: center; }
.room-admin-info { flex: 1; }
.room-admin-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.room-admin-actions form { margin: 0; }
.protected-room-label { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--faint); font-size: .58rem; white-space: nowrap; }

@media (max-width: 1100px) {
  .rank-create-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rank-permission-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rank-manager-list { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .rank-create-fields, .rank-edit-form .rank-create-fields, .rank-permission-grid, .rank-permission-grid.compact { grid-template-columns: 1fr; }
  .rank-manager-head img { width: 56px; height: 56px; }
  .room-admin-list article { align-items: flex-start; flex-wrap: wrap; }
  .room-admin-actions { width: 100%; margin-left: 0; padding-left: 0; }
}

/* v31: rank icons in chat/user list + room/DM image attachments */
.chat-rank-icon { width: 17px; height: 17px; flex: 0 0 17px; object-fit: contain; border-radius: 4px; }
.userlist-rank-icon { width: 22px; height: 22px; object-fit: contain; border-radius: 5px; }
.online-list > a { grid-template-columns: 36px minmax(0,1fr) 22px auto; }

.composer { grid-template-columns: 39px 39px minmax(0,1fr) 41px; }
.composer-upload-button,
.dm-compose .composer-upload-button,
.dm-compose .dm-emoji-button { width: 39px; height: 40px; display: grid; place-items: center; align-self: end; border: 0; border-radius: 10px; color: #969caf; background: transparent; cursor: pointer; }
.composer-upload-button:hover,
.dm-compose .composer-upload-button:hover,
.dm-compose .dm-emoji-button:hover { color: #d7d9e6; background: rgba(255,255,255,.055); }
.composer-upload-button svg { width: 20px; height: 20px; }
.composer-upload-button input { display: none; }
.chat-composer-image-preview { grid-column: 1 / -1; min-width: 0; display: grid; grid-template-columns: 52px minmax(0,1fr) 30px; align-items: center; gap: 9px; padding: 7px 8px; border: 1px solid rgba(118,104,255,.2); border-radius: 10px; background: rgba(118,104,255,.07); }
.chat-composer-image-preview[hidden] { display: none; }
.chat-composer-image-preview img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; }
.chat-composer-image-preview span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #aeb3c7; font-size: .66rem; }
.chat-composer-image-preview button { width: 30px !important; height: 30px !important; border-radius: 8px !important; color: #c9ccda !important; background: rgba(255,255,255,.06) !important; }

.chat-image-attachment { width: fit-content; max-width: min(480px, 100%); display: block; margin-top: 6px; border-radius: 12px; overflow: hidden; background: #0f1018; }
.chat-image-attachment img { display: block; max-width: 100%; max-height: 430px; object-fit: contain; }

.dm-compose { grid-template-columns: 39px 39px minmax(0,1fr) auto; }
.dm-compose .composer-reply,
.dm-compose .chat-composer-image-preview { grid-column: 1 / -1; }
.dm-compose .dm-emoji-button { padding: 0; font-size: 1.05rem; }
.dm-image-attachment { max-width: min(420px, 100%); display: grid; gap: 4px; color: inherit; text-decoration: none; }
.dm-image-attachment img { display: block; max-width: 100%; max-height: 390px; border-radius: 13px; object-fit: contain; background: #0f1018; }
.dm-image-attachment small { justify-self: end; padding-right: 3px; color: #747b90; font-size: .57rem; }
.dm-list article.mine .dm-image-attachment small { color: rgba(255,255,255,.55); }

@media (max-width: 760px) {
  .composer { grid-template-columns: 36px 36px minmax(0,1fr) 40px; }
  .composer-upload-button,
  .dm-compose .composer-upload-button,
  .dm-compose .dm-emoji-button { width: 36px; height: 39px; }
  .dm-compose { grid-template-columns: 36px 36px minmax(0,1fr) auto; gap: 5px; padding: 8px; }
  .userlist-rank-icon { width: 20px; height: 20px; }
  .online-list > a { grid-template-columns: 34px minmax(0,1fr) 20px auto; }
  .chat-image-attachment, .dm-image-attachment { max-width: 100%; }
  .chat-image-attachment img, .dm-image-attachment img { max-height: 320px; }
}

/* v32: dedicated staff moderation dialogs + restriction screens */
.staff-action-summary { display: grid; gap: 3px; margin-bottom: 9px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px; background: #151721; }
.staff-action-summary b { color: var(--text); font-size: .68rem; }
.staff-action-summary small { color: var(--faint); font-size: .59rem; line-height: 1.4; }
.staff-moderation-buttons form { display: contents; }
.staff-moderation-buttons button { width: 100%; }

.staff-moderation-modal { position: fixed; inset: 0; z-index: 235; display: grid; place-items: center; padding: 18px; }
.staff-moderation-modal[hidden] { display: none !important; }
.staff-moderation-backdrop { position: absolute; inset: 0; border: 0; background: rgba(5,6,10,.76); backdrop-filter: blur(6px); cursor: default; }
.staff-moderation-dialog { width: min(430px,calc(100vw - 28px)); position: relative; z-index: 1; overflow: hidden; border: 1px solid rgba(139,126,255,.28); border-radius: 18px; background: linear-gradient(155deg,#1d1f2c,#151720 68%); box-shadow: 0 28px 90px rgba(0,0,0,.62); }
.staff-moderation-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 18px 15px; border-bottom: 1px solid var(--line); }
.staff-moderation-dialog > header > span { display: grid; gap: 2px; }
.staff-moderation-dialog > header small { color: #9187ff; font-size: .58rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.staff-moderation-dialog > header h3 { margin: 2px 0 0; font-size: 1rem; }
.staff-moderation-dialog > header p { margin: 2px 0 0; color: var(--muted); font-size: .65rem; }
.staff-moderation-dialog > header p b { color: #f1f2f8; }
.staff-moderation-dialog > header > button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 9px; color: #bfc2cf; background: #242637; cursor: pointer; }
.staff-moderation-dialog form { display: grid; gap: 13px; padding: 17px 18px 18px; }
.staff-moderation-dialog label { display: grid; gap: 6px; color: var(--muted); font-size: .66rem; font-weight: 700; }
.staff-moderation-dialog select,
.staff-moderation-dialog textarea { width: 100%; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: #11131c; }
.staff-moderation-dialog select { min-height: 41px; padding: 0 11px; }
.staff-moderation-dialog textarea { min-height: 96px; resize: vertical; padding: 10px 11px; font: inherit; line-height: 1.45; }
.staff-moderation-dialog label > small { color: var(--faint); font-size: .58rem; font-weight: 400; line-height: 1.45; }
.staff-moderation-dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }
.staff-moderation-dialog footer .button { min-width: 108px; }
.staff-moderation-dialog .danger-moderation-submit { border-color: rgba(255,82,105,.48) !important; color: #fff !important; background: linear-gradient(135deg,#e84661,#b92943) !important; box-shadow: 0 9px 24px rgba(219,55,83,.2); }
.staff-moderation-dialog .danger-moderation-submit:hover { filter: brightness(1.08); }

.restriction-body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px; overflow: hidden; background: radial-gradient(circle at 50% -10%,rgba(118,104,255,.19),transparent 38%),#0e0f16; color: #f3f4fb; }
.restriction-shell { width: min(520px,100%); }
.restriction-card { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 13px; padding: 38px 32px 30px; border: 1px solid rgba(255,255,255,.09); border-radius: 24px; background: linear-gradient(155deg,rgba(30,32,45,.98),rgba(17,18,27,.98)); box-shadow: 0 34px 110px rgba(0,0,0,.58); text-align: center; }
.restriction-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg,transparent,#8c80ff,transparent); }
.restriction-card.is-ban::before { background: linear-gradient(90deg,transparent,#ff526f,transparent); }
.restriction-image-wrap { width: 112px; height: 112px; position: relative; display: grid; place-items: center; margin-bottom: 3px; border: 1px solid rgba(139,126,255,.23); border-radius: 30px; background: rgba(118,104,255,.08); box-shadow: inset 0 0 34px rgba(118,104,255,.08); }
.restriction-card.is-ban .restriction-image-wrap { border-color: rgba(255,82,111,.25); background: rgba(255,82,111,.07); }
.restriction-image-wrap img { width: 76px; height: 76px; filter: drop-shadow(0 12px 20px rgba(0,0,0,.3)); }
.restriction-state-icon { width: 34px; height: 34px; position: absolute; right: -7px; bottom: -6px; display: grid; place-items: center; border: 4px solid #191b27; border-radius: 50%; color: #fff; background: #7768ff; font-size: 1rem; font-weight: 900; }
.restriction-card.is-ban .restriction-state-icon { background: #e7435f; }
.restriction-card .eyebrow { margin: 3px 0 -3px; color: #8f85ff; }
.restriction-card.is-ban .eyebrow { color: #ff788e; }
.restriction-card h1 { margin: 0; font-size: clamp(1.55rem,5vw,2.25rem); letter-spacing: -.035em; }
.restriction-card > p { max-width: 410px; margin: 0; color: #a7abba; font-size: .78rem; line-height: 1.6; }
.restriction-reason { width: 100%; display: grid; gap: 5px; margin-top: 5px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(0,0,0,.16); text-align: left; }
.restriction-reason small { color: #777d90; font-size: .57rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.restriction-reason strong { color: #e9eaf1; font-size: .76rem; line-height: 1.5; overflow-wrap: anywhere; }
.restriction-countdown { width: 100%; display: grid; gap: 7px; margin-top: 2px; padding: 15px; border: 1px solid rgba(118,104,255,.18); border-radius: 14px; background: rgba(118,104,255,.06); }
.restriction-countdown small { color: #8f94a8; font-size: .59rem; }
.restriction-countdown b { color: #c7c1ff; font-size: 1.45rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.restriction-card footer { width: 100%; display: flex; justify-content: center; margin-top: 4px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.065); }
.restriction-card footer button { border: 0; color: #8f94a8; background: transparent; font-size: .65rem; text-decoration: underline; cursor: pointer; }
.restriction-card footer button:hover { color: #fff; }

@media (max-width: 560px) {
  .staff-moderation-dialog form, .staff-moderation-dialog > header { padding-left: 14px; padding-right: 14px; }
  .staff-moderation-dialog footer { flex-direction: column-reverse; }
  .staff-moderation-dialog footer .button { width: 100%; }
  .restriction-body { padding: 14px; }
  .restriction-card { padding: 30px 20px 24px; border-radius: 20px; }
  .restriction-image-wrap { width: 96px; height: 96px; border-radius: 25px; }
  .restriction-image-wrap img { width: 65px; height: 65px; }
}

/* v33: owner branding + temporary ban countdown */
.brand-mark { overflow: hidden; }
.brand-mark.brand-mark-image { padding: 0; background: #171925; }
.brand-mark.brand-mark-image img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.restriction-image-wrap .brand-mark { width: 76px; height: 76px; border-radius: 22px; font-size: 2rem; }
.restriction-image-wrap .brand-mark.brand-mark-image img { width: 100%; height: 100%; object-fit: cover; }
.brand-settings-preview { display: flex; align-items: center; gap: 12px; margin: 2px 0 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #151721; }
.brand-settings-preview > span:last-child { display: grid; gap: 2px; }
.brand-settings-preview small { color: var(--faint); font-size: .6rem; }

/* v36: floating in-chat private messenger */
.message-menu-caption { color: #777d91; font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.dm-minimized-stack { display: flex; align-items: center; gap: 5px; }
.dm-minimized-avatar { width: 38px; height: 38px; position: relative; display: grid; place-items: center; padding: 0; border: 1px solid rgba(118,104,255,.28); border-radius: 12px; background: #1a1c28; box-shadow: 0 8px 24px rgba(0,0,0,.22); cursor: pointer; }
.dm-minimized-avatar:hover { border-color: rgba(118,104,255,.58); transform: translateY(-1px); }
.dm-minimized-avatar .avatar { width: 31px; height: 31px; border-radius: 9px; }
.sr-only { width: 1px !important; height: 1px !important; position: absolute !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; }

.dm-floating-window { width: 440px; height: 620px; min-width: 360px; min-height: 420px; max-width: min(680px,calc(100vw - 20px)); max-height: calc(100vh - 86px); position: fixed; right: 24px; bottom: 24px; z-index: 220; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; overflow: hidden; resize: both; border: 1px solid rgba(139,126,255,.28); border-radius: 22px; background: linear-gradient(160deg,#191b29,#10121d 68%); box-shadow: 0 34px 110px rgba(0,0,0,.64), 0 0 0 1px rgba(255,255,255,.015) inset; }
.dm-floating-window[hidden] { display: none !important; }
.dm-floating-window.dragging { user-select: none; cursor: grabbing; }
.dm-floating-header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px 9px 12px; border-bottom: 1px solid var(--line); background: rgba(30,32,46,.98); cursor: grab; touch-action: none; }
.dm-floating-person { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.dm-floating-person > span:last-child { min-width: 0; display: grid; gap: 2px; }
.dm-floating-person b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.dm-floating-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .6rem; }
.dm-floating-controls { display: flex; align-items: center; gap: 5px; }
.dm-floating-controls > button, .dm-settings-wrap > button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: #c4c7d4; background: #242737; font-size: .92rem; cursor: pointer; }
.dm-floating-controls > button:hover, .dm-settings-wrap > button:hover { color: #fff; background: #2c2f43; }
.dm-settings-wrap { position: relative; }
.dm-settings-menu { width: 150px; position: absolute; right: 0; top: calc(100% + 7px); z-index: 6; display: grid; gap: 3px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #171925; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.dm-settings-menu[hidden] { display: none !important; }
.dm-settings-menu button { min-height: 36px; border: 0; border-radius: 8px; color: #c9ccda; background: transparent; text-align: left; padding: 0 10px; font: inherit; font-size: .68rem; cursor: pointer; }
.dm-settings-menu button:hover { background: #242737; }
.dm-settings-menu .danger-option { color: #ff8c9d; }

.dm-request-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid rgba(118,104,255,.2); background: rgba(118,104,255,.08); }
.dm-request-banner[hidden] { display: none !important; }
.dm-request-banner > span { display: grid; gap: 2px; }
.dm-request-banner b { font-size: .68rem; }
.dm-request-banner small { color: var(--muted); font-size: .58rem; }
.dm-request-banner > div { display: flex; gap: 5px; }

.dm-floating-list { min-height: 0; max-height: none; overflow-y: auto; padding: 14px 12px 18px; background: radial-gradient(circle at 50% -10%,rgba(118,104,255,.06),transparent 36%); }
.dm-floating-list article { max-width: 86%; }
.dm-floating-list article p { font-size: .76rem; }
.dm-loading-state { margin: auto; color: var(--muted); font-size: .72rem; }
.dm-floating-compose { grid-template-columns: 38px 38px minmax(0,1fr) 42px; gap: 6px; padding: 9px 10px 10px; border-top: 1px solid var(--line); background: rgba(18,20,30,.97); }
.dm-floating-compose[hidden] { display: none !important; }
.dm-floating-compose textarea { min-height: 42px; max-height: 96px; border-radius: 14px; }
.dm-floating-compose .dm-send-button { width: 42px; min-width: 42px; height: 42px; padding: 0; border-radius: 13px; font-size: 1rem; }
.dm-resize-grip { width: 14px; height: 14px; position: absolute; right: 3px; bottom: 3px; pointer-events: none; opacity: .38; background: linear-gradient(135deg,transparent 0 48%,#8f87bb 49% 56%,transparent 57% 67%,#8f87bb 68% 75%,transparent 76%); }

.dm-report-sheet { position: absolute; inset: 64px 0 0; z-index: 8; display: grid; place-items: end stretch; background: rgba(7,8,13,.66); backdrop-filter: blur(5px); }
.dm-report-sheet[hidden] { display: none !important; }
.dm-report-sheet form { display: grid; gap: 11px; padding: 15px; border-top: 1px solid rgba(139,126,255,.28); background: #181a27; box-shadow: 0 -22px 60px rgba(0,0,0,.45); }
.dm-report-sheet header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dm-report-sheet header > span { display: grid; gap: 3px; }
.dm-report-sheet header b { font-size: .8rem; }
.dm-report-sheet header small { color: var(--muted); font-size: .59rem; }
.dm-report-sheet header > button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; color: #c8cad5; background: #242737; cursor: pointer; }
.dm-report-sheet label { display: grid; gap: 5px; color: var(--muted); font-size: .64rem; }
.dm-report-sheet select, .dm-report-sheet textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: #10121b; }
.dm-report-sheet select { min-height: 39px; padding: 0 9px; }
.dm-report-sheet textarea { min-height: 96px; padding: 9px; resize: vertical; font: inherit; }
.dm-report-sheet footer { display: flex; justify-content: flex-end; gap: 7px; }
.conversation-report-transcript { max-height: 380px; overflow: auto; white-space: normal; }

@media (max-width: 760px) {
  .dm-minimized-avatar { width: 34px; height: 34px; border-radius: 10px; }
  .dm-minimized-avatar .avatar { width: 28px; height: 28px; border-radius: 8px; }
  .dm-floating-window { width: calc(100vw - 12px) !important; height: calc(100dvh - 74px) !important; min-width: 0; min-height: 0; max-width: none; max-height: none; left: 6px !important; right: auto !important; top: 68px !important; bottom: auto !important; resize: none; border-radius: 18px 18px 12px 12px; }
  .dm-floating-header { min-height: 58px; padding: 7px 8px 7px 10px; cursor: default; }
  .dm-floating-controls > button, .dm-settings-wrap > button { width: 32px; height: 32px; }
  .dm-floating-list { padding: 12px 9px 14px; }
  .dm-floating-list article { max-width: 92%; }
  .dm-floating-compose { grid-template-columns: 35px 35px minmax(0,1fr) 40px; padding: 7px; }
  .dm-floating-compose .composer-upload-button, .dm-floating-compose .dm-emoji-button { width: 35px; height: 39px; }
  .dm-floating-compose .dm-send-button { width: 40px; min-width: 40px; height: 40px; }
  .dm-report-sheet { inset: 58px 0 0; }
}

@media (max-width: 430px) {
  .dm-minimized-stack { max-width: 38px; }
  .dm-floating-person .avatar { width: 34px; height: 34px; }
  .dm-floating-controls { gap: 3px; }
  .dm-floating-controls > button, .dm-settings-wrap > button { width: 30px; height: 30px; border-radius: 9px; }
  .dm-request-banner { align-items: flex-start; flex-direction: column; }
  .dm-request-banner > div { width: 100%; }
  .dm-request-banner > div .button { flex: 1; }
}

/* Live staff report queue */
.report-nav-button { position: relative; }
.report-nav-button .report-ping { min-width: 16px; height: 16px; position: absolute; top: -4px; right: -4px; display: grid; place-items: center; padding: 0 4px; border: 2px solid #10111b; border-radius: 999px; color: #fff; background: var(--danger); font-size: .48rem; line-height: 1; }
.report-nav-button .report-ping.is-new { animation: nav-ping-arrive .45s ease-out, nav-ping-jump 1.8s .45s ease-in-out infinite; }
.report-quick-menu { width: 430px; }
.report-quick-list { max-height: min(620px,calc(100vh - 120px)); display: grid; gap: 8px; overflow-y: auto; padding: 9px; }
.report-quick-list.loading { opacity: .72; }
.report-quick-item { display: grid; gap: 8px; padding: 11px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: #11131d; }
.report-quick-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.report-quick-meta small { color: var(--faint); font-size: .56rem; }
.report-category { padding: 4px 7px; border-radius: 999px; color: #ffb1bd; background: rgba(255,101,127,.1); font-size: .56rem; font-weight: 800; text-transform: uppercase; }
.report-quick-item h3 { margin: 0; color: #f5f5ff; font-size: .76rem; }
.report-quick-item .report-byline { margin: -2px 0 0; color: var(--muted); font-size: .59rem; }
.report-quick-item blockquote { display: grid; gap: 5px; max-height: 175px; overflow: auto; margin: 0; padding: 9px 10px; border: 0; border-left: 3px solid var(--primary); border-radius: 8px; color: #c4c7d5; background: #0b0d15; white-space: pre-wrap; }
.report-quick-item blockquote b { color: #aaa3ff; font-size: .55rem; text-transform: uppercase; }
.report-quick-item blockquote span { font-size: .62rem; line-height: 1.45; }
.report-reason { display: grid; gap: 3px; }
.report-reason small { color: #aaa3ff; font-size: .55rem; font-weight: 800; text-transform: uppercase; }
.report-reason p { margin: 0; color: #e2e3ee; font-size: .65rem; line-height: 1.45; white-space: pre-wrap; }
.report-quick-item > footer { display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding-top: 2px; }
.report-take-action-wrap { position: relative; }
.report-take-action-menu { min-width: 145px; position: absolute; right: 0; top: auto; bottom: calc(100% + 6px); z-index: 6; display: grid; overflow: hidden; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: #222433; box-shadow: 0 18px 45px rgba(0,0,0,.45); transform-origin: bottom right; }
.report-take-action-menu[hidden] { display: none !important; }
.report-take-action-menu button { width: 100%; padding: 8px 9px; border: 0; border-radius: 7px; color: #e9e9f4; background: transparent; text-align: left; font: inherit; font-size: .63rem; cursor: pointer; }
.report-take-action-menu button:hover { background: #2d3041; }
.report-take-action-menu button.danger-option { color: #ff879b; }
.report-quick-empty { min-height: 170px; display: grid; place-items: center; align-content: center; gap: 10px; padding: 24px; text-align: center; }
.report-quick-empty span { font-size: 2.2rem; color: #7be0bd; }
.report-quick-empty p { margin: 0; color: var(--muted); font-size: .68rem; }

@media (max-width: 760px) {
  .report-quick-menu { width: min(430px,calc(100vw - 18px)); }
  .report-quick-list { max-height: calc(100vh - 128px); }
}

/* v38: seamless in-chat report composer */
.report-compose-modal { position: fixed; inset: 0; z-index: 700; display: grid; place-items: center; padding: 18px; }
.report-compose-modal[hidden] { display: none !important; }
.report-compose-backdrop { position: absolute; inset: 0; border: 0; background: rgba(5,6,10,.76); backdrop-filter: blur(6px); cursor: default; }
.report-compose-dialog { width: min(470px,calc(100vw - 28px)); max-height: min(88dvh,720px); position: relative; z-index: 1; overflow-y: auto; border: 1px solid rgba(255,111,145,.25); border-radius: 18px; background: linear-gradient(155deg,#1d1f2c,#151720 68%); box-shadow: 0 28px 90px rgba(0,0,0,.62); animation: cove-panel-in .2s ease both; }
.report-compose-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 18px 15px; border-bottom: 1px solid var(--line); }
.report-compose-dialog > header > span { display: grid; gap: 2px; }
.report-compose-dialog > header small { color: #ff879b; font-size: .58rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.report-compose-dialog > header h3 { margin: 2px 0 0; font-size: 1rem; }
.report-compose-dialog > header p { margin: 2px 0 0; color: var(--muted); font-size: .65rem; }
.report-compose-dialog > header > button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 9px; color: #bfc2cf; background: #242637; cursor: pointer; }
.report-compose-dialog form { display: grid; gap: 13px; padding: 17px 18px 18px; }
.report-compose-dialog label { display: grid; gap: 6px; color: var(--muted); font-size: .66rem; font-weight: 700; }
.report-compose-dialog select, .report-compose-dialog textarea { width: 100%; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: #11131c; }
.report-compose-dialog select { min-height: 41px; padding: 0 11px; }
.report-compose-dialog textarea { min-height: 116px; resize: vertical; padding: 10px 11px; font: inherit; line-height: 1.45; }
.report-compose-context { display: grid; gap: 4px; padding: 10px 11px; border: 1px solid rgba(255,135,155,.16); border-radius: 11px; color: #c8cad6; background: rgba(255,91,122,.055); font-size: .63rem; line-height: 1.45; }
.report-compose-context[hidden] { display: none !important; }
.report-compose-dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }
.report-compose-dialog footer .button { min-width: 112px; }
@media (max-width: 560px) {
  .report-compose-modal { padding: 8px; }
  .report-compose-dialog { width: 100%; max-height: calc(100dvh - 16px); }
  .report-compose-dialog form, .report-compose-dialog > header { padding-left: 14px; padding-right: 14px; }
  .report-compose-dialog footer { flex-direction: column-reverse; }
  .report-compose-dialog footer .button { width: 100%; }
}

/* v40: room ordering + community room creation */
.room-order-controls { display: inline-flex; align-items: center; gap: 4px; }
.room-order-controls form { display: inline-flex; }
.room-order-button { width: 32px; min-width: 32px; padding: 0 !important; font-size: .82rem; font-weight: 900; }
.rank-community-permissions { margin-bottom: 10px; }
.room-create-window { width: min(520px, calc(100vw - 24px)); }
.room-create-window input[type="color"] { min-height: 42px; padding: 4px; }
@media (max-width: 700px) {
  .room-admin-actions { flex-wrap: wrap; }
  .room-order-controls { order: -1; }
}

/* Private-message list controls */
.message-menu-tools { display: grid; justify-items: end; gap: 4px; }
.message-clear-button { padding: 0; border: 0; color: #ff9fda; background: transparent; font: inherit; font-size: .61rem; font-weight: 750; cursor: pointer; }
.message-clear-button:hover { color: #fff; text-decoration: underline; }
.message-clear-button:disabled { opacity: .45; cursor: wait; }

/* v43: Friends & people lives inside chat */
.people-finder-window {
  width: min(1240px, calc(100vw - 72px));
  height: calc(100dvh - 104px);
  min-width: 650px;
  min-height: 480px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 82px);
  position: fixed;
  left: 50%;
  top: 84px;
  z-index: 140;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  resize: both;
  transform: translateX(-50%);
  border: 1px solid rgba(139,126,255,.30);
  border-radius: 24px;
  background: linear-gradient(155deg, rgba(24,25,39,.985), rgba(13,14,24,.99) 72%);
  box-shadow: 0 34px 120px rgba(0,0,0,.68), 0 0 0 1px rgba(255,255,255,.018) inset;
}
.people-finder-window[hidden] { display: none !important; }
.people-finder-header {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 16px 13px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(25,27,42,.96);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.people-finder-header:active { cursor: grabbing; }
.people-finder-header > span { min-width: 0; display: grid; gap: 2px; }
.people-finder-header small { color: var(--primary-2); font-size: .57rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.people-finder-header b { color: #f7f7ff; font-size: 1.02rem; }
.people-finder-header em { overflow: hidden; color: var(--muted); font-size: .63rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.people-finder-header > button {
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: #d9dbea;
  background: #252737;
  font-size: 1.05rem;
  cursor: pointer;
}
.people-finder-header > button:hover { color: #fff; background: #303347; }
.people-finder-body { overflow: auto; padding: 22px; overscroll-behavior: contain; }
.people-finder-search {
  position: sticky;
  top: -22px;
  z-index: 4;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  margin: -2px 0 20px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(18,19,31,.96);
  box-shadow: 0 14px 38px rgba(0,0,0,.24);
  backdrop-filter: blur(16px);
}
.people-finder-search > span { color: #8981ff; font-size: 1.1rem; }
.people-finder-search input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 0 12px;
  color: var(--text);
  background: #10121c;
  outline: none;
}
.people-finder-search input:focus { border-color: color-mix(in srgb,var(--primary) 72%,#fff 8%); box-shadow: 0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent); }
.people-finder-section { margin: 0 0 22px; }
.people-finder-section > header { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; }
.people-finder-section > header h2 { margin: 0; font-size: .86rem; }
.people-finder-section > header span { min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 6px; border-radius: 999px; color: #cfcaff; background: rgba(118,104,255,.12); font-size: .58rem; font-weight: 800; }
.people-finder-window .people-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.people-finder-window .person-card { min-width: 0; }
.people-finder-window .person-card > div { min-width: 0; }
.people-finder-window .person-card nav, .people-finder-window .person-card form { flex-wrap: wrap; }
.people-finder-resize-grip {
  width: 18px;
  height: 18px;
  position: absolute;
  right: 3px;
  bottom: 3px;
  pointer-events: none;
  opacity: .45;
  background: linear-gradient(135deg, transparent 45%, #8d83ff 46%, #8d83ff 53%, transparent 54%, transparent 64%, #8d83ff 65%, #8d83ff 72%, transparent 73%);
}

@media (max-width: 900px) {
  .people-finder-window .people-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .people-finder-window {
    width: 100%;
    height: calc(100dvh - 64px);
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    left: 0 !important;
    right: 0;
    top: 64px !important;
    bottom: 0;
    z-index: 95;
    resize: none;
    transform: none !important;
    border-width: 1px 0 0;
    border-radius: 0;
    box-shadow: 0 -8px 34px rgba(0,0,0,.35);
  }
  .people-finder-header { min-height: 64px; padding: 10px 12px 10px 14px; cursor: default; touch-action: auto; }
  .people-finder-header em { display: none; }
  .people-finder-body { padding: 12px; }
  .people-finder-search { top: -12px; grid-template-columns: auto minmax(0,1fr); margin-bottom: 14px; padding: 9px; border-radius: 13px; }
  .people-finder-search .button { grid-column: 1 / -1; width: 100%; }
  .people-finder-window .person-card { padding: 11px; }
  .people-finder-window .person-card .avatar.large { width: 45px; height: 45px; }
  .people-finder-resize-grip { display: none; }
}


/* v44: Games & extras lives in a floating in-chat window like Friends & people. */
.extras-window .extras-window-body {
  background: radial-gradient(circle at 88% 2%, rgba(118,104,255,.09), transparent 34%), #12131d;
}
.extras-window .extras-module-grid {
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  padding: 0;
}
.extras-window .extras-module-grid article {
  min-height: 190px;
}
@media (max-width: 1050px) {
  .extras-window .extras-module-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .extras-window .extras-module-grid { grid-template-columns: 1fr; gap: 10px; }
  .extras-window .extras-module-grid article { min-height: 150px; padding: 16px; }
  .extras-window .extras-module-grid h2 { margin-top: 18px; }
}

.room-password-lock { margin-left: auto; font-style: normal; font-size: .72rem; opacity: .9; }
.room-password-stage { min-height: 100%; display: grid; place-items: center; padding: 28px; }
.room-password-card { width: min(460px,100%); display: grid; justify-items: center; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: rgba(20,21,34,.96); box-shadow: 0 24px 70px rgba(0,0,0,.36); text-align: center; }
.room-password-card .room-icon.large { width: 72px; height: 72px; }
.room-password-card h1, .room-password-card p { margin: 0; }
.room-password-card p { color: var(--muted); }
.room-password-card form { width: 100%; display: grid; gap: 12px; margin-top: 8px; text-align: left; }
.room-password-remove { align-self: end; min-height: 44px; }
.privacy-editor { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(13,14,24,.44); }
.privacy-editor header { display: grid; gap: 4px; }
.privacy-editor header small { color: var(--muted); line-height: 1.45; }

.composer-addon-button { min-width: 34px; height: 34px; display: inline-grid; place-items: center; border: 0; border-radius: 10px; padding: 0 8px; color: #d4b3cf; background: transparent; font: inherit; font-size: .76rem; font-weight: 850; cursor: pointer; }
.composer-addon-button:hover { color: #fff; background: rgba(255,255,255,.07); }
.voice-record-button.recording { color: #ff6978; background: rgba(255,74,99,.12); animation: coveVoicePulse 1.2s ease-in-out infinite; }
@keyframes coveVoicePulse { 50% { box-shadow: 0 0 0 5px rgba(255,74,99,.07); } }
.voice-record-preview { min-width: min(340px,70vw); display: grid; grid-template-columns: minmax(120px,1fr) auto auto; align-items: center; gap: 8px; position: absolute; left: 14px; bottom: calc(100% + 9px); padding: 9px 10px; border: 1px solid var(--line); border-radius: 14px; background: #171824; box-shadow: 0 14px 36px rgba(0,0,0,.32); z-index: 12; }
.voice-record-preview[hidden] { display: none; }
.voice-record-preview audio { width: 100%; height: 32px; }
.voice-record-preview span { color: var(--muted); font-size: .68rem; white-space: nowrap; }
.voice-record-preview button { width: 28px; height: 28px; border: 0; border-radius: 8px; color: #fff; background: rgba(255,255,255,.08); cursor: pointer; }
.voice-message-player { max-width: 420px; display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: rgba(9,10,17,.55); }
.voice-message-player audio { width: min(330px,100%); height: 34px; }
.voice-message-player small { color: var(--muted); font-size: .62rem; }
.dm-voice-player { margin: 4px 0; }

.message-addon-embed { display: block; max-width: 520px; margin-top: 9px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: #080910; }
.youtube-embed { aspect-ratio: 16 / 9; }
.youtube-embed iframe { width: 100%; height: 100%; display: block; border: 0; }
.gif-embed img { display: block; max-width: 100%; max-height: 380px; object-fit: contain; }
.command-message > div { border-left: 2px solid color-mix(in srgb,var(--primary) 76%,transparent); padding-left: 10px; }

.addon-picker-modal, .drawing-modal { position: fixed; inset: 0; z-index: 245; display: grid; place-items: center; padding: 18px; }
.addon-picker-modal[hidden], .drawing-modal[hidden] { display: none; }
.addon-picker-backdrop { position: absolute; inset: 0; border: 0; background: rgba(4,5,12,.64); backdrop-filter: blur(4px); cursor: default; }
.addon-picker-dialog, .drawing-dialog { width: min(720px,94vw); max-height: min(760px,88dvh); position: relative; display: grid; gap: 14px; overflow: hidden; padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: #151624; box-shadow: 0 28px 90px rgba(0,0,0,.5); }
.addon-picker-dialog > header, .drawing-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.addon-picker-dialog > header span, .drawing-dialog > header span { display: grid; gap: 2px; }
.addon-picker-dialog > header small, .drawing-dialog > header small { color: var(--primary-2); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.addon-picker-dialog > header h3, .drawing-dialog > header h3 { margin: 0; }
.addon-picker-dialog > header button, .drawing-dialog > header button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; color: #fff; background: #222433; cursor: pointer; }
.addon-picker-dialog form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; }
.addon-picker-dialog input[type="search"] { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 11px; padding: 0 12px; color: var(--text); background: #0f1019; }
.addon-search-results { min-height: 150px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; overflow: auto; padding-right: 3px; }
.addon-search-result { min-width: 0; display: grid; grid-template-rows: 118px auto; gap: 7px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: #1b1d2a; text-align: left; cursor: pointer; }
.addon-search-result:hover { border-color: color-mix(in srgb,var(--primary) 55%,var(--line)); transform: translateY(-1px); }
.addon-search-result img { width: 100%; height: 118px; border-radius: 10px; object-fit: cover; background: #0b0c12; }
.addon-search-result span { overflow: hidden; font-size: .72rem; line-height: 1.35; text-overflow: ellipsis; }
.addon-result-placeholder { display: grid; place-items: center; font-size: 2rem !important; background: #0b0c12; border-radius: 10px; }
.error-inline { color: #ff9ba6; }
.drawing-dialog canvas { width: 100%; max-height: 58dvh; display: block; border: 1px solid var(--line); border-radius: 14px; background: #11121b; touch-action: none; }
.drawing-dialog footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.drawing-dialog footer label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .72rem; }
.drawing-dialog footer .button.primary { margin-left: auto; }

.admin-addon-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.admin-addon-card, .admin-command-card { display: grid; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: #171925; }
.admin-addon-card > header, .admin-command-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.admin-addon-card h3, .admin-command-card h3 { margin: 0; }
.admin-addon-card p, .admin-command-card p { margin: 3px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.admin-addon-card form { display: grid; gap: 10px; }
.admin-command-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.admin-command-card textarea { min-height: 112px; }
.admin-command-access { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

@media (max-width: 850px) {
  .addon-search-results { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-addon-grid, .admin-command-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .composer-addon-button { min-width: 31px; padding: 0 5px; }
  .voice-record-preview { min-width: calc(100vw - 26px); left: 0; grid-template-columns: minmax(0,1fr) auto; }
  .voice-record-preview span { display: none; }
  .addon-picker-modal, .drawing-modal { padding: 8px; align-items: end; }
  .addon-picker-dialog, .drawing-dialog { width: 100%; max-height: 86dvh; border-radius: 20px 20px 10px 10px; }
  .addon-search-results { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .addon-search-result { grid-template-rows: 92px auto; }
  .addon-search-result img { height: 92px; }
  .drawing-dialog footer .button.primary { width: 100%; margin-left: 0; }
  .admin-command-access { grid-template-columns: 1fr; }
}
.addon-admin-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.addon-card { display: grid; align-content: start; gap: 12px; }
.addon-card > header { display: flex; align-items: center; gap: 11px; }
.addon-card > header > span:last-child { display: grid; gap: 2px; }
.addon-card > header small { color: var(--muted); }
.addon-card > p { margin: 0; color: var(--muted); line-height: 1.5; }
.addon-icon { min-width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: rgba(118,104,255,.16); font-size: .82rem; font-weight: 900; }
.addon-card.enabled { border-color: color-mix(in srgb,var(--primary) 35%,var(--line)); }
.command-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.command-card { display: grid; gap: 10px; }
.command-card > form:first-child { display: grid; gap: 10px; }
.command-card > form:first-child header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
@media (max-width: 900px) { .addon-admin-grid, .command-list { grid-template-columns: 1fr; } }
.composer, .dm-floating-compose { grid-template-columns: auto minmax(0,1fr) 41px; }
.composer-tools { min-width: 0; display: flex; align-items: center; gap: 2px; align-self: center; overflow-x: auto; overflow-y: visible; scrollbar-width: none; }
.composer-tools::-webkit-scrollbar { display: none; }
.composer-tools > button, .composer-tools > .composer-upload-button { flex: 0 0 auto; }
.composer-tools .composer-upload-button { width: 36px; height: 40px; }
.dm-floating-compose { grid-template-columns: auto minmax(0,1fr) 42px; }
@media (max-width: 760px) {
  .composer, .dm-floating-compose { grid-template-columns: minmax(86px,auto) minmax(0,1fr) 40px; }
  .composer-tools { max-width: 42vw; }
}

/* Compact addon tray: keeps enabled composer addons behind one + button. */
.composer-tools { overflow: visible; position: relative; }
.composer-addon-menu { position: relative; flex: 0 0 auto; }
.composer-addon-menu-toggle {
  width: 36px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 11px;
  color: #d4b3cf; background: transparent; font: inherit; font-size: 1.45rem; font-weight: 500; line-height: 1;
  cursor: pointer; transition: background .16s ease,color .16s ease,transform .16s ease;
}
.composer-addon-menu-toggle:hover,
.composer-addon-menu-toggle[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.07); }
.composer-addon-menu-toggle[aria-expanded="true"] { transform: rotate(45deg); }
.composer-addon-menu-popover {
  position: absolute; left: 0; bottom: calc(100% + 10px); width: min(292px,82vw); padding: 10px;
  border: 1px solid var(--line); border-radius: 17px; background: #171824;
  box-shadow: 0 18px 44px rgba(0,0,0,.42); z-index: 80;
}
.composer-addon-menu-popover[hidden] { display: none; }
.composer-addon-menu-title { padding: 2px 5px 9px; color: var(--muted); font-size: .67rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.composer-addon-menu-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.composer-addon-menu-item {
  min-width: 0; display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px; color: var(--text); background: rgba(255,255,255,.025); text-align: left; cursor: pointer;
}
.composer-addon-menu-item:hover { border-color: color-mix(in srgb,var(--primary) 45%,var(--line)); background: rgba(255,255,255,.055); }
.composer-addon-menu-item.recording { border-color: rgba(255,105,120,.45); background: rgba(255,74,99,.10); }
.composer-addon-menu-icon {
  width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 10px;
  background: rgba(118,104,255,.14); color: #fff; font-size: .95rem; font-weight: 900;
}
.composer-addon-menu-icon.addon-menu-gif { font-size: .61rem; letter-spacing: -.02em; }
.composer-addon-menu-item > span:last-child { min-width: 0; display: grid; gap: 2px; }
.composer-addon-menu-item b { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.composer-addon-menu-item small { overflow: hidden; color: var(--muted); font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  .composer-addon-menu-popover { width: min(276px,88vw); }
  .composer-addon-menu-grid { grid-template-columns: 1fr 1fr; }
  .composer-addon-menu-item { padding: 8px; }
}

/* Voice stays one tap away beside Emoji; other addons remain in the + tray. */
.composer-voice-button { width: 36px; height: 40px !important; flex: 0 0 auto; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 10px; color: #d4b3cf; background: transparent; font-size: 1rem; cursor: pointer; }
.composer-voice-button:hover { color: #fff; background: rgba(255,255,255,.07); }
.composer-voice-button.recording { color: #ff6978; background: rgba(255,74,99,.12); animation: coveVoicePulse 1.2s ease-in-out infinite; }

/* v48: keep the floating DM composer in one stable bottom row.
   The main-chat addon grid must not control DM child placement. */
.dm-floating-compose {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-auto-rows: auto;
  align-items: stretch;
  gap: 7px;
}
.dm-floating-compose > .composer-reply,
.dm-floating-compose > .chat-composer-image-preview {
  grid-column: 1;
  width: 100%;
}
.dm-floating-compose > .composer-tools {
  width: 100%;
  max-width: none;
  align-self: auto;
}
.dm-compose-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) 42px;
  align-items: end;
  gap: 7px;
}
.dm-compose-row textarea {
  width: 100%;
  min-width: 0;
  margin: 0;
  resize: none;
}
.dm-compose-row .dm-send-button { align-self: end; }
@media (max-width: 760px) {
  .dm-floating-compose { padding: 7px 8px 8px; gap: 6px; }
  .dm-floating-compose > .composer-tools { max-width: none; }
  .dm-compose-row { grid-template-columns: minmax(0,1fr) 40px; gap: 6px; }
}

/* v49: keep DM tools immediately beside the text box in one composer row. */
.dm-floating-compose > .dm-compose-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) 42px;
  align-items: end;
  gap: 7px;
}
.dm-floating-compose .dm-compose-row > .composer-tools {
  width: auto;
  max-width: 150px;
  min-width: 0;
  align-self: center;
  flex-wrap: nowrap;
}
.dm-floating-compose .dm-compose-row > textarea {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  max-height: 96px;
  margin: 0;
  resize: none;
}
.dm-floating-compose .dm-compose-row > .dm-send-button {
  align-self: end;
}
@media (max-width: 760px) {
  .dm-floating-compose > .dm-compose-row {
    grid-template-columns: auto minmax(0,1fr) 40px;
    gap: 5px;
  }
  .dm-floating-compose .dm-compose-row > .composer-tools {
    max-width: 112px;
    gap: 0;
  }
  .dm-floating-compose .dm-compose-row .composer-addon-menu-toggle,
  .dm-floating-compose .dm-compose-row .composer-upload-button,
  .dm-floating-compose .dm-compose-row .dm-emoji-button {
    width: 34px;
    height: 40px;
  }
}
@media (max-width: 430px) {
  .dm-floating-compose .dm-compose-row > .composer-tools { max-width: 102px; }
  .dm-floating-compose .dm-compose-row .composer-addon-menu-toggle,
  .dm-floating-compose .dm-compose-row .composer-upload-button,
  .dm-floating-compose .dm-compose-row .dm-emoji-button {
    width: 32px;
  }
}

/* Floating DM layout: larger desktop window and composer controls locked to the input row. */
@media (min-width: 761px) {
  .dm-floating-window {
    width: min(680px, calc(100vw - 48px));
    height: min(760px, calc(100vh - 100px));
    min-width: 500px;
    min-height: 540px;
    max-width: min(900px, calc(100vw - 24px));
    max-height: calc(100vh - 82px);
  }
}

.dm-floating-compose {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 7px;
  width: 100%;
  min-height: 0;
  height: auto !important;
  align-content: initial !important;
}
.dm-floating-compose > .composer-reply,
.dm-floating-compose > .chat-composer-image-preview {
  flex: 0 0 auto;
  width: 100%;
}
.dm-floating-compose > .dm-compose-row {
  width: 100%;
  min-width: 0;
  display: flex !important;
  flex: 0 0 auto;
  align-items: flex-end;
  gap: 7px;
}
.dm-floating-compose .dm-compose-row > .composer-tools {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: flex-end !important;
  width: auto;
  max-width: none !important;
  min-width: 0;
  gap: 2px;
  margin: 0;
  padding: 0;
}
.dm-floating-compose .dm-compose-row > textarea {
  flex: 1 1 auto;
  width: auto;
  min-width: 80px;
  min-height: 42px;
  max-height: 112px;
  margin: 0;
  align-self: flex-end;
}
.dm-floating-compose .dm-compose-row > .dm-send-button {
  flex: 0 0 42px;
  align-self: flex-end;
}

@media (max-width: 760px) {
  .dm-floating-window {
    width: calc(100vw - 8px) !important;
    height: calc(100dvh - 72px) !important;
    left: 4px !important;
    top: 68px !important;
  }
  .dm-floating-compose {
    padding: 7px 7px calc(8px + env(safe-area-inset-bottom));
    gap: 6px;
  }
  .dm-floating-compose > .dm-compose-row {
    gap: 5px;
  }
  .dm-floating-compose .dm-compose-row > .composer-tools {
    max-width: none !important;
    gap: 0;
  }
  .dm-floating-compose .dm-compose-row .composer-addon-menu-toggle,
  .dm-floating-compose .dm-compose-row .composer-upload-button,
  .dm-floating-compose .dm-compose-row .dm-emoji-button {
    width: 32px;
    min-width: 32px;
    height: 40px;
  }
  .dm-floating-compose .dm-compose-row > textarea {
    min-width: 0;
    min-height: 40px;
    max-height: 96px;
  }
  .dm-floating-compose .dm-compose-row > .dm-send-button {
    flex-basis: 40px;
    width: 40px;
    min-width: 40px;
    height: 40px;
  }
}

@media (max-width: 430px) {
  .dm-floating-compose .dm-compose-row .composer-addon-menu-toggle,
  .dm-floating-compose .dm-compose-row .composer-upload-button,
  .dm-floating-compose .dm-compose-row .dm-emoji-button {
    width: 30px;
    min-width: 30px;
  }
}


/* v51: anchor the floating DM composer to the bottom and let messages use the remaining space. */
.dm-floating-window {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
.dm-request-banner {
  flex: 0 0 auto;
}
.dm-floating-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}
.dm-floating-compose {
  flex: 0 0 auto;
  margin-top: auto;
}
.dm-floating-compose > .dm-compose-row {
  align-items: center;
}
.dm-floating-compose .dm-compose-row > .composer-tools,
.dm-floating-compose .dm-compose-row > textarea,
.dm-floating-compose .dm-compose-row > .dm-send-button {
  align-self: center !important;
}
@media (max-width: 760px) {
  .dm-floating-window {
    display: flex !important;
    flex-direction: column;
  }
  .dm-floating-compose {
    margin-top: auto;
  }
}


/* v1 profile gallery + cleaner profile editor */
.profile-tabs { display:flex; gap:8px; margin:8px clamp(18px,4vw,44px) 16px; padding:5px; border:1px solid var(--line); border-radius:14px; background:#131520; }
.profile-tabs button { flex:1; min-height:38px; border:0; border-radius:10px; color:var(--muted); background:transparent; font:inherit; font-size:.76rem; font-weight:800; cursor:pointer; }
.profile-tabs button.active { color:#fff; background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 80%,#5f54ca),color-mix(in srgb,var(--primary) 58%,#302c76)); box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 18%,transparent); }
.profile-tabs button span { display:inline-grid; place-items:center; min-width:21px; height:21px; margin-left:5px; padding:0 6px; border-radius:999px; background:rgba(255,255,255,.12); font-size:.62rem; }
.profile-gallery-panel { display:none; margin:0 clamp(18px,4vw,44px) 18px; }
.profile-page.gallery-active .profile-gallery-panel { display:block; }
.profile-page.gallery-active .profile-stats, .profile-page.gallery-active .profile-grid, .profile-page.gallery-active .profile-actions { display:none; }
.profile-gallery-header { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:13px; padding:16px 18px; border:1px solid var(--line); border-radius:15px; background:#161925; }
.profile-gallery-header h2 { margin:0; font-size:1rem; }
.profile-gallery-header p { margin:4px 0 0; color:var(--muted); font-size:.7rem; }
.profile-gallery-header > b { color:var(--muted); font-size:.68rem; white-space:nowrap; }
.profile-gallery-upload { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.7fr); gap:12px; margin-bottom:14px; padding:14px; border:1px solid rgba(118,104,255,.22); border-radius:16px; background:linear-gradient(145deg,rgba(118,104,255,.08),#151722); }
.gallery-upload-drop { min-height:105px; display:grid; place-items:center; align-content:center; gap:4px; position:relative; border:1px dashed rgba(255,255,255,.2); border-radius:13px; color:#e9eaff; background:rgba(255,255,255,.025); text-align:center; cursor:pointer; }
.gallery-upload-drop:hover { border-color:color-mix(in srgb,var(--primary) 60%,transparent); background:rgba(118,104,255,.07); }
.gallery-upload-drop > span { font-size:1.25rem; color:var(--primary); }
.gallery-upload-drop b { font-size:.78rem; }
.gallery-upload-drop small { color:var(--muted); font-size:.62rem; }
.gallery-upload-drop input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.profile-gallery-upload > div { display:grid; align-content:center; gap:9px; }
.profile-gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.profile-gallery-item { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#151722; }
.profile-gallery-image { width:100%; aspect-ratio:1 / 1; display:block; overflow:hidden; padding:0; border:0; background:#0d0f18; cursor:zoom-in; }
.profile-gallery-image img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .2s ease; }
.profile-gallery-image:hover img { transform:scale(1.025); }
.profile-gallery-item > p { margin:10px 11px 2px; color:#c5c8d8; font-size:.7rem; line-height:1.45; overflow-wrap:anywhere; }
.profile-gallery-item footer { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 11px 10px; }
.profile-gallery-item time { color:var(--faint); font-size:.58rem; }
.profile-gallery-item footer form { margin:0; }
.profile-gallery-item footer button { border:0; padding:0; color:#ff8fa3; background:transparent; font:inherit; font-size:.62rem; cursor:pointer; }
.profile-gallery-empty { min-height:190px; display:grid; place-items:center; align-content:center; gap:6px; border:1px dashed var(--line); border-radius:16px; color:var(--muted); text-align:center; }
.profile-gallery-empty > span { font-size:1.5rem; color:var(--primary); }
.profile-gallery-empty h3 { margin:0; color:#eceeff; font-size:.9rem; }
.profile-gallery-empty p { max-width:360px; margin:0; font-size:.7rem; }
.profile-gallery-lightbox[hidden] { display:none; }
.profile-gallery-lightbox { position:fixed; inset:0; z-index:430; display:grid; place-items:center; padding:24px; background:rgba(4,5,11,.88); backdrop-filter:blur(10px); }
.profile-gallery-lightbox > button { position:absolute; top:20px; right:20px; width:40px; height:40px; border:1px solid rgba(255,255,255,.18); border-radius:12px; color:#fff; background:rgba(18,20,31,.9); font-size:1.3rem; cursor:pointer; }
.profile-gallery-lightbox figure { max-width:min(920px,92vw); max-height:86vh; display:grid; gap:10px; margin:0; }
.profile-gallery-lightbox img { max-width:100%; max-height:78vh; border-radius:16px; box-shadow:0 24px 80px rgba(0,0,0,.58); object-fit:contain; }
.profile-gallery-lightbox figcaption { color:#e7e8f1; font-size:.76rem; text-align:center; }

.profile-editor-clean { padding:0; overflow:hidden; background:#151722; }
.profile-editor-heading { padding:20px 21px 15px; border-bottom:1px solid var(--line); background:linear-gradient(145deg,rgba(118,104,255,.1),transparent 58%); }
.profile-editor-clean form { gap:0; margin:0; }
.profile-editor-shell { min-width:0; }
.profile-editor-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:7px; border-bottom:1px solid var(--line); background:linear-gradient(90deg,color-mix(in srgb,var(--primary) 66%,#34316f),color-mix(in srgb,var(--primary) 50%,#29275e)); }
.profile-editor-tabs button { min-height:38px; border:0; border-radius:9px; color:rgba(255,255,255,.82); background:transparent; font:inherit; font-size:.74rem; font-weight:850; cursor:pointer; }
.profile-editor-tabs button.active { color:#fff; background:rgba(255,255,255,.13); box-shadow:inset 0 1px rgba(255,255,255,.1); }
.profile-edit-menu { padding:7px 20px 14px; }
.profile-edit-menu[hidden], .profile-edit-panel[hidden] { display:none !important; }
.profile-edit-row { width:100%; min-height:58px; display:grid; grid-template-columns:28px minmax(0,1fr) auto; grid-template-rows:auto auto; gap:1px 9px; align-items:center; padding:10px 4px; border:0; border-bottom:1px solid var(--line); color:#f3f4fb; background:transparent; text-align:left; font:inherit; cursor:pointer; }
.profile-edit-row:last-child { border-bottom:0; }
.profile-edit-row:hover { padding-left:9px; padding-right:9px; border-radius:10px; background:rgba(255,255,255,.035); }
.profile-edit-row > span { grid-row:1 / 3; width:26px; display:grid; place-items:center; color:#f3f4ff; font-size:.84rem; }
.profile-edit-row b { min-width:0; font-size:.76rem; }
.profile-edit-row small { min-width:0; overflow:hidden; color:var(--muted); font-size:.62rem; text-overflow:ellipsis; white-space:nowrap; }
.profile-edit-row i { grid-column:3; grid-row:1 / 3; color:var(--faint); font-size:1rem; font-style:normal; }
.profile-edit-panel { display:grid; gap:14px; padding:17px 20px 20px; }
.profile-edit-panel > header { display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.profile-edit-panel > header button { width:34px; height:34px; flex:none; border:1px solid var(--line); border-radius:10px; color:#fff; background:#1a1c29; font-size:1.25rem; cursor:pointer; }
.profile-edit-panel > header span { display:grid; gap:3px; }
.profile-edit-panel > header b { font-size:.82rem; }
.profile-edit-panel > header small { color:var(--muted); font-size:.64rem; }
.profile-edit-panel .style-panels { display:grid; gap:12px; }
.profile-edit-panel fieldset { margin:0; }
.profile-edit-savebar { position:sticky; bottom:0; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; border-top:1px solid var(--line); background:rgba(17,18,27,.94); backdrop-filter:blur(14px); }
.profile-edit-savebar small { color:var(--faint); font-size:.61rem; }
.profile-edit-savebar .button { margin:0; }
.profile-modal.editing-profile .profile-tabs, .profile-modal.editing-profile .profile-gallery-panel { display:none !important; }

@media (max-width:700px) {
  .profile-tabs, .profile-gallery-panel { margin-left:10px; margin-right:10px; }
  .profile-gallery-upload { grid-template-columns:1fr; }
  .profile-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .profile-editor-heading { padding:17px 16px 13px; }
  .profile-edit-menu, .profile-edit-panel { padding-left:14px; padding-right:14px; }
  .profile-edit-savebar { padding:10px 14px; }
  .profile-edit-savebar small { display:none; }
  .profile-edit-savebar .button { width:100%; justify-content:center; }
}
@media (max-width:420px) {
  .profile-gallery-grid { grid-template-columns:1fr 1fr; gap:7px; }
  .profile-gallery-header { align-items:flex-start; }
}

/* v1 profile settings popup flow + view-only public gallery */
.profile-edit-savebar { display:none !important; }
.profile-editor-popup-backdrop[hidden],
.profile-gallery-manager[hidden],
.profile-edit-panel[hidden] { display:none !important; }
.profile-editor-popup-backdrop {
  position:fixed;
  inset:0;
  z-index:510;
  width:100%;
  height:100%;
  border:0;
  background:rgba(4,5,11,.76);
  backdrop-filter:blur(7px);
  cursor:default;
}
.profile-edit-panel {
  position:fixed;
  left:50%;
  top:50%;
  z-index:520;
  width:min(530px,calc(100vw - 32px));
  max-height:min(82dvh,760px);
  overflow:auto;
  transform:translate(-50%,-50%);
  display:grid;
  gap:14px;
  padding:0 18px 18px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:#292c39;
  box-shadow:0 28px 90px rgba(0,0,0,.64),0 0 0 1px rgba(118,104,255,.08);
}
.profile-edit-panel > header {
  position:sticky;
  top:0;
  z-index:2;
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 -18px 2px;
  padding:15px 17px;
  border-bottom:1px solid rgba(255,255,255,.1);
  background:rgba(41,44,57,.96);
  backdrop-filter:blur(14px);
}
.profile-edit-panel > header span { display:grid; gap:3px; min-width:0; }
.profile-edit-panel > header b { font-size:.84rem; color:#fff; }
.profile-edit-panel > header small { color:#b8bed0; font-size:.65rem; line-height:1.4; }
.profile-edit-panel > header button {
  order:2;
  width:34px;
  height:34px;
  flex:none;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  color:#fff;
  background:#20232f;
  font-size:1.12rem;
  cursor:pointer;
}
.profile-edit-panel > header button:hover { background:#343848; }
.profile-edit-panel label { min-width:0; }
.profile-edit-panel input,
.profile-edit-panel select,
.profile-edit-panel textarea { background:#20232f; }
.profile-editor-popup-actions {
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:2px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.09);
}
.profile-editor-popup-actions .button { min-width:92px; justify-content:center; }
.profile-editor-clean { overflow:visible; }
.profile-editor-clean form { overflow:visible; }

.profile-gallery-manager {
  position:fixed;
  inset:0;
  z-index:540;
  display:grid;
  place-items:center;
  padding:24px;
}
.profile-gallery-manager > .profile-editor-popup-backdrop { z-index:0; }
.profile-editor-popup-card {
  position:relative;
  z-index:1;
  width:min(760px,calc(100vw - 34px));
  max-height:min(86dvh,860px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:19px;
  background:#222530;
  box-shadow:0 30px 100px rgba(0,0,0,.7),0 0 0 1px rgba(118,104,255,.08);
}
.profile-gallery-manager-card > header {
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 17px;
  border-bottom:1px solid rgba(255,255,255,.1);
  background:#292c39;
}
.profile-gallery-manager-card > header span { display:grid; gap:3px; min-width:0; }
.profile-gallery-manager-card > header b { color:#fff; font-size:.88rem; }
.profile-gallery-manager-card > header small { color:#b8bed0; font-size:.65rem; }
.profile-gallery-manager-card > header button {
  width:34px;
  height:34px;
  flex:none;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  color:#fff;
  background:#20232f;
  font-size:1.12rem;
  cursor:pointer;
}
.profile-gallery-manager-body {
  max-height:calc(min(86dvh,860px) - 68px);
  overflow:auto;
  padding:16px;
}
.profile-gallery-manager-body .profile-gallery-upload { margin:0 0 14px; background:#1b1e28; }
.profile-gallery-manager-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:4px 0 13px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  background:#1b1e28;
}
.profile-gallery-manager-meta span { color:#f0f2ff; font-size:.7rem; }
.profile-gallery-manager-meta small { color:var(--muted); font-size:.62rem; text-align:right; }
.profile-gallery-manage-grid .profile-gallery-item footer { min-height:38px; }
.profile-gallery-manager-empty { min-height:150px; }

/* The public Gallery tab is deliberately presentation-only. */
.profile-gallery-panel .profile-gallery-item footer { justify-content:flex-start; }

@media (max-width:700px) {
  .profile-editor-popup-backdrop { backdrop-filter:blur(4px); }
  .profile-edit-panel {
    width:calc(100vw - 22px);
    max-height:calc(100dvh - 24px);
    padding-left:14px;
    padding-right:14px;
    border-radius:16px;
  }
  .profile-edit-panel > header { margin-left:-14px; margin-right:-14px; padding-left:14px; padding-right:14px; }
  .profile-edit-panel .form-grid.two { grid-template-columns:1fr; }
  .profile-editor-popup-actions { position:sticky; bottom:-18px; margin-left:-14px; margin-right:-14px; padding:11px 14px; background:rgba(41,44,57,.97); backdrop-filter:blur(12px); }
  .profile-editor-popup-actions .button { flex:1; }
  .profile-gallery-manager { padding:10px; }
  .profile-editor-popup-card { width:100%; max-height:calc(100dvh - 20px); border-radius:16px; }
  .profile-gallery-manager-body { max-height:calc(100dvh - 88px); padding:12px; }
  .profile-gallery-manager-meta { align-items:flex-start; flex-direction:column; }
  .profile-gallery-manager-meta small { text-align:left; }
}
.profile-gallery-lightbox { z-index:570; }

/* v1.50: profile setting modals are portaled to <body> so the profile window
   cannot clip or stack above them. */
.profile-editor-portal[hidden] { display:none !important; }
.profile-editor-portal {
  position:fixed;
  inset:0;
  z-index:640;
  display:grid;
  place-items:center;
  padding:24px;
  isolation:isolate;
}
.profile-editor-portal > .profile-editor-popup-backdrop {
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
}
.profile-editor-portal > .profile-edit-panel {
  position:relative;
  left:auto;
  top:auto;
  z-index:1;
  transform:none;
  width:min(530px,calc(100vw - 32px));
  max-height:min(82dvh,760px);
}
@media (max-width:700px) {
  .profile-editor-portal { padding:11px; }
  .profile-editor-portal > .profile-edit-panel {
    width:100%;
    max-height:calc(100dvh - 22px);
  }
}

/* v1.51: profile media polish + accurate color swatches */
input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 42px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: var(--cove-picked-color, #7668ff);
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 6px;
  background: var(--cove-picked-color, #7668ff);
}
input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: 6px;
  background: var(--cove-picked-color, #7668ff);
}
input[type="color"]:hover { border-color: rgba(255,255,255,.22); }

.profile-music-editor-panel .profile-music-fields { align-items:start; }
.profile-music-editor-panel .profile-music-fields > label { align-content:start; }
.profile-music-current {
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(118,104,255,.11),rgba(255,255,255,.025));
}
.profile-music-current-icon {
  width:34px;
  height:34px;
  flex:none;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--primary) 38%,transparent);
  border-radius:10px;
  color:#fff;
  background:color-mix(in srgb,var(--primary) 24%,#1d2030);
  font-size:.95rem;
}
.profile-music-current > span:last-child { min-width:0; display:grid; gap:2px; }
.profile-music-current small { color:var(--muted); font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; }
.profile-music-current b { overflow:hidden; color:#f6f7ff; font-size:.76rem; text-overflow:ellipsis; white-space:nowrap; }
.profile-editor-popup-actions .profile-music-remove-button {
  min-width:auto;
  margin-right:auto;
  color:#ff9cad !important;
  background:rgba(255,91,112,.08);
}
.profile-editor-popup-actions .profile-music-remove-button:hover { background:rgba(255,91,112,.14) !important; }

.profile-gallery-manager-card { width:min(790px,calc(100vw - 34px)); }
.profile-gallery-manager-body {
  background:linear-gradient(180deg,rgba(255,255,255,.012),transparent 180px);
}
.profile-gallery-upload-polished {
  grid-template-columns:minmax(0,1.08fr) minmax(245px,.92fr);
  gap:14px;
  padding:14px;
  border-color:rgba(118,104,255,.27);
  background:linear-gradient(145deg,rgba(118,104,255,.09),rgba(20,22,33,.96));
}
.profile-gallery-upload-polished .gallery-upload-drop {
  min-height:124px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  padding:14px;
  text-align:left;
  border-color:rgba(255,255,255,.16);
  background:rgba(9,11,19,.28);
}
.profile-gallery-upload-polished .gallery-upload-drop:hover {
  border-color:color-mix(in srgb,var(--primary) 66%,transparent);
  background:color-mix(in srgb,var(--primary) 7%,rgba(9,11,19,.32));
}
.gallery-upload-preview {
  width:86px;
  height:86px;
  flex:0 0 86px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:13px;
  color:var(--primary-2);
  background:linear-gradient(145deg,rgba(118,104,255,.14),rgba(255,255,255,.03));
}
.gallery-upload-preview > span { font-size:1.45rem; line-height:1; }
.gallery-upload-preview img { width:100%; height:100%; display:block; object-fit:cover; }
.gallery-upload-preview.has-image { border-color:color-mix(in srgb,var(--primary) 48%,rgba(255,255,255,.12)); }
.gallery-upload-copy { min-width:0; display:grid; gap:4px; }
.gallery-upload-copy b { color:#f5f6ff; font-size:.8rem; }
.gallery-upload-copy small { color:var(--muted); font-size:.62rem; line-height:1.45; }
.gallery-upload-copy em {
  max-width:100%;
  overflow:hidden;
  margin-top:5px;
  color:#b7bdd2;
  font-size:.61rem;
  font-style:normal;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.gallery-upload-fields { align-content:stretch !important; grid-template-rows:1fr auto; gap:10px !important; }
.gallery-upload-fields label { align-content:start; }
.gallery-upload-fields .optional { margin-left:4px; color:var(--faint); font-size:.62rem; font-weight:500; }
.gallery-upload-fields input { min-height:44px; }
.gallery-upload-fields .button { min-height:44px; width:100%; }
.profile-gallery-manager-meta {
  display:grid;
  grid-template-columns:minmax(150px,.8fr) minmax(120px,.6fr) minmax(190px,1fr);
  align-items:center;
  gap:14px;
  padding:11px 13px;
  background:linear-gradient(135deg,#1b1e28,#191c26);
}
.profile-gallery-manager-meta > span { min-width:0; display:grid; gap:2px; }
.profile-gallery-manager-meta > span b { font-size:.76rem; }
.profile-gallery-manager-meta > span small { color:var(--muted); font-size:.58rem; }
.profile-gallery-capacity {
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
}
.profile-gallery-capacity i {
  display:block;
  height:100%;
  min-width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  box-shadow:0 0 13px color-mix(in srgb,var(--primary) 35%,transparent);
}
.profile-gallery-manager-empty {
  min-height:170px;
  border-color:rgba(255,255,255,.09);
  background:radial-gradient(circle at 50% 25%,rgba(118,104,255,.1),transparent 48%),rgba(255,255,255,.01);
}
.profile-gallery-manager-empty > span {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(118,104,255,.2);
  border-radius:12px;
  background:rgba(118,104,255,.08);
  font-size:1.15rem;
}
.profile-gallery-manage-grid .profile-gallery-item { box-shadow:0 10px 24px rgba(0,0,0,.12); }
.profile-gallery-manage-grid .profile-gallery-item footer button {
  padding:5px 8px;
  border:1px solid rgba(255,101,127,.17);
  border-radius:8px;
  color:#ff99aa;
  background:rgba(255,101,127,.055);
}
.profile-gallery-manage-grid .profile-gallery-item footer button:hover { background:rgba(255,101,127,.11); }

@media (max-width:700px) {
  .profile-gallery-upload-polished { grid-template-columns:1fr; }
  .profile-gallery-upload-polished .gallery-upload-drop { min-height:112px; }
  .gallery-upload-preview { width:74px; height:74px; flex-basis:74px; }
  .profile-gallery-manager-meta { grid-template-columns:1fr; gap:8px; }
  .profile-gallery-manager-meta > small { text-align:left; }
  .profile-gallery-capacity { width:100%; }
  .profile-editor-popup-actions .profile-music-remove-button { flex:0 0 auto; margin-right:auto; }
}


/* v1 gallery manager + configurable age polish */
.gallery-upload-preview img[hidden],
.gallery-upload-preview > span[hidden] { display:none !important; }
.profile-gallery-upload-polished .gallery-upload-drop {
  min-width:0;
  overflow:hidden;
}
.profile-gallery-upload-polished .gallery-upload-drop > input[type="file"] {
  z-index:3;
}
.gallery-upload-preview {
  position:relative;
  isolation:isolate;
}
.gallery-upload-preview img {
  position:absolute;
  inset:0;
  z-index:2;
}
.gallery-upload-preview > span {
  position:relative;
  z-index:1;
}
.gallery-upload-copy { overflow:hidden; }
.gallery-upload-copy em { display:block; }
.profile-gallery-upload-polished {
  align-items:stretch;
}
.gallery-upload-fields label {
  min-width:0;
  display:grid;
  grid-template-rows:auto auto;
  gap:7px;
}
.gallery-upload-fields label > input {
  width:100%;
  min-width:0;
}
.profile-gallery-manager-meta {
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
}
.profile-gallery-manager-empty {
  margin-top:2px;
}
.profile-edit-panel[data-profile-edit-panel="personal"] .form-grid.two > label {
  align-self:start;
}
.profile-edit-panel[data-profile-edit-panel="personal"] select {
  min-height:48px;
}
@media (max-width:700px) {
  .profile-gallery-upload-polished .gallery-upload-drop {
    min-height:104px;
  }
}
.profile-gallery-count strong { display:flex; align-items:baseline; gap:5px; color:#f4f5ff; }
.profile-gallery-count strong b { font-size:.92rem !important; }
.profile-gallery-count strong em { color:#b7bdd0; font-size:.64rem; font-style:normal; font-weight:700; }
.profile-gallery-manager-note { line-height:1.45; }


/* v1.55: unified Cove dropdown component + profile-save feedback */
.cove-select { position:relative; width:100%; }
.cove-select-native {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:0 !important;
  padding:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
}
/* One shared visible select field for profile/registration dropdowns. The real
   select stays in the form for validation while this control guarantees the
   same Cove appearance and body-level menu behavior for every option list. */
.cove-select-button {
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text);
  background:#20232f;
  font:inherit;
  text-align:left;
  cursor:pointer;
  outline:none;
  transition:border-color .18s, box-shadow .18s;
}
.cove-select-button:hover { border-color:rgba(255,255,255,.13); }
.cove-select-button:disabled { opacity:.55; cursor:not-allowed; }
.cove-select-button:focus-visible,
.cove-select-button[aria-expanded="true"] {
  border-color:rgba(118,104,255,.65);
  box-shadow:0 0 0 3px rgba(118,104,255,.12);
}
.cove-select-button.placeholder span { color:var(--muted); }
.cove-select-button i {
  width:8px;
  height:8px;
  flex:0 0 8px;
  margin-right:2px;
  border-right:2px solid #d9dbea;
  border-bottom:2px solid #d9dbea;
  transform:rotate(45deg) translateY(-2px);
  color:transparent;
  font-size:0;
}
.cove-select-options {
  position:fixed;
  z-index:900;
  overflow:auto;
  padding:6px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  background:#20232f;
  box-shadow:0 18px 55px rgba(0,0,0,.58);
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.cove-select-option {
  width:100%;
  min-height:36px;
  display:flex;
  align-items:center;
  padding:7px 10px;
  border:0;
  border-radius:7px;
  color:#f4f5ff;
  background:transparent;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.cove-select-option:hover,
.cove-select-option:focus-visible { background:rgba(255,255,255,.07); outline:none; }
.cove-select-option.selected { background:color-mix(in srgb,var(--primary) 30%,#20232f); color:#fff; }
.profile-save-error {
  padding:10px 12px;
  border:1px solid rgba(255,101,125,.36);
  border-radius:10px;
  color:#ffd9df;
  background:rgba(104,28,43,.34);
  font-size:.68rem;
  line-height:1.45;
}


/* v1.57: mobile-safe profile setting popups.
   Generic profile editors stay centered on phones while retaining viewport-safe scrolling. */
.profile-editor-portal {
  overscroll-behavior: contain;
  touch-action: manipulation;
}
.profile-editor-portal > .profile-edit-panel {
  box-sizing: border-box;
}
@media (max-width:700px) {
  .profile-editor-portal {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    overflow:hidden;
  }
  .profile-editor-portal > .profile-editor-popup-backdrop {
    touch-action:none;
  }
  .profile-editor-portal > .profile-edit-panel {
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    display:grid;
    width:min(100%,560px) !important;
    max-width:560px;
    max-height:min(86dvh,720px) !important;
    margin:0 auto;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:18px;
    opacity:1;
    visibility:visible;
  }
  .profile-editor-portal > .profile-edit-panel > header {
    flex:none;
  }
  .profile-editor-portal .profile-editor-popup-actions {
    bottom:-18px;
    z-index:4;
  }
}

/* v1 runtime 2.1.59: display-name mentions and per-member sound settings */
.member-mention-link { appearance:none; border:0; background:transparent; padding:0; margin:0; color:inherit; font:inherit; cursor:pointer; text-align:left; }
.member-mention-link:hover .styled-text { filter:brightness(1.16); }
.member-mention-link:focus-visible { outline:2px solid rgba(91,155,255,.72); outline-offset:3px; border-radius:6px; }
.chat-mention { color:#5b9bff !important; -webkit-text-fill-color:#5b9bff !important; background:rgba(76,139,255,.12); border-radius:5px; padding:0 2px; font-weight:750; text-shadow:none !important; }
.profile-sound-settings { display:grid; gap:10px; }
.profile-sound-settings > label { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; padding:14px 15px; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:rgba(255,255,255,.035); cursor:pointer; }
.profile-sound-settings > label:hover { background:rgba(255,255,255,.055); border-color:rgba(126,114,255,.28); }
.profile-sound-settings > label > span { display:grid; gap:3px; min-width:0; }
.profile-sound-settings > label b { font-size:14px; color:var(--text,#f4f5ff); }
.profile-sound-settings > label small { color:var(--muted,#8e94aa); line-height:1.35; }
.profile-sound-settings input[type=checkbox] { appearance:none; -webkit-appearance:none; width:42px; height:24px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:#2b3040; position:relative; cursor:pointer; transition:.18s ease; flex:none; }
.profile-sound-settings input[type=checkbox]::after { content:""; position:absolute; width:18px; height:18px; left:2px; top:2px; border-radius:50%; background:#aeb4c8; box-shadow:0 2px 6px rgba(0,0,0,.32); transition:.18s ease; }
.profile-sound-settings input[type=checkbox]:checked { background:#7668ff; border-color:#8f84ff; }
.profile-sound-settings input[type=checkbox]:checked::after { transform:translateX(18px); background:#fff; }
.profile-sound-settings input[type=checkbox]:focus-visible { outline:2px solid rgba(118,104,255,.55); outline-offset:3px; }

/* v1 runtime 2.1.61: polished Owner community settings */
.settings-page-heading {
  align-items:center;
  margin-bottom:18px;
}
.settings-dashboard-form {
  width:100%;
  min-width:0;
  display:grid;
  gap:16px;
}
.settings-dashboard-grid {
  min-width:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:start;
}
.settings-dashboard-grid-top { grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); }
.settings-dashboard-grid-bottom { grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr); }
.settings-panel {
  min-width:0;
  overflow:hidden;
  box-shadow:0 16px 38px rgba(0,0,0,.12);
}
.settings-panel > header {
  min-width:0;
  padding:15px 17px;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0));
}
.settings-panel > header > span:first-child { min-width:0; }
.settings-panel > header b { font-size:.84rem; }
.settings-panel > header small {
  max-width:720px;
  color:#747b92;
  font-size:.66rem;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.settings-panel-icon {
  flex:0 0 34px;
  width:34px;
  height:34px;
  display:grid !important;
  place-items:center;
  border:1px solid rgba(118,104,255,.22);
  border-radius:11px;
  color:#b7b0ff;
  background:rgba(118,104,255,.09);
  font-size:.74rem;
  font-weight:850;
}
.settings-header-note {
  flex:0 0 auto;
  max-width:180px;
  padding:6px 9px;
  border:1px solid rgba(53,211,178,.18);
  border-radius:999px;
  color:#80dfc9;
  background:rgba(53,211,178,.07);
  font-size:.62rem;
  white-space:nowrap;
}
.settings-panel-body {
  min-width:0;
  padding:17px;
}
.settings-fields-stack {
  min-width:0;
  display:grid;
  gap:14px;
}
.settings-field-grid {
  min-width:0;
  display:grid;
  gap:12px;
}
.settings-field-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.settings-field,
.settings-limit-card,
.settings-age-card {
  min-width:0;
}
.settings-field > span,
.settings-limit-card > span,
.settings-age-card > span {
  color:#d9dbea;
  font-size:.72rem;
  font-weight:750;
}
.settings-field input,
.settings-field textarea,
.settings-field select,
.settings-age-card select,
.settings-number-unit input {
  min-width:0;
  width:100%;
  border-color:rgba(255,255,255,.085);
  background:#11131d;
}
.settings-field textarea { min-height:108px; }
.settings-field small,
.settings-limit-card small,
.settings-age-card small {
  min-width:0;
  color:#6f768d;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.branding-settings-layout {
  display:grid;
  grid-template-columns:minmax(185px,.42fr) minmax(0,1.58fr);
  gap:16px;
  align-items:start;
}
.settings-brand-preview {
  min-width:0;
  min-height:104px;
  margin:0;
  padding:16px;
  align-items:center;
  border-color:rgba(118,104,255,.16);
  background:linear-gradient(145deg,rgba(118,104,255,.09),rgba(255,255,255,.018));
}
.settings-brand-preview .brand-mark { flex:0 0 auto; }
.settings-brand-preview > span:last-child { min-width:0; }
.settings-brand-preview b,
.settings-brand-preview small {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.settings-file-field input[type="file"] {
  min-height:43px;
  padding:5px 6px;
  overflow:hidden;
  color:#8d93a8;
}
.settings-file-field input[type="file"]::file-selector-button {
  min-height:31px;
  margin-right:9px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  padding:5px 10px;
  color:#e9eaff;
  background:#282b3b;
  cursor:pointer;
}
.settings-inline-check {
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
  color:#aeb3c7;
  font-size:.72rem;
}
.settings-inline-check input { width:18px; height:18px; flex:0 0 auto; }
.settings-limit-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:10px;
}
.settings-limit-card {
  display:grid;
  gap:7px;
  padding:12px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:12px;
  background:#12141e;
}
.settings-limit-card > div,
.settings-number-unit {
  min-width:0;
  position:relative;
}
.settings-limit-card > div input,
.settings-number-unit input { padding-right:46px; }
.settings-limit-card > div em,
.settings-number-unit em {
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  color:#737b92;
  font-size:.63rem;
  font-style:normal;
  font-weight:800;
  pointer-events:none;
}
.settings-footnote {
  margin:12px 0 0;
  color:#656c82;
  font-size:.66rem;
  line-height:1.5;
}
.settings-age-range {
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr);
  gap:10px;
  align-items:stretch;
}
.settings-age-card {
  display:grid;
  align-content:start;
  gap:7px;
  padding:13px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:12px;
  background:#12141e;
}
.settings-age-divider {
  display:grid;
  place-items:center;
}
.settings-age-divider span {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
  color:#686f84;
  background:#11131c;
  font-size:.6rem;
  font-weight:800;
  text-transform:uppercase;
}
.settings-toggle-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.settings-toggle-card {
  min-width:0;
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:12px;
  background:#12141e;
  cursor:pointer;
}
.settings-toggle-card > span {
  min-width:0;
  display:grid;
  gap:4px;
}
.settings-toggle-card b { color:#f0f1fb; font-size:.74rem; }
.settings-toggle-card small {
  color:#70778d;
  font-size:.64rem;
  line-height:1.4;
  overflow-wrap:anywhere;
}
.settings-toggle-card input[type="checkbox"] {
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 42px;
  width:42px;
  height:24px;
  position:relative;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  padding:0;
  background:#252837;
  cursor:pointer;
  transition:.18s ease;
}
.settings-toggle-card input[type="checkbox"]::after {
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#8b91a4;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  transition:.18s ease;
}
.settings-toggle-card input[type="checkbox"]:checked {
  border-color:rgba(118,104,255,.55);
  background:linear-gradient(145deg,#7769ff,#5949c4);
}
.settings-toggle-card input[type="checkbox"]:checked::after {
  left:21px;
  background:#fff;
}
.settings-toggle-card-danger { border-color:rgba(255,101,127,.11); }
.settings-toggle-card-danger input[type="checkbox"]:checked {
  border-color:rgba(255,101,127,.5);
  background:linear-gradient(145deg,#d4516c,#a5364f);
}
.settings-save-bar {
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 15px;
  border:1px solid rgba(118,104,255,.18);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(118,104,255,.075),rgba(255,255,255,.018));
}
.settings-save-bar > span {
  min-width:0;
  display:grid;
  gap:3px;
}
.settings-save-bar b { font-size:.76rem; }
.settings-save-bar small { color:#747b91; font-size:.65rem; }
.settings-save-bar .button { min-width:190px; }

@media (max-width: 1120px) {
  .settings-dashboard-grid-top,
  .settings-dashboard-grid-bottom { grid-template-columns:1fr; }
  .branding-settings-layout { grid-template-columns:minmax(160px,.34fr) minmax(0,1fr); }
}
@media (max-width: 820px) {
  .branding-settings-layout { grid-template-columns:1fr; }
  .settings-brand-preview { min-height:auto; }
  .settings-field-grid.two,
  .settings-toggle-grid { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  .settings-page-heading { align-items:flex-start; }
  .settings-page-heading .status-pill { display:none; }
  .settings-panel > header { align-items:flex-start; }
  .settings-header-note { white-space:normal; text-align:right; }
  .settings-panel-body { padding:13px; }
  .settings-limit-grid { grid-template-columns:1fr; }
  .settings-age-range { grid-template-columns:1fr; }
  .settings-age-divider { height:18px; }
  .settings-age-divider span { width:auto; height:auto; border:0; background:transparent; }
  .settings-save-bar { align-items:stretch; flex-direction:column; }
  .settings-save-bar .button { width:100%; min-width:0; }
}

/* v1 runtime 2.1.64 · chat quality-of-life */
.jump-latest-button {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(139,126,255,.34);
  border-radius: 999px;
  color: #f4f5ff;
  background: rgba(25,27,41,.96);
  box-shadow: 0 12px 34px rgba(0,0,0,.38), 0 0 24px rgba(118,104,255,.12);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
  font: inherit;
  font-size: .69rem;
  cursor: pointer;
}
.jump-latest-button[hidden] { display: none !important; }
.jump-latest-button span { color: #a99fff; font-size: .95rem; }
.jump-latest-button b { font-weight: 850; }
.jump-latest-button:hover { border-color: rgba(139,126,255,.58); background: rgba(36,38,56,.98); }

.composer.drop-target-active,
.dm-compose.drop-target-active {
  position: relative;
  border-color: rgba(118,104,255,.75) !important;
  box-shadow: 0 0 0 3px rgba(118,104,255,.12), 0 18px 48px rgba(0,0,0,.42) !important;
}
.composer.drop-target-active::after,
.dm-compose.drop-target-active::after {
  content: 'Drop image to attach';
  position: absolute;
  inset: 4px;
  z-index: 20;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(186,178,255,.68);
  border-radius: 12px;
  color: #f5f3ff;
  background: rgba(28,29,44,.94);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .01em;
  pointer-events: none;
}

.dm-floating-window .dm-jump-latest {
  position: absolute;
  left: 50%;
  bottom: 92px;
  z-index: 12;
}
.dm-typing-indicator {
  position: static;
  z-index: 11;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 5px 14px 6px;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.055);
  border-radius: 0;
  color: #aeb4c8;
  background: rgba(18,20,30,.97);
  box-shadow: none;
  font-size: .62rem;
  pointer-events: none;
}
.dm-typing-indicator[hidden] { display: none !important; }
.dm-typing-indicator:not([hidden]) + .dm-floating-compose { border-top-color: transparent; }
.dm-typing-indicator > span { width: 18px; height: 18px; border-radius: 50%; background: rgba(118,104,255,.18); }
.dm-typing-indicator i { width: 4px; height: 4px; border-radius: 50%; background: #9f95ff; animation: coveTypingDots 1.05s ease-in-out infinite; }
.dm-typing-indicator i:nth-of-type(2) { animation-delay: .13s; }
.dm-typing-indicator i:nth-of-type(3) { animation-delay: .26s; }
.dm-typing-indicator b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
@keyframes coveTypingDots { 0%,60%,100% { opacity:.3; transform:translateY(0); } 30% { opacity:1; transform:translateY(-2px); } }

.dm-delivery-state {
  justify-self: end;
  margin: 3px 3px 0;
  color: #858ba0;
  font-size: .56rem;
  line-height: 1;
}
article.mine .dm-delivery-state { color: rgba(226,224,255,.64); }
.dm-pending-message { opacity: .72; }
.dm-send-failed { opacity: 1; }
.dm-send-failed .dm-delivery-state { color: #ff8b96 !important; }

.empty-state.dm-empty-state {
  min-height: 180px;
  width: min(340px,90%);
  align-self: center;
  margin: auto;
  padding: 24px 18px;
  border: 1px dashed rgba(139,126,255,.22);
  border-radius: 18px;
  background: radial-gradient(circle at 50% 0,rgba(118,104,255,.08),transparent 62%);
}
.empty-state.dm-empty-state > span { width: 42px; height: 42px; display:grid; place-items:center; border-radius:14px; background:rgba(118,104,255,.11); }

@media (max-width:760px) {
  .jump-latest-button:not(.dm-jump-latest) { bottom: calc(78px + env(safe-area-inset-bottom)); }
  .dm-floating-window .dm-jump-latest { bottom: 82px; }
  .dm-typing-indicator { padding: 5px 10px 6px; }
}
.dm-page-typing {
  width: auto;
  min-height: 28px;
  margin: 0 16px 6px;
  padding: 5px 9px;
  align-self: flex-start;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  background: rgba(20,22,33,.94);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  pointer-events: none;
}
.empty-inline b { color: #e9ebf6; font-size: .75rem; }

/* v1 runtime 2.1.68: audit logs, safety flow, sessions, and flood protection */
.report-status{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:rgba(255,255,255,.07);color:#c9ccdb}.report-status-open{background:rgba(255,186,73,.13);color:#ffd27b}.report-status-reviewing{background:rgba(118,104,255,.16);color:#b8b0ff}.report-status-resolved{background:rgba(77,207,151,.14);color:#8ce7bc}.report-status-dismissed{background:rgba(255,255,255,.08);color:#aeb2c2}.report-quick-meta{gap:8px;align-items:center}.report-quick-meta small{margin-left:auto}.report-assignee{margin:-2px 0 8px;color:#9da2b6;font-size:12px}.report-review-details{margin:10px 0;padding:9px 10px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025)}.report-review-details summary{cursor:pointer;color:#c8cbe0;font-size:12px;font-weight:700}.report-review-details textarea,.report-review-details input{width:100%;margin-top:8px}.report-quick-item footer{flex-wrap:wrap}.my-report-history{border-top:1px solid rgba(255,255,255,.08);padding:14px 18px 18px}.my-report-history>header{margin-bottom:10px}.my-report-history>header span{display:grid;gap:2px}.my-report-history>header b{font-size:13px}.my-report-history>header small{color:#858a9e}.my-report-history>div{display:grid;gap:7px}.my-report-history article{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 11px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.025)}.my-report-history article>span{display:grid;gap:3px;min-width:0}.my-report-history article b{font-size:12px}.my-report-history article small{color:#858a9e}.my-report-history article p{margin:3px 0 0;color:#b6bacb;font-size:12px;line-height:1.45}

.session-device-list{display:grid;gap:9px}.session-device-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.025)}.session-device-card.current{border-color:rgba(118,104,255,.28);background:rgba(118,104,255,.06)}.session-device-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.06);font-size:18px}.session-device-card>div{display:grid;gap:3px;min-width:0}.session-device-card b{font-size:13px}.session-device-card b em{display:inline-flex;margin-left:5px;padding:2px 6px;border-radius:999px;background:rgba(77,207,151,.13);color:#8ce7bc;font-size:9px;font-style:normal;text-transform:uppercase;letter-spacing:.05em}.session-device-card small{overflow:hidden;text-overflow:ellipsis;color:#8f94a8;font-size:11px;white-space:nowrap}.session-device-actions{justify-content:space-between!important}

.audit-heading{align-items:center}.audit-heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}.audit-heading-actions form{margin:0}.audit-filter-card{padding:14px}.audit-filter-form{display:grid;grid-template-columns:minmax(220px,1fr) minmax(150px,.45fr) minmax(130px,.35fr) auto auto;gap:10px;align-items:end}.audit-filter-form label{display:grid;gap:6px;color:#9da2b6;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.audit-log-list{display:grid;gap:9px;margin-top:12px}.audit-log-entry{display:grid;grid-template-columns:10px minmax(0,1fr);gap:12px;padding:14px 16px}.audit-log-mark{display:flex;justify-content:center}.audit-log-mark span{display:block;width:4px;height:100%;min-height:58px;border-radius:999px;background:#6e7387}.audit-log-entry.severity-warning .audit-log-mark span{background:#d69a4b}.audit-log-entry.severity-critical .audit-log-mark span{background:#d45d6f}.audit-log-main>header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.audit-log-main>header>span{display:grid;gap:3px}.audit-log-main>header b{font-size:14px}.audit-log-main>header small{color:#777d92;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}.audit-severity{padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.06);color:#aeb2c2;font-size:9px;font-style:normal;font-weight:800;letter-spacing:.06em}.severity-warning .audit-severity{background:rgba(214,154,75,.13);color:#efbd78}.severity-critical .audit-severity{background:rgba(212,93,111,.13);color:#ef8a98}.audit-log-meta{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:10px;color:#a8acbd;font-size:11px}.audit-log-meta span{display:flex;gap:5px}.audit-log-meta b{color:#74798d;font-size:9px;text-transform:uppercase;letter-spacing:.04em}.audit-details{margin-top:10px}.audit-details summary{cursor:pointer;color:#9aa0b4;font-size:11px}.audit-details pre{overflow:auto;max-height:320px;margin:8px 0 0;padding:10px;border-radius:9px;background:#0c0d14;color:#bfc3d4;font-size:10px;line-height:1.5}.audit-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0}.audit-pagination span{color:#9297aa;font-size:12px}.spam-protection-panel .settings-toggle-card{margin:0}.spam-protection-panel select{width:100%}

@media(max-width:800px){.audit-filter-form{grid-template-columns:1fr 1fr}.audit-filter-form label:first-of-type{grid-column:1/-1}.audit-log-meta{display:grid;grid-template-columns:1fr 1fr}.session-device-card{grid-template-columns:auto minmax(0,1fr)}.session-device-card>button{grid-column:1/-1;width:100%}.my-report-history article{align-items:flex-start}.settings-dashboard-grid-bottom{grid-template-columns:1fr!important}}
@media(max-width:520px){.audit-heading{align-items:flex-start}.audit-heading-actions{width:100%;justify-content:space-between}.audit-filter-form{grid-template-columns:1fr}.audit-filter-form label:first-of-type{grid-column:auto}.audit-log-meta{grid-template-columns:1fr}.session-device-actions{flex-direction:column}.session-device-actions .button{width:100%}.my-report-history article{display:grid}.report-quick-item footer>.button,.report-quick-item footer>.report-take-action-wrap{flex:1}.report-quick-item footer>.report-take-action-wrap>.button{width:100%}}

/* v1 runtime 2.1.68: permission-gated staff profile tools */
.profile-modal-content .staff-profile-editor{display:none}
.profile-modal.staff-editing-profile .profile-stats,
.profile-modal.staff-editing-profile .profile-grid,
.profile-modal.staff-editing-profile .profile-actions,
.profile-modal.staff-editing-profile .profile-tabs,
.profile-modal.staff-editing-profile .profile-gallery-panel,
.profile-modal.staff-editing-profile .profile-music,
.profile-modal.staff-editing-profile .profile-staff-notes-public,
.profile-modal.staff-editing-profile .profile-like-anchor{display:none!important}
.profile-modal.staff-editing-profile .staff-profile-editor{display:block}
.profile-staff-notes-public{margin:14px 18px;padding:0;overflow:hidden}
.profile-staff-notes-public>header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.025)}
.profile-staff-notes-public>header span{display:grid;gap:3px}.profile-staff-notes-public>header h2{margin:0}.profile-staff-notes-public>header p{margin:0;color:var(--muted);font-size:.66rem}.profile-staff-notes-public>header em{padding:4px 8px;border-radius:999px;background:rgba(118,104,255,.12);color:#b9b2ff;font-size:.58rem;font-style:normal;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.public-staff-note-list{display:grid}.public-staff-note-list article{padding:13px 16px;border-bottom:1px solid var(--line)}.public-staff-note-list article:last-child{border-bottom:0}.public-staff-note-list p{margin:0;color:#d7d9e4;font-size:.74rem;line-height:1.55}.public-staff-note-list footer{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;color:var(--muted);font-size:.59rem}.public-staff-note-list footer b{color:#f0f1f7}.public-staff-note-list footer time{margin-left:auto}
.staff-profile-editor{margin:15px 18px 4px;overflow:hidden;border:1px solid rgba(118,104,255,.25);border-radius:17px;background:#141620;box-shadow:0 16px 42px rgba(0,0,0,.22)}
.staff-profile-editor-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 19px 15px;border-bottom:1px solid var(--line);background:linear-gradient(145deg,rgba(118,104,255,.12),transparent 58%)}
.staff-profile-editor-heading>span:first-child{display:grid;gap:3px}.staff-profile-editor-heading h2{margin:0;font-size:1rem}.staff-profile-editor-heading p{margin:0;color:var(--muted);font-size:.66rem;line-height:1.45}.staff-profile-target{flex:none;padding:5px 8px;border:1px solid rgba(255,255,255,.08);border-radius:999px;color:#aeb2c4;background:rgba(255,255,255,.035);font-size:.58rem;font-weight:700}
.staff-profile-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:5px;padding:7px;border-bottom:1px solid var(--line);background:#10121b}.staff-profile-tabs button{min-height:38px;border:0;border-radius:9px;color:#9fa4b8;background:transparent;font:inherit;font-size:.69rem;font-weight:800;cursor:pointer}.staff-profile-tabs button:hover{color:#e9eaff;background:rgba(255,255,255,.045)}.staff-profile-tabs button.active{color:#fff;background:rgba(118,104,255,.15);box-shadow:inset 0 0 0 1px rgba(118,104,255,.2)}.staff-profile-tabs button span{display:inline-flex;min-width:17px;height:17px;align-items:center;justify-content:center;margin-left:4px;padding:0 4px;border-radius:999px;background:rgba(255,255,255,.08);font-size:.54rem}
.staff-profile-panel[hidden]{display:none!important}.staff-profile-panel{display:grid;gap:14px;padding:17px 19px 19px}.staff-profile-panel form[data-staff-profile-save]{display:grid;gap:13px;margin:0}.staff-profile-panel label{display:grid;gap:6px;color:#c8cbd8;font-size:.66rem;font-weight:700}.staff-profile-panel label small{color:var(--muted);font-size:.57rem;font-weight:500}.staff-profile-panel input,.staff-profile-panel select,.staff-profile-panel textarea{width:100%}
.staff-profile-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.staff-profile-section-head>span{display:grid;gap:3px}.staff-profile-section-head b{font-size:.82rem}.staff-profile-section-head small{color:var(--muted);font-size:.62rem;line-height:1.45}.staff-profile-section-head>em{flex:none;padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.055);color:#aab0c3;font-size:.53rem;font-style:normal;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.staff-profile-form-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px}.staff-profile-form-actions small{color:var(--muted);font-size:.59rem}.staff-account-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.staff-account-facts>span{min-width:0;display:grid;gap:4px;padding:11px 12px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.025)}.staff-account-facts small{color:#7f8599;font-size:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.055em}.staff-account-facts b{min-width:0;overflow-wrap:anywhere;color:#e8e9f1;font-size:.69rem}
.staff-profile-subsection{display:grid;gap:8px;padding-top:3px}.staff-profile-subsection>header span{display:grid;gap:3px}.staff-profile-subsection>header b{font-size:.75rem}.staff-profile-subsection>header small{color:var(--muted);font-size:.59rem;line-height:1.45}.staff-device-list,.staff-linked-list,.staff-note-manage-list,.staff-action-history{display:grid;gap:7px}.staff-device-list article{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:10px 11px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.022)}.staff-device-list article>div{min-width:0;display:grid;gap:3px}.staff-device-list article b{font-size:.69rem}.staff-device-list article small{overflow:hidden;text-overflow:ellipsis;color:#888ea2;font-size:.57rem;white-space:nowrap}
.staff-linked-list>a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border:1px solid rgba(255,255,255,.07);border-radius:11px;color:inherit;background:rgba(255,255,255,.022);text-decoration:none}.staff-linked-list>a:hover{border-color:rgba(118,104,255,.3);background:rgba(118,104,255,.055)}.staff-linked-list>a>span{min-width:0;display:grid;gap:3px}.staff-linked-list>a b{font-size:.7rem}.staff-linked-list>a small{color:var(--muted);font-size:.57rem}.staff-linked-list>a>em{flex:none;display:grid;gap:2px;max-width:42%;color:#c8cbda;font-size:.59rem;font-style:normal;text-align:right}.staff-linked-list>a>em small{white-space:nowrap}
.staff-note-compose{display:grid;gap:9px;margin:0}.staff-note-compose textarea{resize:vertical}.staff-note-compose .button{justify-self:end}.staff-note-manage-list article{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.022)}.staff-note-manage-list article>div{min-width:0;display:grid;gap:7px}.staff-note-manage-list p{margin:0;color:#d8dae5;font-size:.69rem;line-height:1.5}.staff-note-manage-list small{color:var(--muted);font-size:.56rem}.staff-note-manage-list form{margin:0;flex:none}
.staff-action-history article{display:grid;grid-template-columns:4px minmax(0,1fr);gap:10px;padding:10px 11px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.022)}.staff-action-history article>i{width:4px;border-radius:999px;background:#6f7487}.staff-action-history article.severity-warning>i{background:#d69a4b}.staff-action-history article.severity-critical>i{background:#d45d6f}.staff-action-history article>div{min-width:0}.staff-action-history header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.staff-action-history header b{font-size:.68rem;line-height:1.4}.staff-action-history time{flex:none;color:#777d90;font-size:.53rem}.staff-action-history p{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 0}.staff-action-history p span{padding:3px 6px;border-radius:999px;background:rgba(255,255,255,.05);color:#959bae;font-size:.52rem}
@media(max-width:700px){.profile-staff-notes-public,.staff-profile-editor{margin-left:10px;margin-right:10px}.staff-profile-editor-heading{display:grid;padding:15px 14px 13px}.staff-profile-target{justify-self:start}.staff-profile-panel{padding:14px}.staff-account-facts{grid-template-columns:1fr 1fr}.staff-profile-form-actions{align-items:stretch;flex-direction:column}.staff-profile-form-actions .button,.staff-note-compose .button{width:100%;justify-content:center}.staff-linked-list>a{align-items:flex-start}.staff-linked-list>a>em{max-width:48%}.staff-action-history header{display:grid;gap:3px}.public-staff-note-list footer time{margin-left:0}}
@media(max-width:440px){.staff-account-facts{grid-template-columns:1fr}.staff-profile-tabs{grid-template-columns:1fr 1fr}.staff-note-manage-list article{display:grid}.staff-note-manage-list article form,.staff-note-manage-list article .button{width:100%}.staff-linked-list>a{display:grid}.staff-linked-list>a>em{max-width:none;text-align:left}}