:root {
  --bg-primary: #050505;       /* Starless Black */
  --bg-secondary: #1a2a3a;     /* Eclipse Blue */
  --accent-main: #3de0c4;      /* Phantom Cyan */
  --accent-alt: #00a89d;       /* Spectral Teal */
  --bg-depth: #2f1b3a;         /* Grave Violet */
  --text-primary: #ffffff;     /* Frost White */
  --text-secondary: #b6b6b6;  /* Ash Grey */
  --text-muted: #888888;       /* Shadow Grey */
  --alert: #e85d3f;            /* Rift Ember */
  --line: rgba(61, 224, 196, 0.14);
  --line-soft: rgba(182, 182, 182, 0.12);
  --surface: rgba(26, 42, 58, 0.76);
  --surface-strong: #1a2a3a;
  --ink-0: var(--bg-primary);
  --ink-1: var(--bg-primary);
  --ink-2: var(--bg-primary);
  --ink-3: var(--bg-depth);
  --ink-4: rgba(61, 224, 196, 0.11);
  --muted: var(--text-muted);
  --soft: var(--text-secondary);
  --text: var(--text-primary);
  --violet: var(--accent-main);
  --violet-bright: var(--accent-main);
  --cyan: var(--accent-alt);
  --rose: var(--alert);
  --amber: var(--alert);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg-primary); }
body { min-height: 100%; margin: 0; background: radial-gradient(circle at 78% 4%, rgba(47, 27, 58, .72), transparent 34%), var(--bg-primary); color: var(--text-primary); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea, select { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 50%; z-index: 200; transform: translate(-50%, -150%); border-radius: 8px; background: var(--accent-main); color: var(--bg-primary); padding: 10px 15px; font-size: 13px; font-weight: 800; transition: transform .15s ease; }
.skip-link:focus { transform: translate(-50%, 0); }

.site-header { position: sticky; top: 0; z-index: 40; display: flex; min-height: 70px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(5, 5, 5, .9); padding: 0 clamp(18px, 5vw, 70px); backdrop-filter: blur(18px); }
.site-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 900; letter-spacing: -.04em; }
.wolf-mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: linear-gradient(145deg, var(--accent-main), var(--accent-alt)); color: var(--bg-primary); font-size: 15px; box-shadow: 0 8px 24px rgba(61, 224, 196, .22); }
.site-header nav { display: flex; align-items: center; gap: 6px; }
.site-header nav > a, .site-header nav button { display: inline-flex; min-height: 38px; align-items: center; cursor: pointer; border-radius: 9px; background: transparent; color: var(--text-secondary); padding: 0 12px; font-size: 12px; font-weight: 700; }
.site-header nav > a:hover, .site-header nav button:hover, .site-header nav > a.active { background: rgba(61, 224, 196, .1); color: var(--accent-main); }
.site-header nav form { margin: 0; }
.site-header nav .nav-cta { background: var(--accent-main); color: var(--bg-primary); }
.nav-messages, .nav-friends { position: relative; gap: 6px; }
.nav-messages [data-direct-nav-badge], .nav-friends [data-friend-nav-badge] { display: inline-grid; min-width: 17px; height: 17px; place-items: center; border-radius: 999px; background: var(--alert); color: var(--text-primary); padding: 0 5px; font-size: 7px; font-style: normal; font-weight: 900; }
.nav-messages [data-direct-nav-badge][hidden], .nav-friends [data-friend-nav-badge][hidden] { display: none; }

.flash-stack { position: fixed; top: 82px; right: 18px; z-index: 100; display: grid; width: min(390px, calc(100vw - 36px)); gap: 8px; }
.flash { border: 1px solid rgba(61, 224, 196, .3); border-radius: 11px; background: var(--bg-secondary); padding: 12px 15px; color: var(--text-primary); font-size: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .3); }
.flash.error { border-color: rgba(232, 93, 63, .55); }
.flash.success { border-color: rgba(61, 224, 196, .45); }

.dashboard-page main { width: min(1320px, calc(100% - 36px)); margin: 0 auto; padding: 46px 0 80px; }
.dashboard-shell { display: grid; gap: 22px; }
.dashboard-welcome { display: flex; align-items: end; justify-content: space-between; gap: 28px; border-bottom: 1px solid var(--line); padding: 8px 2px 28px; }
.dashboard-welcome h1 { max-width: 820px; margin: 0; color: var(--text-primary); font-size: clamp(32px, 5vw, 54px); line-height: 1.04; letter-spacing: -.052em; }
.dashboard-welcome p { margin: 12px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.dashboard-welcome .primary-button { flex: 0 0 auto; gap: 8px; }
.dashboard-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: rgba(26, 42, 58, .46); }
.dashboard-stats article { display: flex; min-height: 86px; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; }
.dashboard-stats article + article { border-left: 1px solid var(--line); }
.dashboard-stats span { color: var(--text-muted); font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.dashboard-stats strong { color: var(--text-primary); font-size: 24px; letter-spacing: -.04em; }
.dashboard-stats .status-ready { display: flex; align-items: center; gap: 8px; color: var(--accent-main); font-size: 14px; }
.dashboard-stats .mention-total { color: var(--alert); }
.status-ready i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-main); box-shadow: 0 0 12px rgba(61, 224, 196, .7); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, .8fr); align-items: start; gap: 18px; }
.dashboard-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(26, 42, 58, .82), rgba(5, 5, 5, .92)); box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 20px 70px rgba(0, 0, 0, .18); }
.panel-heading { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); padding: 18px 21px; }
.panel-heading .kicker { margin-bottom: 5px; }
.panel-heading h2, .account-panel h2 { margin: 0; font-size: 19px; letter-spacing: -.035em; }
.panel-heading > a { color: var(--accent-main); font-size: 10px; font-weight: 800; }
.panel-heading > a:hover { color: var(--text-primary); }
.dashboard-server-list { display: grid; padding: 7px; }
.dashboard-server { display: flex; min-width: 0; align-items: center; gap: 14px; border-radius: 12px; padding: 13px 14px; }
.dashboard-server:hover { background: rgba(61, 224, 196, .075); }
.dashboard-server .community-icon { width: 50px; height: 50px; border-radius: 15px; }
.dashboard-server-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.dashboard-server-copy strong { font-size: 14px; }
.dashboard-server-copy small { color: var(--accent-main); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.dashboard-server-copy > span { overflow: hidden; color: var(--text-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.panel-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.panel-actions a { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 10px; padding: 16px 19px; }
.panel-actions a + a { border-left: 1px solid var(--line); }
.panel-actions a:hover { background: rgba(0, 168, 157, .1); }
.panel-actions a > span { grid-row: 1 / 3; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: rgba(61, 224, 196, .12); color: var(--accent-main); font-size: 17px; }
.panel-actions strong { align-self: end; font-size: 11px; }
.panel-actions small { color: var(--text-muted); font-size: 8px; }
.dashboard-side { display: grid; gap: 18px; }
.activity-list { display: grid; padding: 7px; }
.activity-list > a { display: flex; min-width: 0; align-items: center; gap: 10px; border-radius: 11px; padding: 9px 10px; }
.activity-list > a:hover { background: rgba(61, 224, 196, .07); }
.activity-list > a > span:last-child { display: grid; min-width: 0; flex: 1; gap: 2px; }
.activity-list strong, .activity-list small, .activity-list em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-list strong { font-size: 10px; }
.activity-list small { color: var(--text-secondary); font-size: 9px; }
.activity-list em { color: var(--text-muted); font-size: 7px; font-style: normal; }
.dashboard-empty { display: flex; align-items: center; gap: 12px; padding: 24px; color: var(--text-muted); }
.dashboard-empty > span { color: var(--accent-main); font-size: 25px; }
.dashboard-empty > div { display: grid; gap: 3px; }
.dashboard-empty strong { color: var(--text-primary); font-size: 11px; }
.dashboard-empty small { font-size: 9px; }
.dashboard-empty.compact { padding: 28px 16px; }
.account-panel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 18px; }
.account-avatar { width: 46px; height: 46px; border-radius: 14px; font-size: 12px; }
.account-panel .kicker { margin-bottom: 3px; }
.account-panel p { margin: 2px 0 0; color: var(--text-muted); font-size: 9px; }
.account-panel > a { border: 1px solid var(--line); border-radius: 9px; color: var(--accent-main); padding: 8px 10px; font-size: 9px; font-weight: 800; }
.account-panel > a:hover { background: var(--accent-main); color: var(--bg-primary); }

.discover-page main { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: clamp(48px, 8vw, 92px) 0 80px; }
.discover-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.kicker { display: block; margin-bottom: 10px; color: var(--violet-bright); font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.discover-heading h1, .form-card h1 { margin: 0; font-size: clamp(34px, 6vw, 62px); line-height: 1; letter-spacing: -.055em; }
.discover-heading p { max-width: 610px; margin: 14px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.primary-button, .full-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; cursor: pointer; border-radius: 11px; background: linear-gradient(135deg, var(--accent-main), var(--accent-alt)); color: var(--bg-primary); padding: 0 18px; font-size: 12px; font-weight: 850; box-shadow: 0 12px 30px rgba(0, 168, 157, .2); }
.primary-button:hover, .full-button:hover { filter: brightness(1.1); }
.community-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.community-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(26, 42, 58, .92), rgba(5, 5, 5, .96)); box-shadow: inset 0 1px rgba(255, 255, 255, .03); }
.community-card-main { display: flex; min-height: 138px; align-items: center; gap: 16px; padding: 22px; }
.community-card-main:hover { background: rgba(255, 255, 255, .025); }
.community-icon { display: grid; width: 58px; height: 58px; flex: 0 0 auto; place-items: center; border-radius: 18px; color: white; font-size: 14px; font-weight: 900; box-shadow: inset 0 1px rgba(255, 255, 255, .2); }
.community-copy { display: grid; min-width: 0; flex: 1; gap: 5px; }
.community-copy strong { font-size: 17px; letter-spacing: -.02em; }
.community-copy > span:last-child { overflow: hidden; color: var(--text-muted); font-size: 11px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.community-meta { color: var(--accent-main); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.card-arrow { color: var(--accent-main); font-size: 20px; }
.community-channel-preview { display: flex; min-height: 44px; align-items: center; gap: 6px; overflow-x: auto; border-top: 1px solid var(--line); padding: 8px 14px; }
.community-channel-preview a, .community-channel-preview span { flex: 0 0 auto; border-radius: 7px; background: rgba(61, 224, 196, .055); color: var(--text-muted); padding: 6px 8px; font-size: 9px; }
.community-channel-preview a:hover { background: rgba(61, 224, 196, .12); color: var(--accent-main); }
.discover-search { display: flex; gap: 8px; margin: 0 0 10px; }
.discover-search input[type="search"] { flex: 1; min-height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-secondary); color: var(--text); padding: 0 14px; outline: none; }
.discover-search input[type="search"]:focus { border-color: rgba(61, 224, 196, .5); }
.discover-search button { min-height: 42px; border-radius: 10px; background: var(--accent-main); border: 0; color: var(--accent-contrast, #00110d); padding: 0 18px; font-weight: 700; cursor: pointer; }
.discover-clear { align-self: center; color: var(--text-muted); font-size: 12px; }
.discover-count { margin: 0 0 16px; color: var(--text-muted); font-size: 12px; }
.community-card-action { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); padding: 10px 14px; }
.card-btn { display: inline-flex; min-height: 32px; align-items: center; justify-content: center; border-radius: 8px; padding: 0 14px; font-size: 12px; font-weight: 700; text-decoration: none; }
a.card-btn { background: rgba(61, 224, 196, .1); color: var(--accent-main); }
a.card-btn:hover { background: rgba(61, 224, 196, .18); }
button.card-btn.join { border: 0; background: var(--accent-main); color: var(--accent-contrast, #00110d); cursor: pointer; }
button.card-btn.join:hover { filter: brightness(1.1); }
.discover-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 22px 0 0; color: var(--text-muted); font-size: 13px; }
.discover-pagination a { color: var(--accent-main); text-decoration: none; }
.discover-pagination a:hover { text-decoration: underline; }
.empty-panel { grid-column: 1 / -1; display: grid; justify-items: center; border: 1px dashed rgba(255, 255, 255, .13); border-radius: 18px; padding: 60px 20px; text-align: center; }
.empty-panel h2 { margin: 14px 0 7px; }
.empty-panel p { margin: 0; color: var(--muted); }
.empty-mark { color: var(--violet-bright); font-size: 34px; }

.form-page { display: grid; min-height: calc(100dvh - 70px); place-items: center; padding: 40px 18px 70px; }
.form-card { display: grid; width: min(620px, 100%); gap: 17px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, rgba(26, 42, 58, .96), rgba(5, 5, 5, .98)); padding: clamp(24px, 5vw, 42px); box-shadow: 0 24px 80px rgba(0, 0, 0, .3); }
.form-card.compact-card { width: min(480px, 100%); }
.form-card h1 { font-size: clamp(30px, 5vw, 44px); }
.form-card > p { margin: -4px 0 3px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.form-field { display: grid; gap: 7px; }
.form-field > span { color: var(--text-secondary); font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.form-field input, .form-field textarea, .form-field select { width: 100%; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: var(--bg-primary); padding: 12px 13px; color: var(--text); font-size: 12px; }
.form-field input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent-main); }
.form-field textarea { resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: rgba(61, 224, 196, .75); box-shadow: 0 0 0 3px rgba(61, 224, 196, .1); }
.form-field small { color: var(--text-muted); font-size: 9px; line-height: 1.5; }
.form-field small ul { margin: 0; padding-left: 18px; }
.field-error, .form-errors { color: var(--alert); font-size: 10px; font-weight: 700; }
.form-errors ul { margin: 0; padding-left: 18px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.form-actions a, .form-actions button { display: inline-flex; min-height: 41px; align-items: center; justify-content: center; cursor: pointer; border-radius: 9px; background: rgba(61, 224, 196, .1); color: var(--text-secondary); padding: 0 15px; font-size: 11px; font-weight: 800; }
.form-actions button { background: var(--accent-main); color: var(--bg-primary); }
.full-button { width: 100%; border: 0; }
.form-footnote { margin: 0 !important; text-align: center; }
.form-footnote a { color: var(--accent-main); font-weight: 800; }

.chat-page { overflow: hidden; }
.chat-app { display: grid; grid-template-columns: 72px 258px minmax(0, 1fr) 242px; height: 100dvh; min-height: 580px; background: var(--bg-primary); }
.server-rail { z-index: 30; display: flex; min-height: 0; flex-direction: column; align-items: center; gap: 10px; overflow-y: auto; border-right: 1px solid var(--line); background: var(--bg-primary); padding: 13px 9px; scrollbar-width: none; }
.server-rail::-webkit-scrollbar { display: none; }
.brand-server, .server-orb { position: relative; display: grid; width: 47px; height: 47px; flex: 0 0 auto; place-items: center; border-radius: 16px; background: var(--bg-depth); color: var(--text-primary); font-size: 12px; font-weight: 900; transition: border-radius .15s ease, filter .15s ease; }
.brand-server { background: linear-gradient(145deg, var(--accent-main), var(--accent-alt)); color: var(--bg-primary); font-size: 16px; box-shadow: 0 8px 26px rgba(61, 224, 196, .22); }
.server-orb::before { position: absolute; left: -12px; width: 4px; height: 0; border-radius: 0 3px 3px 0; background: var(--accent-main); content: ""; transition: height .15s ease; }
.server-orb:hover, .server-orb.active { border-radius: 12px; filter: brightness(1.12); }
.server-orb:hover::before { height: 19px; }
.server-orb.active::before { height: 34px; }
.server-orb.utility { background: var(--ink-3); color: var(--cyan); font-size: 21px; }
.server-orb.utility:hover { background: var(--accent-alt); color: var(--bg-primary); }
.direct-orb > i, .friends-orb > i { position: absolute; top: -4px; right: -5px; display: grid; min-width: 17px; height: 17px; place-items: center; border: 2px solid var(--bg-primary); border-radius: 999px; background: var(--alert); color: var(--text-primary); padding: 0 4px; font-size: 7px; font-style: normal; line-height: 1; }
.direct-orb > i[hidden], .friends-orb > i[hidden] { display: none; }
.rail-divider { width: 30px; height: 1px; background: var(--line); }

.channel-sidebar { position: relative; z-index: 20; display: flex; min-width: 0; min-height: 0; flex-direction: column; border-right: 1px solid var(--line); background: var(--bg-secondary); }
.server-title { display: flex; min-height: 70px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 0 15px 0 17px; }
.server-title div { display: grid; gap: 4px; }
.server-title div span { color: var(--violet-bright); font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.server-title div strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.server-title > a { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: var(--muted); }
.server-title > a:hover { background: rgba(61, 224, 196, .1); color: var(--accent-main); }
.server-summary { display: flex; align-items: center; gap: 10px; margin: 12px 11px 2px; border: 1px solid rgba(61, 224, 196, .22); border-radius: 11px; background: linear-gradient(120deg, rgba(61, 224, 196, .1), rgba(47, 27, 58, .38)); padding: 10px 12px; }
.server-summary > span { color: var(--accent-main); filter: drop-shadow(0 0 7px rgba(61, 224, 196, .7)); }
.server-summary div { display: grid; gap: 2px; }
.server-summary strong { font-size: 10px; }
.server-summary small { color: var(--muted); font-size: 9px; }
.channel-list { min-height: 0; flex: 1; overflow-y: auto; padding: 10px 9px 18px; scrollbar-color: var(--accent-alt) transparent; scrollbar-width: thin; }
.channel-list section + section { margin-top: 18px; }
.channel-list section > header { display: flex; align-items: center; gap: 4px; padding: 0 7px 5px; color: var(--text-muted); }
.channel-list section > header strong { flex: 1; font-size: 8px; letter-spacing: .13em; }
.channel-list section > header a { display: grid; width: 20px; height: 20px; place-items: center; font-size: 16px; }
.channel-link { position: relative; display: flex; height: 35px; align-items: center; gap: 8px; border-radius: 8px; color: var(--text-secondary); padding: 0 9px; font-size: 12px; font-weight: 650; }
.channel-link > span:first-child { color: var(--text-muted); font-size: 18px; font-weight: 400; }
.channel-link > b { min-width: 0; overflow: hidden; flex: 1; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.channel-link:hover { background: rgba(61, 224, 196, .07); color: var(--text-primary); }
.channel-link.active { background: linear-gradient(90deg, rgba(61, 224, 196, .2), rgba(0, 168, 157, .08)); color: var(--text-primary); }
.channel-link.active::before { position: absolute; left: -9px; width: 3px; height: 21px; border-radius: 0 3px 3px 0; background: var(--accent-main); content: ""; }
.channel-link.unread > b { color: var(--text-primary); font-weight: 850; }
.channel-badges { display: flex; flex: 0 0 auto; align-items: center; gap: 3px; }
.channel-badges i, .channel-badges em { min-width: 18px; border-radius: 999px; padding: 3px 5px; font-size: 7px; font-style: normal; font-weight: 900; line-height: 1; text-align: center; }
.channel-badges i { background: var(--alert); color: var(--text-primary); }
.channel-badges em { background: rgba(61, 224, 196, .14); color: var(--accent-main); }
.channel-item { position: relative; display: flex; align-items: center; }
.channel-item .channel-link { min-width: 0; flex: 1; padding-right: 31px; }
.channel-edit-link { position: absolute; right: 5px; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 6px; color: var(--text-muted); font-size: 10px; opacity: 0; }
.channel-item:hover .channel-edit-link, .channel-edit-link:focus { opacity: 1; }
.channel-edit-link:hover { background: rgba(61, 224, 196, .12); color: var(--accent-main); }
.channel-header-edit { display: inline-grid; margin-left: 6px; width: 20px; height: 20px; place-items: center; border-radius: 5px; color: var(--text-muted); font-size: 12px; text-decoration: none; vertical-align: middle; }
.channel-header-edit:hover { background: rgba(61, 224, 196, .12); color: var(--accent-main); }
  .voice-presence { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 26px; }
  .voice-presence-pill { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 6px; font-size: 10px; color: var(--text-secondary); }
  .voice-presence-pill .avatar { width: 18px; height: 18px; border-radius: 6px; font-size: 6px; }
  .voice-presence-pill em { min-width: 0; overflow: hidden; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
  .voice-presence-empty { padding: 2px 4px 6px 4px; font-size: 9px; color: var(--text-muted); }
.account-dock { display: flex; min-height: 61px; align-items: center; gap: 9px; border-top: 1px solid var(--line); background: var(--bg-primary); padding: 8px 10px; }
.account-dock > span:nth-child(2) { display: grid; min-width: 0; flex: 1; gap: 2px; }
.account-dock strong, .account-dock small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dock strong { font-size: 10px; }
.account-dock small { color: var(--muted); font-size: 8px; }
.account-dock > a { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; color: var(--muted); }
.account-dock > a:hover { background: var(--ink-4); color: white; }

.avatar, .message-avatar { position: relative; display: grid; flex: 0 0 auto; place-items: center; color: white; font-weight: 900; letter-spacing: -.04em; box-shadow: inset 0 1px rgba(255, 255, 255, .2); }
.avatar { width: 34px; height: 34px; border-radius: 11px; font-size: 9px; }
.message-avatar { width: 38px; height: 38px; border-radius: 13px; font-size: 10px; }
.avatar i { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border: 3px solid var(--bg-primary); border-radius: 50%; background: var(--text-muted); }
.avatar i.online { background: var(--accent-main); }
.avatar i.offline { background: var(--text-muted); }
.color-violet { background: linear-gradient(145deg, var(--bg-depth), var(--accent-main)); }
.color-cyan { background: linear-gradient(145deg, var(--accent-main), var(--accent-alt)); color: var(--bg-primary); }
.color-rose { background: linear-gradient(145deg, var(--alert), var(--bg-depth)); }
.color-blue { background: linear-gradient(145deg, var(--bg-secondary), var(--accent-main)); }
.color-amber { background: linear-gradient(145deg, var(--alert), var(--accent-alt)); }
.color-plum { background: linear-gradient(145deg, var(--bg-depth), var(--accent-alt)); }
.color-slate { background: linear-gradient(145deg, var(--text-muted), var(--bg-secondary)); }

.conversation-column { display: grid; min-width: 0; min-height: 0; grid-template-rows: 70px minmax(0, 1fr) auto; background: radial-gradient(circle at 68% 12%, rgba(47, 27, 58, .42), transparent 30%), var(--bg-primary); }
.conversation-header { display: flex; min-width: 0; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); background: rgba(5, 5, 5, .9); padding: 0 17px; backdrop-filter: blur(14px); position: relative; z-index: 100; }
.channel-symbol, .welcome-symbol { display: grid; place-items: center; border: 1px solid rgba(61, 224, 196, .24); background: rgba(61, 224, 196, .1); color: var(--accent-main); }
.channel-symbol { width: 31px; height: 31px; border-radius: 9px; font-size: 18px; }
.conversation-header > div { display: grid; min-width: 0; flex: 1; gap: 3px; }
.conversation-header > div strong { font-size: 13px; }
.conversation-header > div small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.connection-badge { display: flex; align-items: center; gap: 6px; border: 1px solid rgba(61, 224, 196, .22); border-radius: 999px; background: rgba(61, 224, 196, .07); color: var(--accent-main); padding: 6px 9px; }
.connection-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.connection-badge b { font-size: 7px; letter-spacing: .1em; }
.connection-badge.offline { border-color: rgba(232, 93, 63, .35); color: var(--alert); }
.members-button, .mobile-menu { display: grid; width: 32px; height: 32px; place-items: center; cursor: pointer; border-radius: 8px; background: transparent; color: var(--muted); }
.members-button:hover, .mobile-menu:hover { background: var(--ink-4); color: white; }
.mobile-menu { display: none; }
.conversation-scroll { position: relative; min-height: 0; overflow-y: auto; scrollbar-color: var(--accent-alt) transparent; scrollbar-width: thin; }
.channel-welcome { padding: 45px 32px 21px; }
.welcome-symbol { width: 52px; height: 52px; border-radius: 17px; font-size: 28px; box-shadow: 0 13px 36px rgba(0, 0, 0, .13); }
.channel-welcome h1 { margin: 17px 0 7px; font-size: clamp(23px, 3vw, 31px); letter-spacing: -.045em; }
.channel-welcome p { max-width: 640px; margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.6; }
.channel-welcome small { display: block; margin-top: 9px; color: var(--text-muted); font-size: 9px; }
.date-divider { display: flex; align-items: center; gap: 11px; margin: 3px 23px 12px; color: var(--text-muted); font-size: 8px; font-weight: 800; }
.date-divider::before, .date-divider::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.message-list { padding: 0 17px 34px; }
.chat-message { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; border-radius: 10px; padding: 9px; }
.chat-message:hover { background: rgba(255, 255, 255, .025); }
.chat-message > div { min-width: 0; }
.chat-message header { display: flex; min-height: 19px; align-items: center; gap: 7px; }
.chat-message header strong { font-size: 11px; }
.chat-message time { color: var(--text-muted); font-size: 8px; }
.chat-message p { max-width: 820px; margin: 3px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
.role-badge { border-radius: 4px; background: rgba(61, 224, 196, .14); color: var(--accent-main); padding: 2px 5px; font-size: 7px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.edited-label { color: var(--text-muted); font-size: 7px; }
.direct-read-stamp { color: var(--accent-main); font-size: 7px; font-weight: 700; }
.direct-read-stamp::before { content: "✓ "; font-size: 8px; }
.message-mention { border-radius: 4px; background: rgba(61, 224, 196, .15); color: var(--accent-main); padding: 1px 3px; font-weight: 800; }
.message-mention.special { background: rgba(61, 224, 196, .22); color: var(--accent-main); font-weight: 850; box-shadow: 0 0 0 1px rgba(61, 224, 196, .3); }
.message-actions { display: flex; margin-left: auto; align-items: center; gap: 2px; opacity: 0; transition: opacity .12s ease; }
.chat-message:hover .message-actions, .message-actions:focus-within { opacity: 1; }
.message-actions > button, .report-form button { cursor: pointer; border-radius: 6px; background: transparent; color: var(--text-muted); padding: 3px 6px; font-size: 8px; }
.message-actions > button:hover, .report-form button:hover { background: rgba(61, 224, 196, .1); color: var(--accent-main); }
.message-actions > button[data-delete-message]:hover, .report-form button:hover { background: rgba(232, 93, 63, .1); color: var(--alert); }
.report-form { margin: 0; }
.inline-message-edit { display: grid; max-width: 820px; gap: 6px; margin-top: 5px; }
.inline-message-edit textarea { width: 100%; resize: vertical; border: 1px solid rgba(61, 224, 196, .35); border-radius: 9px; outline: 0; background: var(--bg-secondary); color: var(--text-primary); padding: 9px 10px; font-size: 12px; line-height: 1.5; }
.inline-message-edit textarea:focus { border-color: var(--accent-main); box-shadow: 0 0 0 3px rgba(61, 224, 196, .09); }
.inline-message-edit > div { display: flex; gap: 5px; }
.message-divider { display: flex; align-items: center; gap: 11px; margin: 3px 6px 12px; color: var(--accent-main); font-size: 9px; font-weight: 800; letter-spacing: .03em; }
.message-divider::before, .message-divider::after { height: 1px; flex: 1; background: var(--accent-main); opacity: .55; content: ""; }
.jump-latest { position: sticky; bottom: 16px; display: inline-flex; margin: 8px auto 12px; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-secondary); color: var(--text-primary); padding: 7px 14px; font-size: 10px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); z-index: 5; }
.jump-latest[hidden] { display: none; }
.jump-latest:hover { border-color: var(--accent-main); color: var(--accent-main); }
.jump-latest::before { content: "↓"; font-size: 12px; line-height: 1; }
.inline-message-edit button { cursor: pointer; border-radius: 7px; background: rgba(61, 224, 196, .12); color: var(--accent-main); padding: 6px 10px; font-size: 8px; font-weight: 850; }
.inline-message-edit button:first-child { background: var(--accent-main); color: var(--bg-primary); }
.empty-chat { display: grid; justify-items: center; gap: 5px; padding: 28px 20px 60px; color: var(--muted); text-align: center; }
.empty-chat strong { color: var(--text); font-size: 13px; }
.empty-chat span { font-size: 10px; }
.composer-wrap { background: linear-gradient(180deg, transparent, var(--bg-primary) 14%); padding: 9px 18px 11px; }
.message-composer { display: flex; min-height: 48px; align-items: center; gap: 9px; border: 1px solid rgba(61, 224, 196, .16); border-radius: 13px; background: var(--bg-secondary); padding: 6px 7px; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.message-composer > button { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; cursor: pointer; border-radius: 9px; background: rgba(61, 224, 196, .1); color: var(--text-secondary); font-size: 18px; }
.message-composer > button:last-child { background: var(--accent-main); color: var(--bg-primary); font-weight: 900; }
.message-composer > button:disabled { cursor: not-allowed; background: rgba(136, 136, 136, .15); color: var(--text-muted); }
.message-composer label { display: flex; min-width: 0; flex: 1; }
.message-composer textarea { width: 100%; max-height: 100px; resize: none; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12px; line-height: 23px; }
.message-composer textarea::placeholder { color: var(--text-muted); }
.message-composer small { color: var(--text-muted); font-size: 8px; }
.composer-wrap > p { margin: 6px 4px 0; color: var(--text-muted); font-size: 8px; }
.typing-status { min-height: 11px; color: var(--accent-main) !important; font-weight: 750; }
.guest-composer { display: flex; min-height: 58px; align-items: center; gap: 15px; border: 1px solid rgba(61, 224, 196, .2); border-radius: 13px; background: linear-gradient(100deg, rgba(61, 224, 196, .1), rgba(47, 27, 58, .3)); padding: 9px 10px 9px 15px; }
.guest-composer > div { display: grid; min-width: 0; flex: 1; gap: 3px; }
.guest-composer strong { font-size: 10px; }
.guest-composer span { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.guest-composer a { border-radius: 9px; background: var(--accent-main); color: var(--bg-primary); padding: 9px 13px; font-size: 9px; font-weight: 850; }

.member-sidebar { min-width: 0; min-height: 0; overflow-y: auto; border-left: 1px solid var(--line); background: var(--bg-secondary); padding: 19px 10px; scrollbar-color: var(--accent-alt) transparent; scrollbar-width: thin; }
.member-sidebar > header { display: flex; align-items: center; justify-content: space-between; padding: 0 7px 13px; color: var(--text-muted); font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.member-sidebar > header button { display: none; cursor: pointer; background: transparent; color: var(--muted); font-size: 22px; }
.member-sidebar section + section { margin-top: 18px; }
.member-sidebar h2 { margin: 0 7px 6px; color: var(--text-muted); font-size: 8px; letter-spacing: .09em; }
.member-row { display: flex; width: 100%; align-items: center; gap: 9px; cursor: pointer; border-radius: 9px; background: transparent; padding: 6px 7px; text-align: left; }
.member-row:hover { background: rgba(255, 255, 255, .04); }
.member-row > .member-copy { display: grid; min-width: 0; flex: 1; gap: 2px; }
.member-row strong, .member-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-row strong { color: var(--text-primary); font-size: 10px; }
.member-row small { color: var(--text-muted); font-size: 8px; }
.member-row form { margin: 0; opacity: 0; transition: opacity .12s ease; }
.member-row:hover form, .member-row form:focus-within { opacity: 1; }
.member-message-button { cursor: pointer; border-radius: 7px; background: rgba(61, 224, 196, .12); color: var(--accent-main); padding: 6px 7px; font-size: 7px; font-weight: 850; }
.member-message-button:hover { background: var(--accent-main); color: var(--bg-primary); }
.member-message-button.subtle { background: rgba(136, 136, 136, .14); color: var(--text-muted); }
.mobile-scrim { display: none; }

.settings-page main { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 42px 0 90px; }
.settings-shell { display: grid; gap: 18px; }
.settings-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); padding: 7px 2px 26px; }
.settings-server-identity { display: flex; align-items: center; gap: 17px; }
.settings-server-identity .community-icon { width: 66px; height: 66px; border-radius: 20px; }
.settings-server-identity .kicker { margin-bottom: 4px; }
.settings-hero h1 { margin: 0; font-size: clamp(28px, 5vw, 46px); line-height: 1.05; letter-spacing: -.05em; }
.settings-hero p { margin: 7px 0 0; color: var(--text-secondary); font-size: 11px; }
.secondary-button, .small-action { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; color: var(--accent-main); font-size: 10px; font-weight: 850; }
.secondary-button { min-height: 42px; padding: 0 15px; }
.secondary-button:hover, .small-action:hover { background: rgba(61, 224, 196, .1); }
.settings-nav { position: sticky; top: 70px; z-index: 20; display: flex; gap: 4px; overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; background: rgba(5, 5, 5, .9); padding: 6px; backdrop-filter: blur(14px); }
.settings-nav a { flex: 0 0 auto; border-radius: 8px; color: var(--text-secondary); padding: 9px 12px; font-size: 9px; font-weight: 800; }
.settings-nav a:hover { background: rgba(61, 224, 196, .1); color: var(--accent-main); }
.settings-layout { display: grid; gap: 18px; }
.settings-panel { scroll-margin-top: 135px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg, rgba(26, 42, 58, .82), rgba(5, 5, 5, .96)); }
.settings-panel > header { display: flex; min-height: 79px; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); padding: 17px 20px; }
.settings-panel > header .kicker { margin-bottom: 4px; }
.settings-panel h2 { margin: 0; font-size: 18px; letter-spacing: -.035em; }
.permission-chip { flex: 0 0 auto; border: 1px solid rgba(61, 224, 196, .25); border-radius: 999px; background: rgba(61, 224, 196, .08); color: var(--accent-main); padding: 6px 9px; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.small-action { min-height: 34px; padding: 0 11px; }
.settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; padding: 20px; }
.settings-form .form-field:nth-of-type(2) { grid-column: 1 / -1; }
.settings-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.settings-form-actions button, .inline-create-form > button, .management-row button { min-height: 35px; cursor: pointer; border-radius: 8px; background: rgba(61, 224, 196, .12); color: var(--accent-main); padding: 0 12px; font-size: 9px; font-weight: 850; }
.settings-form-actions button, .inline-create-form > button { background: var(--accent-main); color: var(--bg-primary); }
.inline-create-form { display: grid; grid-template-columns: minmax(160px, .8fr) minmax(180px, 1fr) auto; align-items: end; gap: 12px; border-bottom: 1px solid var(--line); padding: 18px 20px; }
.inline-create-form label { display: grid; gap: 6px; }
.inline-create-form label > span { color: var(--text-secondary); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.inline-create-form input, .inline-create-form select, .management-row input, .management-row select { min-width: 0; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: var(--bg-primary); color: var(--text-primary); padding: 9px 10px; font-size: 9px; }
.inline-create-form small { color: var(--text-muted); font-size: 8px; }
.category-create-form { display: flex; align-items: end; gap: 9px; border-bottom: 1px solid var(--line); padding: 15px 20px; }
.category-create-form label { display: grid; min-width: 220px; flex: 1; gap: 6px; }
.category-create-form label span { color: var(--text-secondary); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.category-create-form input, .category-name-form input { min-width: 0; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: var(--bg-primary); color: var(--text-primary); padding: 9px 10px; font-size: 9px; }
.category-create-form button, .category-name-form button, .order-controls button { min-height: 35px; cursor: pointer; border-radius: 8px; background: rgba(61, 224, 196, .12); color: var(--accent-main); padding: 0 12px; font-size: 9px; font-weight: 850; }
.category-create-form > button { background: var(--accent-main); color: var(--bg-primary); }
.category-management + .category-management { border-top: 1px solid var(--line); }
.category-management > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(61, 224, 196, .045); padding: 10px 20px; }
.category-name-form, .order-controls { display: flex; align-items: center; gap: 5px; }
.category-name-form { min-width: 0; flex: 1; }
.category-name-form input { width: min(320px, 100%); font-weight: 850; letter-spacing: .06em; }
.order-controls form, .channel-order-actions form { margin: 0; }
.order-controls button { width: 35px; padding: 0; }
.order-controls .danger-link { width: auto; background: rgba(232, 93, 63, .12); color: var(--alert); padding-inline: 10px; }
.channel-order-actions { flex-wrap: nowrap; }
.channel-order-actions button { width: 34px; padding: 0; }
.channel-order-actions a { display: inline-flex; min-height: 35px; align-items: center; border-radius: 8px; color: var(--accent-main); padding: 0 10px; font-size: 9px; font-weight: 850; }
.channel-order-actions a:hover { background: rgba(61, 224, 196, .1); }
.management-list { display: grid; }
.management-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 14px 20px; }
.management-row + .management-row { border-top: 1px solid var(--line-soft); }
.management-row > div:not(.row-actions):not(.member-controls) { display: grid; min-width: 0; gap: 3px; }
.management-row strong { font-size: 11px; }
.management-row small { color: var(--accent-main); font-size: 8px; }
.management-row p { overflow: hidden; margin: 0; color: var(--text-muted); font-size: 9px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.management-row > a { border-radius: 8px; color: var(--accent-main); padding: 8px 10px; font-size: 9px; font-weight: 800; }
.management-row > a:hover { background: rgba(61, 224, 196, .1); }
.management-symbol { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: rgba(61, 224, 196, .1); color: var(--accent-main); font-size: 17px; }
.settings-empty { color: var(--text-muted); padding: 28px 20px; font-size: 10px; text-align: center; }
.invite-row input[readonly] { width: min(560px, 100%); margin-top: 5px; }
.invite-row.inactive { opacity: .58; }
.row-actions { display: flex; align-items: center; gap: 6px; }
.row-actions form { margin: 0; }
.management-row .danger-link, .danger-zone button { background: rgba(232, 93, 63, .12); color: var(--alert); }
.permission-table-wrap { overflow-x: auto; }
.permission-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.permission-table th, .permission-table td { border-bottom: 1px solid var(--line-soft); padding: 13px 16px; font-size: 9px; text-align: center; }
.permission-table th:first-child { color: var(--text-secondary); text-align: left; }
.permission-table thead th { background: rgba(61, 224, 196, .055); color: var(--text-muted); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.permission-table .allowed { color: var(--accent-main); font-size: 14px; }
.settings-note { margin: 0; color: var(--text-muted); padding: 14px 20px 18px; font-size: 9px; line-height: 1.6; }
.member-management-row { align-items: start; }
.member-controls { display: flex; max-width: 580px; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.member-controls form { display: flex; gap: 5px; }
.member-controls input { width: 150px; }
.member-controls select { width: 100px; }
.member-note { color: var(--alert) !important; font-weight: 600; }
.report-quote, .report-actions ~ .management-row div p, .management-row .member-note { white-space: normal; overflow: visible; text-overflow: clip; }
.report-actions { display: flex; align-items: center; gap: 6px; }
.report-actions form { margin: 0; }
.report-actions button { min-height: 32px; }
.report-actions .danger-link { border-radius: 8px; background: rgba(232, 93, 63, .12); color: var(--alert); padding: 0 12px; font-size: 9px; font-weight: 850; cursor: pointer; }
.embedded-form { display: grid; gap: 17px; }
.danger-zone { border-top: 1px solid rgba(232, 93, 63, .3); padding-top: 15px; }
.danger-zone summary { cursor: pointer; color: var(--alert); font-size: 10px; font-weight: 850; }
.danger-zone p { color: var(--text-muted); font-size: 10px; line-height: 1.6; }
.danger-zone button { min-height: 38px; cursor: pointer; border-radius: 8px; padding: 0 13px; font-size: 9px; font-weight: 850; }
.invite-card { justify-items: center; text-align: center; }
.invite-card .community-icon { width: 70px; height: 70px; border-radius: 22px; }
.invite-card .kicker { margin: 2px 0 -6px; }
.invite-card > p { margin-inline: auto; }
.invite-card form { width: 100%; }
.invite-meta { display: flex; width: 100%; justify-content: center; gap: 8px; }
.invite-meta span { border: 1px solid var(--line); border-radius: 999px; color: var(--text-secondary); padding: 7px 10px; font-size: 9px; }
.composer-wrap > p.error { color: var(--alert); }

.friends-page main { width: min(1120px, calc(100% - 36px)); margin: 0 auto; padding: 46px 0 80px; }
.friends-shell { display: grid; gap: 18px; }
.friends-hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); padding: 7px 2px 27px; }
.friends-hero h1 { margin: 0; font-size: clamp(34px, 6vw, 56px); line-height: 1; letter-spacing: -.055em; }
.friends-hero p { max-width: 680px; margin: 12px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.65; }
.friends-hero .primary-button { flex: 0 0 auto; }
.friends-tabs { display: flex; gap: 5px; overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; background: rgba(26, 42, 58, .52); padding: 6px; }
.friends-tabs a { display: flex; min-height: 36px; flex: 0 0 auto; align-items: center; gap: 7px; border-radius: 8px; color: var(--text-secondary); padding: 0 12px; font-size: 9px; font-weight: 850; }
.friends-tabs a:hover, .friends-tabs a.active { background: rgba(61, 224, 196, .12); color: var(--accent-main); }
.friends-tabs span, .friends-tabs em { display: grid; min-width: 17px; height: 17px; place-items: center; border-radius: 999px; padding: 0 5px; font-size: 7px; font-style: normal; }
.friends-tabs span { background: rgba(61, 224, 196, .12); }
.friends-tabs em { background: var(--alert); color: var(--text-primary); }
.friends-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg, rgba(26, 42, 58, .82), rgba(5, 5, 5, .96)); }
.friends-panel > header { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); padding: 16px 20px; }
.friends-panel > header .kicker { margin-bottom: 4px; }
.friends-panel h2 { margin: 0; font-size: 19px; letter-spacing: -.035em; }
.friends-panel > header > span { color: var(--text-muted); font-size: 9px; font-weight: 850; }
.friend-list { display: grid; padding: 7px; }
.friend-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-width: 0; align-items: center; gap: 13px; border-radius: 11px; padding: 12px 13px; }
.friend-row + .friend-row { border-top: 1px solid var(--line-soft); border-radius: 0; }
.friend-row:hover { background: rgba(61, 224, 196, .055); }
.friend-row > div:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.friend-row strong, .friend-row small, .friend-row p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-row strong { font-size: 11px; }
.friend-row small { color: var(--accent-main); font-size: 8px; }
.friend-row p { margin: 4px 0 0; color: var(--text-muted); font-size: 9px; }
.friend-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.friend-actions form { margin: 0; }
.friend-actions button { min-height: 32px; cursor: pointer; border-radius: 8px; background: rgba(61, 224, 196, .09); color: var(--text-secondary); padding: 0 10px; font-size: 8px; font-weight: 850; }
.friend-actions button:hover { background: rgba(61, 224, 196, .16); color: var(--accent-main); }
.friend-actions .friend-primary { background: var(--accent-main); color: var(--bg-primary); }
.friend-actions .friend-primary:hover { background: var(--accent-alt); color: var(--bg-primary); }
.friend-actions .friend-danger { background: rgba(232, 93, 63, .1); color: var(--alert); }
.friend-actions .friend-danger:hover { background: var(--alert); color: var(--text-primary); }
.friend-unavailable { color: var(--text-muted); font-size: 8px; }
.friends-empty { display: grid; justify-items: center; gap: 6px; color: var(--text-muted); padding: 50px 20px; text-align: center; }
.friends-empty > span { color: var(--accent-main); font-size: 30px; }
.friends-empty strong { color: var(--text-primary); font-size: 12px; }
.friends-empty p { margin: 0; font-size: 9px; line-height: 1.6; }
.friends-empty a { margin-top: 5px; border-radius: 8px; background: rgba(61, 224, 196, .12); color: var(--accent-main); padding: 8px 11px; font-size: 8px; font-weight: 850; }
.friends-empty.compact { padding: 36px 17px; }
.pending-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.compact-list .friend-row { padding: 11px; }
.friend-search-form { display: grid; gap: 8px; border-bottom: 1px solid var(--line); padding: 22px; }
.friend-search-form > label { color: var(--text-secondary); font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.friend-search-form > div { display: flex; min-height: 46px; gap: 7px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-primary); padding: 5px; }
.friend-search-form input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text-primary); padding: 0 10px; font-size: 11px; }
.friend-search-form input::placeholder { color: var(--text-muted); }
.friend-search-form button { cursor: pointer; border-radius: 8px; background: var(--accent-main); color: var(--bg-primary); padding: 0 17px; font-size: 9px; font-weight: 900; }
.friend-search-form small { color: var(--text-muted); font-size: 8px; line-height: 1.55; }
.search-results { padding-block: 11px; }
.search-prompt { min-height: 220px; align-content: center; }

.direct-app { grid-template-columns: 72px 258px minmax(0, 1fr); }
.direct-sidebar { position: relative; z-index: 20; display: flex; min-width: 0; min-height: 0; flex-direction: column; border-right: 1px solid var(--line); background: var(--bg-secondary); }
.direct-sidebar-header { display: flex; min-height: 70px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 0 13px 0 17px; }
.direct-sidebar-header > div { display: grid; min-width: 0; gap: 3px; }
.direct-sidebar-header span { color: var(--accent-main); font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.direct-sidebar-header strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.direct-sidebar-header > a, .direct-list > header a { display: grid; place-items: center; border-radius: 8px; color: var(--text-muted); }
.direct-sidebar-header > a { width: 31px; height: 31px; font-size: 18px; }
.direct-sidebar-header > a:hover, .direct-list > header a:hover { background: rgba(61, 224, 196, .1); color: var(--accent-main); }
.direct-find-link { display: flex; min-height: 42px; align-items: center; gap: 9px; margin: 10px 9px 4px; border-radius: 9px; color: var(--text-secondary); padding: 0 10px; }
.direct-find-link > span { color: var(--text-muted); font-size: 21px; }
.direct-find-link > strong { font-size: 10px; }
.direct-find-link > em { display: grid; min-width: 18px; height: 18px; margin-left: auto; place-items: center; border-radius: 999px; background: var(--alert); color: var(--text-primary); padding: 0 5px; font-size: 7px; font-style: normal; font-weight: 900; }
.direct-find-link > em[hidden] { display: none; }
.direct-find-link:hover, .direct-find-link.active { background: rgba(61, 224, 196, .09); color: var(--text-primary); }
.direct-find-link.active { box-shadow: inset 3px 0 var(--accent-main); }
.direct-list { min-height: 0; flex: 1; overflow-y: auto; padding: 10px 9px 18px; scrollbar-color: var(--accent-alt) transparent; scrollbar-width: thin; }
.direct-list > header { display: flex; min-height: 26px; align-items: center; justify-content: space-between; color: var(--text-muted); padding: 0 7px 5px; }
.direct-list > header strong { font-size: 8px; letter-spacing: .12em; }
.direct-list > header a { width: 20px; height: 20px; font-size: 16px; }
.direct-link { position: relative; display: flex; min-width: 0; min-height: 49px; align-items: center; gap: 9px; border-radius: 10px; color: var(--text-secondary); padding: 7px 8px; }
.direct-link:hover { background: rgba(61, 224, 196, .07); color: var(--text-primary); }
.direct-link.active { background: linear-gradient(90deg, rgba(61, 224, 196, .2), rgba(0, 168, 157, .08)); color: var(--text-primary); }
.direct-link.active::before { position: absolute; left: -9px; width: 3px; height: 25px; border-radius: 0 3px 3px 0; background: var(--accent-main); content: ""; }
.direct-link-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.direct-link-copy strong, .direct-link-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direct-link-copy strong { font-size: 10px; }
.direct-link-copy small { color: var(--text-muted); font-size: 8px; }
.direct-link.unread .direct-link-copy strong { color: var(--text-primary); font-weight: 900; }
.direct-link > em { display: grid; min-width: 18px; height: 18px; place-items: center; border-radius: 999px; background: var(--alert); color: var(--text-primary); padding: 0 5px; font-size: 7px; font-style: normal; font-weight: 900; }
.direct-link > em[hidden] { display: none; }
.direct-list-empty { color: var(--text-muted); padding: 24px 9px; font-size: 9px; line-height: 1.5; text-align: center; }

.direct-home { display: grid; min-width: 0; min-height: 0; grid-template-rows: 70px minmax(0, 1fr); background: radial-gradient(circle at 74% 8%, rgba(47, 27, 58, .55), transparent 33%), var(--bg-primary); }
.direct-home-scroll { min-height: 0; overflow-y: auto; padding: 0 clamp(18px, 4vw, 58px) 70px; scrollbar-color: var(--accent-alt) transparent; scrollbar-width: thin; }
.direct-home-hero { max-width: 780px; border-bottom: 1px solid var(--line); padding: clamp(38px, 7vw, 72px) 0 31px; }
.direct-home-hero .welcome-symbol { margin-bottom: 17px; }
.direct-home-hero h1 { margin: 8px 0 10px; font-size: clamp(30px, 5vw, 50px); line-height: 1.04; letter-spacing: -.05em; }
.direct-home-hero p { max-width: 690px; margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.7; }
.direct-search-form { display: grid; max-width: 780px; gap: 8px; margin-top: 28px; }
.direct-search-form > label { color: var(--text-secondary); font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.direct-search-form > div { display: flex; min-height: 46px; gap: 7px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-secondary); padding: 5px; }
.direct-search-form input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text-primary); padding: 0 10px; font-size: 11px; }
.direct-search-form input::placeholder { color: var(--text-muted); }
.direct-search-form button { cursor: pointer; border-radius: 8px; background: var(--accent-main); color: var(--bg-primary); padding: 0 16px; font-size: 9px; font-weight: 900; }
.direct-member-results { max-width: 980px; margin-top: 36px; }
.direct-member-results > header { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.direct-member-results h2 { margin: 4px 0 0; font-size: 19px; letter-spacing: -.035em; }
.direct-member-results > header > span { color: var(--text-muted); font-size: 8px; font-weight: 850; }
.direct-member-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.direct-member-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(26, 42, 58, .8), rgba(5, 5, 5, .92)); padding: 14px; }
.direct-member-card:hover { border-color: rgba(61, 224, 196, .32); background: linear-gradient(145deg, rgba(26, 42, 58, .95), rgba(47, 27, 58, .34)); }
.direct-member-card > div { display: grid; min-width: 0; gap: 2px; }
.direct-member-card strong, .direct-member-card small, .direct-member-card p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direct-member-card strong { font-size: 11px; }
.direct-member-card small { color: var(--accent-main); font-size: 8px; }
.direct-member-card p { margin: 4px 0 0; color: var(--text-muted); font-size: 8px; }
.direct-member-card form { margin: 0; }
.direct-member-card button { cursor: pointer; border-radius: 8px; background: rgba(61, 224, 196, .12); color: var(--accent-main); padding: 8px 10px; font-size: 8px; font-weight: 900; }
.direct-member-card button:hover { background: var(--accent-main); color: var(--bg-primary); }
.direct-empty-result { grid-column: 1 / -1; display: grid; justify-items: center; gap: 5px; border: 1px dashed var(--line); border-radius: 14px; color: var(--text-muted); padding: 35px 18px; text-align: center; }
.direct-empty-result strong { color: var(--text-primary); font-size: 11px; }
.direct-empty-result span { font-size: 9px; }
.direct-empty-result a { margin-top: 5px; border-radius: 8px; background: rgba(61, 224, 196, .12); color: var(--accent-main); padding: 8px 11px; font-size: 8px; font-weight: 850; }

.direct-conversation-header > .avatar { width: 37px; height: 37px; }
.direct-header-actions { display: flex; align-items: center; gap: 5px; }
.direct-header-action { margin: 0; }
.direct-header-action button { min-height: 31px; cursor: pointer; border-radius: 8px; background: rgba(232, 93, 63, .12); color: var(--alert); padding: 0 10px; font-size: 8px; font-weight: 900; }
.direct-header-action button:hover { background: var(--alert); color: var(--text-primary); }
.direct-header-action.friend-action button { background: rgba(61, 224, 196, .12); color: var(--accent-main); }
.direct-header-action.friend-action button:hover { background: var(--accent-main); color: var(--bg-primary); }
.direct-welcome-avatar { width: 64px; height: 64px; border-radius: 20px; font-size: 16px; }
.blocked-composer { display: flex; min-height: 50px; align-items: center; gap: 12px; border: 1px solid rgba(232, 93, 63, .3); border-radius: 12px; background: rgba(232, 93, 63, .08); padding: 10px 13px; }
.blocked-composer strong { flex: 0 0 auto; color: var(--alert); font-size: 10px; }
.blocked-composer span { color: var(--text-secondary); font-size: 9px; }

.direct-call-button { min-height: 31px; cursor: pointer; border: 1px solid rgba(61, 224, 196, .24); border-radius: 8px; background: rgba(61, 224, 196, .11); color: var(--accent-main); padding: 0 11px; font-size: 8px; font-weight: 900; }
.direct-call-button:hover { background: var(--accent-main); color: var(--bg-primary); }
.direct-call-button:disabled { cursor: not-allowed; opacity: .5; }
.direct-conversation-column { grid-template-rows: 70px auto minmax(0, 1fr) auto; }
.direct-conversation-column > .conversation-header { grid-row: 1; }
.direct-conversation-column > .call-stage { grid-row: 2; }
.direct-conversation-column > .conversation-scroll { grid-row: 3; }
.direct-conversation-column > .composer-wrap { grid-row: 4; }

.call-stage { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto auto auto; overflow: hidden; background: radial-gradient(circle at 50% 0, rgba(61, 224, 196, .13), transparent 38%), linear-gradient(160deg, rgba(26, 42, 58, .97), rgba(5, 5, 5, .99)); }
.call-stage[hidden], .incoming-call[hidden] { display: none; }
.direct-conversation-column > .call-stage { height: clamp(280px, 42vh, 430px); border-bottom: 1px solid var(--line); }
.call-stage-header { display: flex; min-width: 0; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); padding: 12px 17px; }
.call-stage-header > span:nth-child(2) { display: grid; min-width: 0; flex: 1; gap: 2px; }
.call-stage-header small { color: var(--accent-main); font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.call-stage-header strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.call-stage-signal { display: flex; width: 31px; height: 31px; align-items: end; justify-content: center; gap: 2px; border: 1px solid rgba(61, 224, 196, .25); border-radius: 9px; background: rgba(61, 224, 196, .09); padding-bottom: 8px; }
.call-stage-signal i { width: 3px; border-radius: 3px; background: var(--accent-main); box-shadow: 0 0 7px rgba(61, 224, 196, .45); }
.call-stage-signal i:nth-child(1) { height: 5px; }
.call-stage-signal i:nth-child(2) { height: 11px; }
.call-stage-signal i:nth-child(3) { height: 8px; }
.call-stage-status { flex: 0 0 auto; border: 1px solid rgba(61, 224, 196, .2); border-radius: 999px; color: var(--accent-main); padding: 6px 9px; font-size: 7px; font-weight: 800; }
.call-stage-status.error { border-color: rgba(232, 93, 63, .35); color: var(--alert); }
.call-participant-grid { display: grid; min-width: 0; min-height: 0; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); align-content: center; gap: 10px; overflow-y: auto; padding: 13px; scrollbar-color: var(--accent-alt) transparent; scrollbar-width: thin; }
.call-empty { grid-column: 1 / -1; display: grid; min-height: 145px; place-content: center; justify-items: center; gap: 6px; color: var(--text-muted); padding: 22px; text-align: center; }
.call-empty[hidden] { display: none; }
.call-empty > span { display: grid; width: 47px; height: 47px; place-items: center; border: 1px solid rgba(61, 224, 196, .24); border-radius: 16px; background: rgba(61, 224, 196, .08); color: var(--accent-main); font-size: 20px; }
.call-empty strong { margin-top: 4px; color: var(--text-primary); font-size: 12px; }
.call-empty p { max-width: 430px; margin: 0; font-size: 9px; line-height: 1.5; }
.call-participant { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: rgba(5, 5, 5, .72); box-shadow: inset 0 1px rgba(255, 255, 255, .025); }
.call-participant.speaking { border-color: var(--accent-main); box-shadow: 0 0 0 2px rgba(61, 224, 196, .12), inset 0 1px rgba(255, 255, 255, .04); }
.call-participant.screen-sharing { grid-column: span 2; }
.call-participant-media { position: relative; display: grid; min-height: 135px; place-items: center; overflow: hidden; background: radial-gradient(circle, rgba(47, 27, 58, .8), rgba(5, 5, 5, .92)); }
.call-participant-avatar { display: grid; width: 61px; height: 61px; place-items: center; border-radius: 20px; color: var(--text-primary); font-size: 14px; font-weight: 900; box-shadow: inset 0 1px rgba(255, 255, 255, .17), 0 15px 35px rgba(0, 0, 0, .22); }
.call-video-track { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--bg-primary); object-fit: cover; }
.call-video-track.screen-share-track { object-fit: contain; }
.call-audio-track { position: absolute; width: 1px; height: 1px; opacity: 0; }
.call-participant footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding: 8px 10px; }
.call-participant footer strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.call-participant footer small { border: 1px solid transparent; border-radius: 999px; color: var(--text-muted); padding: 3px 6px; font-size: 7px; }
.call-participant.speaking footer small { border-color: rgba(61, 224, 196, .22); background: rgba(61, 224, 196, .1); color: var(--accent-main); }
.call-participant.muted footer small { background: rgba(136, 136, 136, .1); color: var(--text-muted); }
.call-participant.deafened footer small { border-color: rgba(0, 168, 157, .24); background: rgba(47, 27, 58, .72); color: var(--accent-main); }
.call-decision { display: flex; justify-content: center; gap: 9px; padding: 8px 13px 0; }
.call-decision[hidden] { display: none; }
.call-action { min-height: 36px; cursor: pointer; border-radius: 9px; padding: 0 17px; font-size: 9px; font-weight: 900; }
.call-action.accept { background: var(--accent-main); color: var(--bg-primary); }
.call-action.decline { background: var(--alert); color: var(--text-primary); }
.call-action:disabled { cursor: wait; opacity: .5; }
.call-controls { display: flex; justify-content: center; gap: 7px; overflow-x: auto; padding: 10px 13px 7px; scrollbar-width: none; }
.call-control { display: grid; min-width: 68px; min-height: 47px; flex: 0 0 auto; grid-template-columns: 1fr; place-items: center; gap: 2px; cursor: pointer; border: 1px solid var(--line); border-radius: 11px; background: rgba(26, 42, 58, .88); color: var(--text-secondary); padding: 6px 9px; }
.call-control span { color: var(--accent-main); font-size: 13px; }
.call-control b { font-size: 7px; }
.call-control:hover:not(:disabled), .call-control.active { border-color: rgba(61, 224, 196, .45); background: rgba(61, 224, 196, .12); color: var(--text-primary); }
.call-control.deafen.active { border-color: rgba(0, 168, 157, .55); background: rgba(47, 27, 58, .82); }
.call-control.primary { min-width: 92px; background: var(--accent-main); color: var(--bg-primary); }
.call-control.primary span { color: var(--bg-primary); }
.call-control.leave { border-color: rgba(232, 93, 63, .24); color: var(--alert); }
.call-control.leave span { color: var(--alert); }
.call-control.leave:hover:not(:disabled) { background: var(--alert); color: var(--text-primary); }
.call-control.leave:hover:not(:disabled) span { color: var(--text-primary); }
.call-control:disabled { cursor: not-allowed; opacity: .35; }
.call-help { margin: 0; color: var(--text-muted); padding: 1px 13px 10px; font-size: 7px; text-align: center; }

.voice-conversation-column { position: relative; grid-template-rows: 70px minmax(0, 1fr); }
.voice-conversation-column > .call-stage { grid-row: 2; }
.voice-symbol { border-radius: 50%; font-size: 13px; }
.voice-privacy { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 7px; font-weight: 750; }
.voice-privacy i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-main); }
.voice-signin-card { position: absolute; top: 50%; left: 50%; z-index: 5; display: grid; width: min(510px, calc(100% - 28px)); grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; transform: translate(-50%, -50%); border: 1px solid rgba(61, 224, 196, .35); border-radius: 15px; background: rgba(5, 5, 5, .94); padding: 17px; box-shadow: 0 24px 70px rgba(0, 0, 0, .42); backdrop-filter: blur(16px); }
.voice-signin-card > span { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 12px; background: rgba(61, 224, 196, .12); color: var(--accent-main); }
.voice-signin-card > div { min-width: 0; }
.voice-signin-card strong { font-size: 11px; }
.voice-signin-card p { margin: 4px 0 0; color: var(--text-muted); font-size: 8px; line-height: 1.5; }
.voice-signin-card a { border-radius: 9px; background: var(--accent-main); color: var(--bg-primary); padding: 9px 12px; font-size: 8px; font-weight: 900; }
.voice-signin-card.unavailable { border-color: rgba(232, 93, 63, .35); }
.voice-signin-card.unavailable > span { background: rgba(232, 93, 63, .12); color: var(--alert); }

.incoming-call { position: fixed; top: 18px; right: 18px; z-index: 180; display: grid; width: min(430px, calc(100vw - 36px)); grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 11px; border: 1px solid rgba(61, 224, 196, .42); border-radius: 15px; background: linear-gradient(135deg, rgba(26, 42, 58, .98), rgba(5, 5, 5, .99)); padding: 12px; box-shadow: 0 22px 70px rgba(0, 0, 0, .5), 0 0 35px rgba(61, 224, 196, .08); backdrop-filter: blur(18px); }
.incoming-call-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-main); box-shadow: 0 0 0 5px rgba(61, 224, 196, .1), 0 0 15px rgba(61, 224, 196, .8); animation: incoming-call-pulse 1.4s ease-in-out infinite; }
.incoming-call-copy { display: grid; min-width: 0; gap: 2px; }
.incoming-call-copy small { color: var(--accent-main); font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.incoming-call-copy strong, .incoming-call-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.incoming-call-copy strong { font-size: 11px; }
.incoming-call-copy span { color: var(--text-muted); font-size: 8px; }
.incoming-call-actions { display: flex; gap: 5px; }
.incoming-call-actions .call-action { min-height: 32px; padding-inline: 10px; font-size: 8px; }
@keyframes incoming-call-pulse { 50% { opacity: .5; transform: scale(.78); } }

@media (max-width: 1120px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-side { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); }
  .chat-app { grid-template-columns: 72px 250px minmax(0, 1fr); }
  .member-sidebar { position: fixed; top: 0; right: 0; z-index: 60; width: 250px; height: 100dvh; transform: translateX(105%); box-shadow: -16px 0 45px rgba(0, 0, 0, .35); transition: transform .18s ease; }
  .member-sidebar.open { transform: translateX(0); }
  .member-sidebar > header button { display: block; }
}

@media (max-width: 800px) {
  .site-header { padding-inline: 14px; }
  .site-header nav > .nav-dashboard { display: none; }
  .dashboard-page main { padding-top: 30px; }
  .dashboard-welcome { align-items: flex-start; flex-direction: column; }
  .dashboard-stats { grid-template-columns: 1fr; }
  .dashboard-stats article + article { border-top: 1px solid var(--line); border-left: 0; }
  .dashboard-side { grid-template-columns: 1fr; }
  .friends-hero { align-items: flex-start; flex-direction: column; }
  .pending-grid { grid-template-columns: 1fr; }
  .discover-heading { align-items: flex-start; flex-direction: column; }
  .community-grid { grid-template-columns: 1fr; }
  .chat-app { grid-template-columns: 64px minmax(0, 1fr); }
  .direct-app { grid-template-columns: 64px minmax(0, 1fr); }
  .server-rail { padding-inline: 8px; }
  .brand-server, .server-orb { width: 45px; height: 45px; }
  .channel-sidebar { position: fixed; top: 0; bottom: 0; left: 64px; z-index: 50; width: min(280px, calc(100vw - 64px)); transform: translateX(-110%); box-shadow: 16px 0 45px rgba(0, 0, 0, .35); transition: transform .18s ease; }
  .channel-sidebar.open { transform: translateX(0); }
  .direct-sidebar { position: fixed; top: 0; bottom: 0; left: 64px; z-index: 50; width: min(280px, calc(100vw - 64px)); transform: translateX(-110%); box-shadow: 16px 0 45px rgba(0, 0, 0, .35); transition: transform .18s ease; }
  .direct-sidebar.open { transform: translateX(0); }
  .mobile-scrim.open { position: fixed; inset: 0; z-index: 40; display: block; cursor: pointer; background: rgba(0, 0, 0, .58); }
  .conversation-column { grid-column: 2; }
  .direct-home { grid-column: 2; }
  .mobile-menu { display: grid; }
  .settings-page main { padding-top: 28px; }
  .settings-hero { align-items: flex-start; flex-direction: column; }
  .settings-form { grid-template-columns: 1fr; }
  .settings-form .form-field:nth-of-type(2), .settings-form-actions { grid-column: 1; }
  .inline-create-form { grid-template-columns: 1fr 1fr; }
  .inline-create-form > button { grid-column: 1 / -1; }
  .management-row { align-items: start; }
  .member-controls { grid-column: 1 / -1; justify-content: flex-start; padding-left: 49px; }
  .call-participant.screen-sharing { grid-column: 1 / -1; }
  .category-management > header { align-items: flex-start; flex-direction: column; }
  .category-name-form { width: 100%; }
}

@media (max-width: 550px) {
  .site-brand > span:last-child { display: none; }
  .site-header nav > a, .site-header nav button { padding-inline: 9px; font-size: 10px; }
  .site-header nav > .nav-discover, .site-header nav > .nav-create, .site-header nav > .nav-profile { display: none; }
  .dashboard-page main { width: min(100% - 22px, 1320px); }
  .dashboard-welcome h1 { font-size: 34px; }
  .dashboard-welcome .primary-button { width: 100%; }
  .friends-page main { width: min(100% - 22px, 1120px); padding-top: 30px; }
  .friends-hero .primary-button { width: 100%; }
  .friends-panel > header { padding-inline: 14px; }
  .friend-row { grid-template-columns: auto minmax(0, 1fr); padding-inline: 8px; }
  .friend-actions { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .friend-search-form { padding-inline: 14px; }
  .friend-search-form > div { align-items: stretch; flex-direction: column; }
  .friend-search-form input, .friend-search-form button { min-height: 36px; }
  .panel-heading { min-height: 72px; padding-inline: 15px; }
  .panel-actions { grid-template-columns: 1fr; }
  .panel-actions a + a { border-top: 1px solid var(--line); border-left: 0; }
  .account-panel { grid-template-columns: auto minmax(0, 1fr); }
  .account-panel > a { grid-column: 1 / -1; text-align: center; }
  .chat-app { grid-template-columns: minmax(0, 1fr); }
  .direct-app { grid-template-columns: minmax(0, 1fr); }
  .server-rail { display: none; }
  .channel-sidebar { left: 0; width: min(300px, 88vw); }
  .direct-sidebar { left: 0; width: min(300px, 88vw); }
  .conversation-column { grid-column: 1; grid-template-rows: 62px minmax(0, 1fr) auto; }
  .direct-conversation-column { grid-template-rows: 62px auto minmax(0, 1fr) auto; }
  .voice-conversation-column { grid-template-rows: 62px minmax(0, 1fr); }
  .direct-home { grid-column: 1; grid-template-rows: 62px minmax(0, 1fr); }
  .conversation-header { padding: 0 9px; }
  .conversation-header > div small, .connection-badge b, .members-button { display: none; }
  .channel-welcome { padding: 31px 15px 17px; }
  .message-list { padding-inline: 5px; }
  .chat-message { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding-inline: 6px; }
  .message-avatar { width: 33px; height: 33px; border-radius: 11px; }
  .chat-message header { flex-wrap: wrap; }
  .message-actions { width: 100%; margin-left: 0; opacity: 1; }
  .composer-wrap { padding: 7px 8px 9px; }
  .guest-composer { align-items: stretch; flex-direction: column; }
  .guest-composer a { text-align: center; }
  .composer-wrap > p { display: none; }
  .composer-wrap > .typing-status { display: block; }
  .direct-home-scroll { padding: 0 13px 55px; }
  .direct-home-hero { padding-top: 34px; }
  .direct-search-form > div { flex-direction: column; padding: 7px; }
  .direct-search-form input { min-height: 36px; }
  .direct-search-form button { min-height: 36px; }
  .direct-member-grid { grid-template-columns: 1fr; }
  .direct-member-card { grid-template-columns: auto minmax(0, 1fr); }
  .direct-member-card form { grid-column: 2; }
  .direct-member-card button { width: 100%; }
  .direct-header-action button { padding-inline: 7px; font-size: 7px; }
  .direct-conversation-header .direct-header-action:not(.friend-action) { display: none; }
  .direct-call-button { padding-inline: 8px; }
  .direct-conversation-column > .call-stage { height: min(430px, 56dvh); }
  .call-stage-header { padding-inline: 10px; }
  .call-stage-status, .voice-privacy { display: none; }
  .call-participant-grid { grid-template-columns: 1fr; padding: 8px; }
  .call-controls { justify-content: flex-start; padding-inline: 8px; }
  .call-control { min-width: 62px; }
  .voice-signin-card { grid-template-columns: auto minmax(0, 1fr); }
  .voice-signin-card > a { grid-column: 1 / -1; text-align: center; }
  .incoming-call { top: 8px; right: 8px; width: calc(100vw - 16px); grid-template-columns: auto auto minmax(0, 1fr); }
  .incoming-call-actions { grid-column: 2 / -1; }
  .incoming-call-actions .call-action { flex: 1; }
  .blocked-composer { align-items: flex-start; flex-direction: column; gap: 4px; }
  .member-row form { opacity: 1; }
  .settings-page main { width: min(100% - 22px, 1180px); }
  .settings-server-identity { align-items: flex-start; }
  .settings-server-identity .community-icon { width: 52px; height: 52px; border-radius: 16px; }
  .settings-hero .secondary-button { width: 100%; }
  .settings-nav { top: 70px; }
  .settings-panel > header, .management-row { padding-inline: 14px; }
  .settings-form, .inline-create-form { grid-template-columns: 1fr; padding-inline: 14px; }
  .inline-create-form > button { grid-column: 1; }
  .management-row { grid-template-columns: auto minmax(0, 1fr); }
  .management-row > a, .management-row > form, .management-row > .row-actions, .management-row > .permission-chip { grid-column: 2; justify-self: start; }
  .row-actions { flex-wrap: wrap; }
  .member-controls { padding-left: 0; }
  .member-controls form { width: 100%; flex-wrap: wrap; }
  .member-controls input, .member-controls select { min-width: 0; flex: 1; }
  .category-create-form { align-items: stretch; flex-direction: column; padding-inline: 14px; }
  .category-create-form label { min-width: 0; }
  .category-name-form { align-items: stretch; flex-direction: column; }
  .category-name-form input { width: 100%; }
  .order-controls { width: 100%; flex-wrap: wrap; }
}

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

/* Attachment styles */
.message-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.attachment-image { display: block; max-width: 320px; max-height: 240px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.attachment-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.attachment-image:hover img { opacity: 0.9; }
.attachment-file { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: rgba(26, 42, 58, 0.6); border: 1px solid var(--line); max-width: 280px; transition: background 0.15s ease; }
.attachment-file:hover { background: rgba(61, 224, 196, 0.08); }
.attachment-icon { font-size: 20px; }
.attachment-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.attachment-name { overflow: hidden; color: var(--text-primary); font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.attachment-size { color: var(--text-muted); font-size: 9px; }
.upload-button { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; cursor: pointer; border-radius: 9px; background: rgba(61, 224, 196, 0.1); color: var(--text-secondary); transition: background 0.15s ease; }
.upload-button:hover { background: rgba(61, 224, 196, 0.2); color: var(--accent-main); }
.upload-button svg { width: 18px; height: 18px; }
.attachment-preview { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line-soft); }
.preview-item { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(26, 42, 58, 0.5); border: 1px solid var(--line-soft); }
.preview-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.preview-icon { font-size: 18px; }
.preview-name { max-width: 120px; overflow: hidden; color: var(--text-secondary); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.preview-remove { display: grid; width: 18px; height: 18px; place-items: center; cursor: pointer; border-radius: 50%; background: rgba(232, 93, 63, 0.2); color: var(--alert); font-size: 12px; line-height: 1; transition: background 0.15s ease; }
.preview-remove:hover { background: rgba(232, 93, 63, 0.4); }
.drop-overlay { position: absolute; inset: 0; z-index: 50; display: none; place-items: center; background: rgba(5, 5, 5, 0.85); border: 2px dashed var(--accent-main); border-radius: 12px; pointer-events: none; }
.drop-overlay.visible { display: grid; }
.drop-message { padding: 20px 30px; border-radius: 12px; background: rgba(61, 224, 196, 0.1); color: var(--accent-main); font-size: 14px; font-weight: 700; }

/* Reactions */
.message-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reaction-pill { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; background: rgba(26, 42, 58, 0.4); padding: 2px 8px; font-size: 12px; transition: background 0.12s ease, border-color 0.12s ease; }
.reaction-pill:hover { background: rgba(61, 224, 196, 0.08); border-color: rgba(61, 224, 196, 0.3); }
.reaction-pill.reacted { background: rgba(61, 224, 196, 0.12); border-color: var(--accent-main); }
.reaction-pill.reacted:hover { background: rgba(61, 224, 196, 0.2); }
.reaction-emoji { font-size: 14px; line-height: 1; }
.reaction-count { color: var(--text-secondary); font-size: 10px; font-weight: 600; }
.reaction-pill.reacted .reaction-count { color: var(--accent-main); }
.reaction-add-button { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 1px dashed var(--line); border-radius: 8px; background: transparent; color: var(--text-muted); width: 28px; height: 24px; font-size: 14px; font-weight: 700; transition: background 0.12s ease, color 0.12s ease; }
.reaction-add-button:hover { background: rgba(61, 224, 196, 0.08); color: var(--accent-main); border-color: rgba(61, 224, 196, 0.3); }
.emoji-picker { position: fixed; z-index: 100; display: flex; flex-wrap: wrap; gap: 2px; padding: 8px; border-radius: 10px; background: var(--bg-secondary); border: 1px solid var(--line); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); width: 240px; }
.emoji-option { display: grid; width: 36px; height: 36px; place-items: center; cursor: pointer; border: 0; border-radius: 8px; background: transparent; font-size: 20px; transition: background 0.1s ease; }
.emoji-option:hover { background: rgba(61, 224, 196, 0.12); }

/* Pinned messages */
.pins-button { display: grid; width: 30px; height: 30px; place-items: center; cursor: pointer; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 16px; transition: background 0.12s ease, color 0.12s ease; }
.pins-button:hover { background: rgba(61, 224, 196, 0.1); color: var(--accent-main); }
.chat-message.pinned { background: rgba(61, 224, 196, 0.04); border-left: 3px solid var(--accent-main); padding-left: 10px; }
.chat-message.pinned.highlight { background: rgba(61, 224, 196, 0.12); }
.pins-sidebar { display: none; flex-direction: column; width: 320px; height: 100dvh; position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; background: var(--bg-primary); border-left: 1px solid var(--line); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4); }
.pins-sidebar.open { display: flex; }
.pins-sidebar > header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; color: var(--text-secondary); }
.pins-sidebar > header button { cursor: pointer; background: transparent; color: var(--text-muted); font-size: 18px; }
.pins-sidebar > header button:hover { color: var(--text-primary); }
.pins-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.pins-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 20px; color: var(--text-muted); font-size: 13px; text-align: center; }
.pins-empty span { font-size: 28px; }
.pin-card { padding: 12px; border-radius: 10px; background: rgba(26, 42, 58, 0.4); border: 1px solid var(--line-soft); transition: border-color 0.12s ease; }
.pin-card:hover { border-color: var(--line); }
.pin-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pin-avatar { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; font-size: 10px; font-weight: 800; color: var(--bg-primary); flex-shrink: 0; }
.pin-card-header strong { font-size: 12px; color: var(--text-primary); }
.pin-card-header time { font-size: 10px; color: var(--text-muted); }
.pin-content { font-size: 13px; color: var(--text-secondary); line-height: 1.45; word-break: break-word; margin: 0; }
.pin-actions { display: flex; gap: 8px; margin-top: 8px; }
.pin-actions button { cursor: pointer; border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600; background: rgba(61, 224, 196, 0.1); color: var(--accent-main); border: 1px solid var(--line); transition: background 0.12s ease; }
.pin-actions button:hover { background: rgba(61, 224, 196, 0.2); }
.pin-actions .unpin-btn { background: rgba(232, 93, 63, 0.1); color: var(--alert); border-color: rgba(232, 93, 63, 0.2); }
.pin-actions .unpin-btn:hover { background: rgba(232, 93, 63, 0.2); }
[data-pin-message] { cursor: pointer; }
[data-pin-message].pinned { color: var(--accent-main); }

/* Message search */
.search-button { display: grid; width: 30px; height: 30px; place-items: center; cursor: pointer; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 15px; transition: background 0.12s ease, color 0.12s ease; }
.search-button:hover { background: rgba(61, 224, 196, 0.1); color: var(--accent-main); }

.threads-button, .notifications-link { display: grid; width: 30px; height: 30px; place-items: center; cursor: pointer; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 16px; text-decoration: none; transition: background 0.12s ease, color 0.12s ease; }
.threads-button:hover, .notifications-link:hover { background: rgba(61, 224, 196, 0.1); color: var(--accent-main); }
.slowmode-badge { flex-shrink: 0; padding: 3px 8px; border-radius: 999px; background: rgba(245, 158, 11, 0.12); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.25); font-size: 11px; font-weight: 600; white-space: nowrap; }
.search-overlay { display: flex; flex-direction: column; width: 340px; max-width: 90vw; max-height: 72vh; position: fixed; top: 14px; right: 14px; z-index: 60; background: var(--bg-primary); border: 1px solid var(--line); border-radius: 12px; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4); overflow: hidden; }
.search-overlay[hidden] { display: none !important; }
.search-overlay-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; color: var(--text-secondary); }
.search-overlay-head button { cursor: pointer; background: transparent; color: var(--text-muted); font-size: 18px; border: none; }
.search-overlay-head button:hover { color: var(--text-primary); }
.search-form { display: flex; gap: 8px; padding: 10px 12px; }
.search-form input { flex: 1; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-elevated, rgba(26, 42, 58, 0.4)); color: var(--text-primary); font-size: 13px; outline: none; }
.search-form input:focus { border-color: var(--accent-main); }
.search-form button { cursor: pointer; border-radius: 8px; padding: 0 14px; font-size: 12px; font-weight: 600; background: rgba(61, 224, 196, 0.12); color: var(--accent-main); border: 1px solid var(--line); transition: background 0.12s ease; }
.search-form button:hover { background: rgba(61, 224, 196, 0.22); }
.search-results { flex: 1; overflow-y: auto; padding: 8px 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.search-empty, .search-noresults { color: var(--text-muted); font-size: 13px; text-align: center; padding: 24px 12px; }
.search-result { padding: 10px 12px; border-radius: 10px; background: rgba(26, 42, 58, 0.4); border: 1px solid var(--line-soft); cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; }
.search-result:hover { border-color: var(--accent-main); background: rgba(61, 224, 196, 0.05); }
.search-result-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.search-avatar { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; font-size: 10px; font-weight: 800; color: var(--bg-primary); flex-shrink: 0; }
.search-result-head strong { font-size: 12px; color: var(--text-primary); }
.search-result-head time { font-size: 10px; color: var(--text-muted); margin-left: auto; }
.search-result-content { font-size: 13px; color: var(--text-secondary); line-height: 1.45; word-break: break-word; margin: 0; }
.search-result-content mark { background: rgba(61, 224, 196, 0.25); color: var(--text-primary); border-radius: 3px; }

/* Threads */
.thread-sidebar { display: flex; flex-direction: column; width: 340px; max-width: 90vw; position: fixed; top: 0; right: 0; bottom: 0; z-index: 55; background: var(--bg-primary); border-left: 1px solid var(--line); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4); }
.thread-sidebar[hidden] { display: none !important; }
.thread-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; color: var(--text-secondary); }
.thread-sidebar-head button { cursor: pointer; background: transparent; color: var(--text-muted); font-size: 18px; border: none; }
.thread-sidebar-head button:hover { color: var(--text-primary); }
.thread-root { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); background: rgba(26, 42, 58, 0.3); }
.thread-root-card { display: flex; flex-direction: column; gap: 6px; }
.thread-root-head { display: flex; align-items: center; gap: 8px; }
.thread-root-avatar { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; font-size: 10px; font-weight: 800; color: var(--bg-primary); flex-shrink: 0; }
.thread-root-head strong { font-size: 12px; color: var(--text-primary); }
.thread-root-content { font-size: 13px; color: var(--text-muted); line-height: 1.45; word-break: break-word; margin: 0; }
.thread-list { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.thread-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px 16px; color: var(--text-muted); font-size: 13px; text-align: center; }
.thread-empty span { font-size: 26px; }
.thread-message { padding: 8px 10px; border-radius: 10px; background: rgba(26, 42, 58, 0.4); border: 1px solid var(--line-soft); }
.thread-message.deleted { opacity: 0.55; }
.thread-message-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.thread-message-avatar { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 6px; font-size: 9px; font-weight: 800; color: var(--bg-primary); flex-shrink: 0; }
.thread-message-head strong { font-size: 12px; color: var(--text-primary); }
.thread-message-head time { font-size: 10px; color: var(--text-muted); margin-left: auto; }
.thread-message-content { position: relative; font-size: 13px; color: var(--text-secondary); line-height: 1.45; word-break: break-word; margin: 0; padding-right: 24px; }
.thread-message-delete { position: absolute; top: -4px; right: -4px; cursor: pointer; background: transparent; color: var(--text-muted); border: none; font-size: 15px; line-height: 1; border-radius: 6px; padding: 2px 5px; }
.thread-message-delete:hover { background: rgba(232, 93, 63, 0.15); color: var(--alert); }
.thread-composer { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--line); }
.thread-composer textarea { flex: 1; resize: none; min-height: 38px; max-height: 100px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-elevated, rgba(26, 42, 58, 0.4)); color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none; }
.thread-composer textarea:focus { border-color: var(--accent-main); }
.thread-composer button { cursor: pointer; border-radius: 9px; padding: 0 16px; height: 38px; font-size: 12px; font-weight: 700; background: var(--accent-main); color: var(--bg-primary); border: none; transition: opacity 0.12s ease; }
.thread-composer button:hover { opacity: 0.9; }

.thread-indicator { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; background: rgba(64, 141, 190, 0.14); color: var(--accent-light, var(--text-secondary)); border: 1px solid rgba(64, 141, 190, 0.25); border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 600; line-height: 1.4; transition: background 0.12s ease, border-color 0.12s ease; }
.thread-indicator:hover { background: rgba(64, 141, 190, 0.26); }

.threadlist-panel { position: absolute; top: 46px; right: 12px; z-index: 50; width: 300px; max-width: calc(100vw - 24px); background: var(--bg-primary); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); overflow: hidden; }
.threadlist-panel[hidden] { display: none !important; }
.threadlist-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; color: var(--text-secondary); }
.threadlist-head button { cursor: pointer; background: transparent; color: var(--text-muted); font-size: 18px; line-height: 1; border: none; }
.threadlist-head button:hover { color: var(--text-primary); }
.threadlist-body { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; padding: 6px; }
.threadlist-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px 12px; color: var(--text-muted); font-size: 12px; text-align: center; }
.threadlist-empty span { font-size: 22px; }
.threadlist-item { display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer; background: transparent; color: var(--text-primary); border: 1px solid var(--line-soft); border-radius: 9px; padding: 9px 11px; margin-bottom: 4px; font-family: inherit; transition: background 0.12s ease, border-color 0.12s ease; }
.threadlist-item:hover { background: rgba(64, 141, 190, 0.12); border-color: var(--accent-main); }
.threadlist-item-title { font-size: 13px; font-weight: 600; line-height: 1.35; word-break: break-word; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.threadlist-item-meta { font-size: 11px; color: var(--text-muted); }

/* Reply threading */
.message-reply-context { display: flex; align-items: baseline; gap: 6px; max-width: 820px; margin-top: 6px; padding: 4px 8px; border-left: 3px solid var(--accent-main); border-radius: 4px; background: rgba(61, 224, 196, 0.06); color: var(--text-muted); font-size: 11px; line-height: 1.4; text-decoration: none; }
.message-reply-context span { color: var(--accent-main); font-weight: 700; white-space: nowrap; }
.message-reply-context strong { color: var(--text-secondary); font-weight: 700; }
.message-reply-context q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.message-reply-context q::before, .message-reply-context q::after { content: none; }
.message-reply-context:hover { background: rgba(61, 224, 196, 0.12); }
.reply-preview { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line-soft); border-left: 3px solid var(--accent-main); background: rgba(61, 224, 196, 0.06); color: var(--text-muted); font-size: 11px; }
.reply-preview-icon { color: var(--accent-main); font-weight: 800; }
.reply-preview [data-reply-preview-copy] { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-preview[hidden], .attachment-preview[hidden] { display: none !important; }
.reply-preview button { display: grid; width: 20px; height: 20px; place-items: center; cursor: pointer; border-radius: 50%; background: rgba(136, 136, 136, 0.15); color: var(--text-secondary); font-size: 14px; line-height: 1; }
.reply-preview button:hover { background: rgba(232, 93, 63, 0.3); color: var(--alert); }

/* Mention autocomplete */
.mention-suggestions { z-index: 120; width: 280px; max-height: 260px; overflow-y: auto; border-radius: 12px; background: var(--bg-secondary); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); padding: 6px; }
.mention-list { display: flex; flex-direction: column; gap: 2px; }
.mention-suggestion { display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer; border-radius: 8px; background: transparent; padding: 7px 8px; text-align: left; }
.mention-suggestion:hover, .mention-suggestion.active { background: rgba(61, 224, 196, 0.12); }
.mention-special-mark, .mention-avatar { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border-radius: 8px; font-size: 11px; font-weight: 850; color: var(--bg-primary); background: linear-gradient(145deg, var(--accent-main), var(--accent-alt)); }
.mention-label { font-size: 12px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.mention-sub { flex: 1; overflow: hidden; font-size: 10px; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
.mention-online { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.mention-online.online { background: var(--accent-main); box-shadow: 0 0 6px rgba(61, 224, 196, 0.6); }

.notifications-shell { max-width: 640px; margin: 40px auto; padding: 0 20px; }
.notifications-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.notifications-head strong { font-size: 18px; color: var(--text-primary); }
.notifications-head small { font-size: 12px; color: var(--text-muted); }
.notifications-head form { margin-left: auto; }
.notifications-head button { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--ink-4); color: var(--accent-main); font-size: 13px; font-weight: 700; cursor: pointer; }
.notifications-head button:hover { background: rgba(61, 224, 196, 0.12); }
.notifications-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.notification-item { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); overflow: hidden; }
.notification-item.unread { border-color: rgba(61, 224, 196, 0.45); background: rgba(61, 224, 196, 0.05); }
.notification-link, .notification-plain { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; color: inherit; text-decoration: none; }
.notification-link:hover { background: rgba(61, 224, 196, 0.06); }
.notification-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 850; color: var(--bg-primary); background: linear-gradient(145deg, var(--accent-main), var(--accent-alt)); }
.notification-body { display: grid; gap: 2px; min-width: 0; }
.notification-body strong { font-size: 13px; color: var(--text-primary); }
.notification-body em { font-style: normal; font-size: 11px; color: var(--text-secondary); }
.notification-kind { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-main); }
.notification-body p { margin: 2px 0 0; font-size: 13px; color: var(--text-secondary); line-height: 1.45; word-break: break-word; }
.notifications-empty { color: var(--text-muted); text-align: center; padding: 40px 20px; font-size: 14px; }

.bell-wrap { position: relative; display: inline-block; z-index: 100; }
.bell-button, .notifications-link { position: relative; }
.bell-badge { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--accent-alt); color: var(--bg-primary); font-size: 10px; font-weight: 850; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--bg-primary); }
.bell-dropdown { position: absolute; top: 40px; right: 0; z-index: 120; width: 320px; max-width: calc(100vw - 24px); background: #050505; background-color: #050505; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); overflow: hidden; backdrop-filter: none; -webkit-backdrop-filter: none; }
.bell-dropdown[hidden] { display: none !important; }
.bell-dropdown-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bell-dropdown-head strong { font-size: 13px; color: var(--text-primary); }
.bell-dropdown-head button { border: none; background: none; color: var(--accent-main); font-size: 12px; font-weight: 700; cursor: pointer; }
.bell-dropdown-head button:hover { text-decoration: underline; }
.bell-list { list-style: none; margin: 0; padding: 4px 0; max-height: 360px; overflow-y: auto; }
.bell-item { border-bottom: 1px solid var(--line); }
.bell-item:last-child { border-bottom: none; }
.bell-item-link, .bell-item-plain { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; color: inherit; text-decoration: none; }
.bell-item-link:hover { background: rgba(61, 224, 196, 0.08); }
.bell-item-avatar { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 850; color: var(--bg-primary); background: linear-gradient(145deg, var(--accent-main), var(--accent-alt)); }
.bell-item-body { display: grid; gap: 1px; min-width: 0; }
.bell-item-body strong { font-size: 12px; color: var(--text-primary); }
.bell-kind { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-main); }
.bell-item-body p { margin: 2px 0 0; font-size: 12px; color: var(--text-secondary); line-height: 1.4; word-break: break-word; }
.bell-empty { padding: 22px 14px; text-align: center; color: var(--text-muted); font-size: 13px; }
.bell-dropdown-foot { display: block; padding: 10px 14px; border-top: 1px solid var(--line); text-align: center; color: var(--accent-main); font-size: 12px; font-weight: 700; text-decoration: none; }
.bell-dropdown-foot:hover { background: rgba(61, 224, 196, 0.08); }

/* Custom roles */
.role-create-form, .inline-form, .custom-role-toggles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.role-create-form { margin-bottom: 14px; }
.role-create-form input[type="text"], .inline-form input[type="text"] { width: auto; }
.role-create-form input[type="color"], .inline-form input[type="color"] { width: 40px; height: 32px; padding: 2px; background: var(--bg-surface); border: 1px solid var(--line); border-radius: 6px; }
.role-create-form label, .inline-form label { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; color: var(--text-secondary); }
.role-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.role-color-swatch { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(0,0,0,0.3); }
.role-on { border-color: var(--role-color, var(--accent-main)); color: var(--role-color, var(--accent-main)); }
.custom-role-toggles button { padding: 4px 8px; font-size: 11px; }
.role-badge { color: var(--role-color, #99aab5); }

.settings-shell-narrow .settings-layout { max-width: 920px; }
.permission-edit-form { display: grid; gap: 4px; padding: 20px; }
.permission-toggle { display: flex; gap: 12px; align-items: center; padding: 11px 14px; border: 1px solid var(--line-soft); border-radius: 10px; font-size: 11px; cursor: pointer; }
.permission-toggle + .permission-toggle { margin-top: 0; }
.permission-toggle:hover { background: rgba(61, 224, 196, .04); }
.permission-toggle input { accent-color: var(--accent-main); }
.permission-edit-form .settings-form-actions { padding-inline: 0; }

.channel-perm-table-wrap { overflow-x: auto; padding: 6px 20px 0; }
.channel-perm-table { width: 100%; min-width: 900px; border-collapse: collapse; }
.channel-perm-table th, .channel-perm-table td { padding: 10px 8px; border-bottom: 1px solid var(--line-soft); font-size: 9px; text-align: center; vertical-align: middle; }
.channel-perm-table th:first-child { color: var(--text-secondary); text-align: left; min-width: 150px; }
.channel-perm-table thead th { background: rgba(61, 224, 196, .055); color: var(--text-muted); font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
.channel-perm-table th .role-color-swatch { display: inline-block; margin-right: 8px; vertical-align: middle; }
.channel-perm-table select { border: 1px solid var(--line); border-radius: 7px; background: var(--bg-primary); color: var(--text-primary); padding: 6px 7px; font-size: 9px; max-width: 110px; }
.channel-perm-table select option[value="allow"] { color: #2fbf71; }
.channel-perm-table select option[value="deny"] { color: var(--alert); }

.settings-sub-list { padding: 6px 20px 20px; }
.settings-sub-list .management-row { grid-template-columns: auto minmax(0, 1fr) auto; }

.server-banner { height: 9px; width: 100%; flex: 0 0 auto; opacity: .5; }

.forum-page .conversation-column { min-width: 0; }
.forum-scroll { flex: 1 1 auto; overflow-y: auto; padding: 22px 26px; }
.forum-error { flex: 0 0 auto; margin: 6px 0; padding: 8px 12px; border: 1px solid rgba(232, 93, 63, .55); border-radius: 10px; background: rgba(232, 93, 63, .1); color: var(--alert); font-size: 13px; }
.forum-head { margin-bottom: 18px; }
.forum-head h1 { margin: 4px 0 2px; font-size: 22px; }
.forum-head p { margin: 0; color: var(--text-dim); }
.forum-composer { margin-bottom: 18px; border: 1px solid var(--line); border-radius: 10px; }
.forum-composer summary { cursor: pointer; padding: 10px 14px; font-weight: 600; }
.forum-composer form { display: grid; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.forum-composer input[type="text"], .forum-composer textarea {
  width: 100%; box-sizing: border-box; background: var(--bg-primary); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
}
.forum-composer button, .forum-reply-form button { justify-self: end; }
.forum-list { display: flex; flex-direction: column; gap: 8px; }
.forum-post-link {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--text);
}
.forum-post-link:hover { border-color: var(--accent-main); }
.forum-post-icon { font-size: 22px; width: 34px; text-align: center; }
.forum-post-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.forum-post-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-post-main small { color: var(--text-dim); }
.forum-post-last { color: var(--text-dim); font-size: 12px; }
.forum-empty { text-align: center; padding: 40px 0; color: var(--text-dim); }
.forum-empty span { font-size: 34px; display: block; margin-bottom: 8px; }
.forum-post { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.forum-post-head { margin-bottom: 14px; }
.forum-back { color: var(--accent-alt); text-decoration: none; font-size: 13px; }
.forum-post-head h2 { margin: 6px 0 2px; font-size: 20px; }
.forum-post-head small { color: var(--text-dim); }
.inline-form { display: inline; }
.link-danger { background: none; border: none; color: var(--alert); cursor: pointer; text-decoration: underline; padding: 0; }
.forum-messages { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 16px; }
.forum-message { display: flex; gap: 10px; }
.forum-message > div { min-width: 0; }
.forum-message header { display: flex; gap: 8px; align-items: baseline; }
.forum-message time { color: var(--text-dim); font-size: 12px; }
.message-content { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.forum-reply-form { display: flex; gap: 8px; align-items: flex-end; }
.forum-reply-form textarea {
  flex: 1 1 auto; resize: vertical; background: var(--bg-primary); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; min-width: 0;
}

.voice-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; background: #0b0d10; border-top: 1px solid var(--line);
  color: var(--text); font-size: 14px;
}
.voice-bar[hidden] { display: none; }
.voice-bar-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.voice-bar-dot { width: 10px; height: 10px; border-radius: 50%; background: #4f5660; flex: none; }
.voice-bar.connected .voice-bar-dot { background: #23a55a; }
.voice-bar-identity strong { display: block; line-height: 1.15; }
.voice-bar-identity small { color: var(--text-muted); display: block; }
.voice-bar-actions { margin-left: auto; display: flex; gap: 8px; }
.voice-bar-join, .voice-bar-leave {
  border: 0; border-radius: 6px; padding: 6px 14px; cursor: pointer; font-weight: 600;
}
.voice-bar-join { background: #5865f2; color: #fff; }
.voice-bar-leave { background: #da373c; color: #fff; }
.voice-bar-status { color: var(--text-muted); font-size: 13px; }
.voice-bar-status.error { color: #f23f42; }