:root {
  --bg: #1a1b23;
  --sidebar: #14151c;
  --servers: #0d0e14;
  --hover: #252733;
  --active: #2d3040;
  --text: #eceef5;
  --muted: #9aa0b4;
  --accent: #7c6cff;
  --accent-2: #5b8cff;
  --accent-soft: rgba(124, 108, 255, 0.2);
  --green: #2dd4a0;
  --danger: #ff5c7a;
  --input: #222433;
  --header: #1a1b23;
  --elev: 0 12px 40px rgba(0, 0, 0, 0.45);
  --radius: 10px;
  --glow: 0 0 24px rgba(124, 108, 255, 0.25);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
* { scrollbar-width: thin; scrollbar-color: #111214 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: #111214;
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: #060607; }
*::-webkit-scrollbar-corner { background: transparent; }
html, body { height: 100%; height: 100dvh; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); }
.hidden { display: none !important; }

#login {
  height: auto;
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px 12px calc(28px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background: linear-gradient(135deg, #1e1f22, #313338 50%, #5865f2);
}
.login-card {
  background: #2b2d31;
  padding: 40px 36px;
  border-radius: 8px;
  width: 420px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.logo { font-size: 32px; font-weight: 800; letter-spacing: 4px; color: #fff; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.logo-mark { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; }

.login-card p { color: var(--muted); margin-bottom: 24px; }
.login-card input, .settings-card select, .settings-card input[type="range"] {
  width: 100%; padding: 12px; border: none; border-radius: 4px;
  background: #1e1f22; color: #fff; font-size: 16px; margin-bottom: 16px;
}
.login-card button, .settings-card button {
  width: 100%; padding: 12px; border: none; border-radius: 4px;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
}
.login-card button:hover, .settings-card button:hover { filter: brightness(1.1); }
.login-error { color: #f23f43; margin-top: 14px; font-size: 14px; line-height: 1.4; }

#app { display: flex; height: 100%; }

.servers {
  width: 72px; background: var(--servers); display: flex; flex-direction: column;
  align-items: center; padding: 12px 0; gap: 12px; overflow: visible;
}
#serverList {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  overflow: visible;
}
.server-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.server-icon {
  width: 48px; height: 48px; border-radius: 50%; background: #313338; overflow: visible;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; cursor: pointer; transition: border-radius .15s, background .15s;
  position: relative; color: #dbdee1;
}
.server-icon::before {
  content: ""; position: absolute; left: -16px; width: 8px; height: 8px;
  border-radius: 0 4px 4px 0; background: #fff; opacity: 0; transition: height .15s, opacity .15s;
}
.server-icon:hover::before { opacity: 1; height: 20px; }
.server-icon.active::before { opacity: 1; height: 40px; }
.badge {
  position: absolute; top: -4px; right: -4px;
  background: #f23f43; color: #fff; font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.ch.unread { color: #fff; font-weight: 700; }
.server-icon.active, .server-icon:hover { border-radius: 16px; background: var(--accent); color: #fff; }
.server-icon.home-ico { background: var(--accent); color: #fff; border-radius: 16px; }
.server-icon.add { background: #313338; color: var(--green); font-size: 22px; }
.server-icon.add:hover { background: var(--green); color: #fff; }
.server-icon.has-voice { box-shadow: 0 0 0 2px #23a559; }
.srv-spk {
  position: absolute; top: -8px; left: -8px; z-index: 5;
  width: 20px; height: 20px; border-radius: 50%;
  background: #23a559; font-size: 11px; line-height: 20px; text-align: center;
  box-shadow: 0 0 0 2px #1e1f22; pointer-events: none;
}
.srv-live {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  display: flex; align-items: center; pointer-events: none;
}
.srv-live img {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid #1e1f22;
  margin-left: -6px; background: #313338;
}
.srv-live img:first-child { margin-left: 0; }
.srv-live i { font-style: normal; font-size: 9px; color: #fff; margin-left: 2px; }
#srvHover {
  position: fixed; z-index: 90; min-width: 200px; max-width: 260px;
  background: #111214; border: 1px solid #1f2023; border-radius: 8px;
  padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  display: none; pointer-events: none;
}
#srvHover.show { display: block; }
@media (hover: none), (pointer: coarse) {
  #srvHover { display: none !important; }
}
.sh-name { font-weight: 700; color: #fff; margin-bottom: 6px; }
.sh-un { color: #f23f43; font-size: 12px; margin-bottom: 6px; }
.sh-ch { color: #23a559; font-size: 12px; font-weight: 700; margin-top: 8px; }
.sh-people { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.sh-people span { display: flex; align-items: center; gap: 6px; color: #dbdee1; font-size: 13px; }
.sh-people img { width: 20px; height: 20px; border-radius: 50%; }
.server-sep { width: 32px; height: 2px; background: #3f4147; margin: 4px 0; }
.server-title { display: flex; align-items: center; justify-content: space-between; }
.server-title button, .add-ch {
  background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 16px;
}
.add-ch { float: right; }
.section { overflow: hidden; }
#userMenuDm {
  margin-top: 10px; width: 100%; background: var(--accent); color: #fff; border: none;
  border-radius: 4px; padding: 8px; cursor: pointer;
}
#replyBar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 16px; background: #2b2d31; color: var(--muted); font-size: 13px;
}
.msg-actions {
  position: absolute; top: -14px; right: 8px; margin: 0;
  display: none; gap: 2px; z-index: 3;
  background: #2b2d31; border: 1px solid #3f4147; border-radius: 4px; padding: 2px;
}
.msg:hover .msg-actions { display: flex; }
.msg-actions button {
  background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 4px 6px;
}
.msg-actions button:hover { color: #fff; background: #3f4147; border-radius: 3px; }
.reply-quote { font-size: 12px; color: var(--muted); border-left: 2px solid var(--accent); padding-left: 6px; margin-bottom: 4px; }
.edited { font-size: 11px; color: var(--muted); margin-left: 6px; }
.prompt-actions { display: flex; gap: 8px; }
.prompt-actions .ghost { background: #4e5058; }
.toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: #111214; border: 1px solid #3f4147; padding: 10px 16px; border-radius: 8px; z-index: 40;
}

.channels {
  width: 240px; background: var(--sidebar); display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.dm-search {
  display: block; width: calc(100% - 16px); margin: 8px; padding: 8px 10px;
  border: none; outline: none; border-radius: 4px; background: #1e1f22;
  color: #dbdee1; font-size: 13px;
}
.dm-search::placeholder { color: #6d6f78; }
#serverPanel, #homePanel { flex: 1; overflow-y: auto; padding-bottom: 128px; }
.server-title { padding: 12px 10px 12px 16px; font-weight: 700; border-bottom: 1px solid #1f2023; box-shadow: 0 1px 0 #1f2023; display: flex; align-items: center; gap: 6px; }
.server-title span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#muteSrvBtn {
  background: transparent; border: none; color: #b5bac1; cursor: pointer;
  width: 28px; height: 28px; border-radius: 4px; font-size: 14px;
}
#muteSrvBtn:hover { background: #3f4248; color: #fff; }
.invite-banner {
  display: block;
  width: calc(100% - 24px);
  margin: 10px 12px 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  background: rgba(35, 165, 89, 0.12);
  color: #3ba55d;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  letter-spacing: 0.1px;
}
.invite-banner:hover {
  background: #23a559;
  color: #fff;
}
.invite-banner.hidden { display: none !important; }
.invite-copy {
  background: #23a559 !important;
  color: #fff !important;
  border: none;
  border-radius: 4px;
  font-weight: 600;
}
.invite-copy:hover { background: #1a7f45 !important; }
.invite-foot { margin-top: -8px; margin-bottom: 12px; font-size: 12px; color: #949ba4; }
.section { padding: 18px 16px 4px; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .4px; text-transform: uppercase; }
.ch {
  margin: 1px 8px; padding: 6px 8px; border-radius: 4px; cursor: pointer;
  color: var(--muted); display: flex; align-items: center; gap: 6px;
  position: relative; font-size: 16px;
}
.ch:hover { background: var(--hover); color: var(--text); }
.ch.active { background: var(--active); color: #fff; }
.ch .hash { color: var(--muted); font-weight: 700; }
.ch-ico { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; flex: 0 0 18px; }
.ch-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-gear {
  margin-left: auto; opacity: 0; border: none; background: transparent; color: #b5bac1;
  cursor: pointer; font-size: 14px; padding: 0 4px; line-height: 1;
}
.ch:hover .ch-gear, .ch.active .ch-gear { opacity: 1; }
.ch-gear:hover { color: #fff; }
.nsfw { font-size: 10px; color: #f23f43; font-weight: 700; }
.slots { font-size: 10px; color: #949ba4; }
.chan-ava { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; cursor: pointer; color: #dbdee1; }
.chan-ava img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: #1e1f22; display: none; }
.voice-users { padding-left: 16px; font-size: 13px; }
.voice-user { display: flex; align-items: center; gap: 6px; padding: 3px 8px; color: var(--text); flex-wrap: wrap; cursor: context-menu; }
.voice-user[draggable="true"] { cursor: grab; }
.ch.drop-voice, .voice-users.drop-voice { outline: 2px dashed #5865f2; background: rgba(88,101,242,.15); }
.voice-user.speaking { color: inherit; }
.voice-user img { width: 20px; height: 20px; border-radius: 50%; box-sizing: content-box; }
.voice-user.speaking img,
.member.speaking img {
  box-shadow: 0 0 0 2px #23a559, 0 0 8px #23a559;
}
.live-tag { color: #f23f43; font-size: 11px; font-weight: 700; }
.watch-btn {
  margin-left: auto; border: none; border-radius: 4px; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 11px; padding: 2px 6px;
}
.watch-btn.off { background: #4e5058; }
.member { cursor: context-menu; }

#userMenu {
  position: fixed; z-index: 30; background: #111214; border: 1px solid #3f4147;
  border-radius: 8px; padding: 12px; width: 220px; box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
#userMenu.hidden { display: none !important; }
.user-menu-name { font-weight: 700; margin-bottom: 10px; }
#userMenu label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 6px; }
#userMenu input { width: 100%; accent-color: var(--accent); }

.user-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: #232428; padding: 6px 8px; display: flex; align-items: center; gap: 8px;
  min-height: 52px;
}
.user-bar img { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px; }
.user-meta { min-width: 0; flex: 1; }
.user-bar .uname { font-size: 13px; font-weight: 600; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.user-bar .uname:hover { text-decoration: underline; color: #fff; }
.ustatus { font-size: 11px; color: #23a559; }
.user-actions { display: flex; gap: 2px; }
.user-actions button {
  width: 32px; height: 32px; border: none; border-radius: 4px;
  background: transparent; color: #b5bac1; cursor: pointer; font-size: 15px;
}
.user-actions button:hover { background: #3f4248; color: #fff; }
.user-actions button.muted { color: #f23f43; }

main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
#channelHeader {
  height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 16px;
  border-bottom: 1px solid #1f2023; font-weight: 700; box-shadow: 0 1px 0 #1f2023;
}
#channelTitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-btn {
  display: none; border: none; background: #2b2d31; color: #fff;
  width: 36px; height: 36px; border-radius: 8px; cursor: pointer; font-size: 18px; flex: 0 0 36px;
}
#mobileOverlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 25;
}
#messages { flex: 1; overflow-y: auto; padding: 16px 0 8px; }
.msg { display: flex; gap: 16px; padding: 4px 16px 4px 16px; border-radius: 0; position: relative; }
.msg:hover { background: #2e3035; }
.msg img { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px; }
.msg .meta { font-size: 16px; font-weight: 500; color: #f2f3f5; line-height: 1.25; }
.msg .time { font-size: 12px; color: #949ba4; font-weight: 400; margin-left: 8px; }
.msg .body { color: #dbdee1; margin-top: 2px; white-space: pre-wrap; word-break: break-word; font-size: 16px; line-height: 1.375; }
.chat-link { color: #00aff4; text-decoration: none; }
.chat-link:hover { text-decoration: underline; }
.link-card {
  margin-top: 8px; max-width: 420px; border-left: 4px solid #5865f2;
  background: #2b2d31; border-radius: 4px; overflow: hidden; display: flex; gap: 10px;
}
.link-card img { width: 80px; height: 80px; object-fit: cover; flex: 0 0 80px; }
.link-card .lt { padding: 8px 10px 8px 0; min-width: 0; }
.link-card b { display: block; font-size: 14px; color: #f2f3f5; }
.link-card small { color: #b5bac1; font-size: 12px; }
.mention { color: #c9cdfb; background: rgba(88,101,242,.2); border-radius: 3px; padding: 0 2px; }
.mention.me { color: #fff; background: rgba(88,101,242,.55); }
.sys { text-align: center; color: var(--muted); font-size: 13px; padding: 8px; }

#mentionBox {
  position: fixed; left: 16px; bottom: 80px; width: 320px;
  background: #2b2d31; border: 1px solid #1f2023; border-radius: 8px;
  overflow: hidden; z-index: 80; max-height: 260px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
#mentionBox.hidden { display: none !important; }
.ment-item {
  display: block; width: 100%; text-align: left; border: none;
  background: transparent; color: #dbdee1; padding: 8px 12px; cursor: pointer;
}
.ment-item:hover { background: #404249; }
.nick-copy { cursor: pointer; }
.nick-copy:hover { text-decoration: underline; }
#msgForm { padding: 0; display: flex; gap: 0; align-items: center; background: var(--input); margin: 0 16px 24px; border-radius: 8px; }
#msgInput {
  flex: 1; padding: 11px 8px 11px 4px; border: none; border-radius: 8px;
  background: transparent; color: #dbdee1; font-size: 16px; outline: none;
}
#sendBtn {
  flex: 0 0 44px; height: 44px; border: none; border-radius: 0 8px 8px 0;
  background: transparent; color: #b5bac1; cursor: pointer; font-size: 18px;
}
#sendBtn:hover { color: #fff; background: #404249; }
.attach-btn {
  flex: 0 0 44px; height: 44px; border-radius: 8px 0 0 8px; background: transparent;
  color: #b5bac1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 22px; user-select: none;
}
.attach-btn:hover { color: #fff; }
#typingLine { padding: 0 20px 8px; font-size: 12px; color: var(--muted); min-height: 18px; }
.msg-img { margin-top: 8px; }
.msg-img img { max-width: min(420px, 100%); border-radius: 8px; display: block; }

.home-link {
  margin: 4px 8px; padding: 8px 10px; border-radius: 4px; cursor: pointer; color: #dbdee1;
}
.home-link:hover, .home-link.active { background: #404249; }
#friendsView { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #313338; }
#friendsView.hidden { display: none !important; }
main.friends-on #messages,
main.friends-on #msgForm,
main.friends-on #replyBar,
main.friends-on #typingLine,
main.friends-on #attachPreview { display: none !important; }
main.friends-on #channelHeader {
  display: none !important;
}
.friends-head {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
  background: rgba(12,14,22,.55);
}
.friends-head-title {
  font-size: 18px;
  font-weight: 800;
  color: #eef0f7;
}
.friends-nav {
  display: inline-flex !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: rgba(124, 108, 255, 0.22) !important;
  color: #fff !important;
  border: none !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  cursor: pointer;
  flex-shrink: 0;
}
.friends-nav:hover {
  background: rgba(124, 108, 255, 0.35) !important;
}
.friends-col { padding: 8px 16px; overflow: auto; }
.friend-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 8px; border-bottom: 1px solid #3f4147;
}
.friend-row button { background: #4e5058; color: #fff; border: none; border-radius: 4px; padding: 6px 8px; cursor: pointer; margin-left: 6px; }
.empty-f { color: #949ba4; padding: 10px 8px; }
#userMenuFriend {
  margin-top: 8px; width: 100%; background: #248046; color: #fff; border: none;
  border-radius: 4px; padding: 8px; cursor: pointer;
}
.members {
  width: 240px;
  background: #2b2d31;
  padding: 0;
  overflow-y: auto;
  scrollbar-gutter: auto;
  border-left: 1px solid #1f2023;
}
.members-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 12px 10px;
  background: #2b2d31;
  border-bottom: 1px solid #1f2023;
}
.members-title {
  font-size: 12px;
  font-weight: 700;
  color: #949ba4;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.members-title span { color: #dbdee1; }
.members-actions { display: flex; align-items: center; gap: 6px; }
.invite-people-btn {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 4px;
  background: rgba(35, 165, 89, 0.15);
  color: #3ba55d;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.invite-people-btn:hover { background: #23a559; color: #fff; }
.hide-off {
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #949ba4;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.hide-off input {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: #23a559;
}
#memberList { padding: 8px 0 16px; }
.mgroup {
  padding: 16px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  color: #949ba4;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.mempty {
  padding: 24px 16px;
  text-align: center;
  color: #6d6f78;
  font-size: 13px;
}
.pdot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; background: #23a559; }
.pdot.dnd { background: #f23f43; }
.pdot.offline { background: #80848e; }
.mstatus {
  display: block;
  color: #949ba4;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nick-rainbow {
  background: linear-gradient(90deg, #ff5c5c, #ffc83d, #4dff88, #4da6ff, #c44dff, #ff5c5c);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rainbow 4s linear infinite; font-weight: 600;
}
@keyframes rainbow { to { background-position: 200% 0; } }
.chk { display: flex !important; align-items: center; gap: 8px; color: var(--text) !important; }
.chk input { width: auto !important; margin: 0; }
#nickColorInput { height: 36px; padding: 2px !important; }
.member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 4px;
  margin: 1px 8px;
  transition: background .12s ease;
}
.member:hover { background: #35373c; }
.mav { position: relative; width: 32px; height: 32px; flex: 0 0 32px; }
.member img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  background: #1e1f22;
}
.mav .pdot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  box-shadow: 0 0 0 3px #2b2d31;
}
.minfo { min-width: 0; flex: 1; }
.mname {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: #f2f3f5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mname em { font-style: normal; color: #949ba4; font-size: 11px; margin-left: 2px; }
.member.voice .mname { color: #23a559; }
.member.voice .mstatus { color: #3ba55d; }
.member.is-off { opacity: 0.55; }
.member.is-off:hover { opacity: 0.85; }
.member.is-off .mname { color: #949ba4; }

#voiceBar {
  position: absolute; left: 8px; right: 8px; bottom: 56px;
  background: #232428; border: 1px solid #3ba55d;
  border-radius: 8px; padding: 8px;
  display: flex; flex-direction: column; gap: 8px; z-index: 6;
}
.voice-info { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.vconn { color: #23a559; font-weight: 700; font-size: 11px; }
#voiceName { color: #dbdee1; font-size: 12px; }
.green-dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; display: inline-block; margin-right: 6px; }
.voice-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#leaveVoiceBtn {
  margin-left: auto !important; background: #f23f43 !important; color: #fff !important;
  min-width: 36px; font-weight: 800;
}
#resumeShareBtn.hidden { display: none !important; }
.voice-controls button {
  background: #2b2d31; border: none; color: #fff; width: 36px; height: 32px;
  border-radius: 4px; cursor: pointer; font-size: 13px;
}
.voice-controls .share-text { width: auto; padding: 0 10px; }
.voice-controls button.muted, .voice-controls button.danger { background: var(--danger); }
.voice-controls button:hover { filter: brightness(1.15); }
.voice-controls button.sharing { background: var(--green); }
.voice-controls button.share-text {
  width: auto; padding: 0 12px; border-radius: 18px; font-size: 13px; font-weight: 600;
}

#screenStage {
  position: fixed;
  z-index: 70;
  right: 18px;
  bottom: 88px;
  width: min(520px, calc(100vw - 24px));
  height: min(320px, 42vh);
  background: #0b0c10;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
  min-height: 180px;
  resize: both;
}
#screenStage.hidden { display: none !important; }
.float-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 8px 10px 12px;
  background: #15171c; cursor: grab; user-select: none;
  color: #e8eaed; font-size: 13px; font-weight: 650;
  touch-action: none;
  -webkit-user-select: none;
  min-height: 44px;
}
.float-head:active { cursor: grabbing; }
.float-acts { display: flex; gap: 6px; }
.float-acts button {
  width: 32px; height: 32px; border: none; border-radius: 8px;
  background: rgba(255,255,255,.08); color: #fff; cursor: pointer; font-size: 14px;
}
.float-acts button:hover { background: rgba(255,255,255,.16); }
.float-acts .screen-close { background: rgba(180,40,50,.7); }
.player-dock {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.82));
}
#screenStage.fs-idle .player-dock { opacity: 0.4; pointer-events: auto; }
#screenStage.is-max,
#camStage.is-max {
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  border-radius: 0 !important;
  z-index: 220;
  resize: none;
}
#camStage {
  position: fixed;
  z-index: 69;
  left: 18px;
  bottom: 88px;
  width: min(560px, calc(100vw - 24px));
  height: min(340px, 46vh);
  background: #0b0c10;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
  min-height: 160px;
  resize: both;
}
#camStage.hidden { display: none !important; }
#videoStage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 8px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: transparent;
}
#videoStage.hidden { display: none !important; }
.cam-tile {
  position: relative;
  width: 100%;
  min-height: 120px;
  height: auto;
  aspect-ratio: 16 / 11;
  border-radius: 10px;
  overflow: hidden;
  background: #111214;
  border: 2px solid transparent;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
#watchCamsBtn:not(.hidden) {
  border-color: rgba(45, 212, 160, 0.55) !important;
  color: #b8f5de !important;
}
.cam-tile video:not([src]),
.cam-tile video[src=""] { background: #1a1b20; }
.cam-tile video { width: 100%; height: 100%; object-fit: cover; }
.cam-tile span {
  position: absolute; left: 8px; bottom: 6px; font-size: 12px; font-weight: 600;
  color: #fff; text-shadow: 0 1px 2px #000;
}
.cam-close {
  position: absolute; top: 6px; right: 6px; z-index: 5;
  width: 32px; height: 32px; border: none; border-radius: 16px;
  background: rgba(0,0,0,.7); color: #fff; font-size: 16px; cursor: pointer;
}
@media (pointer: coarse) {
  .player-dock { flex-wrap: wrap; padding-bottom: 22px; }
  .player-dock button, .player-dock select { min-height: 40px; }
  #leaveStreamBtn {
    flex: 1 1 100%;
    background: #b91c1c !important;
    color: #fff !important;
  }
}
.player-dock select, .player-dock button {
  background: rgba(20,20,24,.92); color: #fff; border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.player-dock input[type=range] { width: 140px; }
.crop-lab { color: #fff; font-size: 12px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#screenStage.crop-tb #screenVideo {
  clip-path: inset(0 0 52px 0);
  height: calc(100% + 52px) !important;
  object-fit: cover;
  object-position: center top;
}
body:has(:fullscreen) #voiceBar,
body:has(:fullscreen) .user-bar {
  display: none !important;
}
#screenVideo, #screenImg {
  width: 100%;
  flex: 1;
  min-height: 0;
  height: 100%;
  background: #000;
  object-fit: contain;
}
#screenImg { display: none; }
#screenImg.show { display: block; }
#screenVideo.hide { display: none; }
#screenStage:fullscreen, #screenStage:-webkit-full-screen {
  width: 100% !important; height: 100% !important; margin: 0; border: none; border-radius: 0;
  left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
  resize: none;
}
#screenStage:fullscreen #screenVideo,
#screenStage:fullscreen #screenImg,
#screenStage:-webkit-full-screen #screenVideo,
#screenStage:-webkit-full-screen #screenImg {
  height: calc(100% - 40px);
}

#captchaRow { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 14px; }
#captchaLabel { color: var(--muted); font-size: 14px; white-space: nowrap; }
.captcha-local {
  display: flex; align-items: center; gap: 8px;
}
#captchaQ {
  min-width: 88px; padding: 10px 12px; border-radius: 8px;
  background: #0e0f14; border: 1px solid #3f4147; font-weight: 800; letter-spacing: .04em;
  color: #fff; text-align: center;
}
#captchaInput { flex: 1; margin-bottom: 0 !important; }
.ghost-mini {
  width: 44px; height: 44px; border: none; border-radius: 8px;
  background: #4e5058; color: #fff; font-size: 18px; cursor: pointer; flex-shrink: 0;
}

.ghost-btn {
  width: 100%; margin-top: 8px; padding: 12px; border: none; border-radius: 4px;
  background: #4e5058; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
}
.admin-chip {
  margin-left: auto; border: none; background: #f0b232; color: #111; font-size: 11px;
  font-weight: 700; border-radius: 4px; padding: 4px 6px; cursor: pointer;
}
.admin-card { width: min(520px, calc(100vw - 24px)); max-height: 80vh; overflow: auto; }
.admin-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; font-size: 14px; }
.admin-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid #3f4147; font-size: 13px;
}
.admin-row button { background: #4e5058; color: #fff; border: none; border-radius: 4px; padding: 4px 6px; cursor: pointer; font-size: 11px; }
.invite-row { display: flex; gap: 8px; margin-bottom: 16px; }
.invite-row input { flex: 1; margin-bottom: 0 !important; }
.invite-row button { width: auto; padding: 10px 14px; white-space: nowrap; }
#permModal, #srvModal, #chanModal, #linkWarn, #profileModal, #inviteModal, #adminModal, #settingsModal, #promptModal {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; z-index: 40;
}
#promptInput {
  width: 100%; padding: 12px; border: none; border-radius: 4px;
  background: #1e1f22; color: #fff; font-size: 16px; margin-bottom: 16px;
}
.settings-card {
  background: #2b2d31; padding: 24px; border-radius: 8px; width: 400px;
}
.profile-card { width: 440px; padding: 0 24px 20px; overflow: hidden; }
.profile-banner {
  height: 88px; margin: 0 -24px 0; background: linear-gradient(135deg, #5865f2, #23a559 70%);
}
.profile-head { display: flex; align-items: flex-end; gap: 14px; margin: -40px 0 18px; }
.avatar-edit {
  position: relative; width: 80px; height: 80px; flex: 0 0 80px; cursor: pointer; margin: 0;
}
.avatar-edit img {
  width: 80px; height: 80px; border-radius: 50%; object-fit: cover;
  border: 6px solid #2b2d31; background: #1e1f22; display: block;
}
.avatar-edit span {
  position: absolute; inset: 6px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 700;
  display: none; align-items: center; justify-content: center;
}
.avatar-edit:hover span { display: flex; }
.profile-card input, .profile-card select {
  width: 100%; padding: 10px 12px; border: none; border-radius: 4px;
  background: #1e1f22; color: #fff; font-size: 15px; margin-bottom: 14px;
}
.pref-list {
  background: #1e1f22; border-radius: 8px; overflow: hidden; margin: 6px 0 16px;
}
.pref {
  display: flex !important; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 !important; padding: 12px 14px;
  border-bottom: 1px solid #2b2d31; color: #dbdee1 !important;
}
.pref:last-child { border-bottom: none; }
.pref b { display: block; font-size: 14px; color: #f2f3f5; }
.pref small { display: block; color: #949ba4; font-size: 12px; font-weight: 400; margin-top: 2px; }
.pref input[type="checkbox"] {
  appearance: none; width: 40px !important; height: 22px !important; margin: 0 !important;
  border-radius: 11px; background: #4e5058; position: relative; cursor: pointer;
  flex: 0 0 40px; padding: 0 !important;
}
.pref input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: left .15s;
}
.pref input[type="checkbox"]:checked { background: #23a559; }
.pref input[type="checkbox"]:checked::after { left: 20px; }
#nickColorInput {
  width: 42px !important; height: 28px !important; padding: 0 !important;
  margin: 0 !important; border: none; border-radius: 6px; cursor: pointer; background: transparent;
}
.settings-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.settings-card label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.settings-card .hint { font-size: 12px; color: var(--muted); margin: -8px 0 16px; }
.settings-card input[type="range"] { padding: 0; height: 8px; width: 100%; accent-color: var(--accent); }
.meter {
  height: 10px; background: #1e1f22; border-radius: 5px; overflow: hidden; margin-bottom: 10px;
}
#micMeter { height: 100%; width: 0; background: #23a559; }
#micTestBtn.on { background: #23a559 !important; }

@media (max-width: 860px) {
  .nav-btn { display: inline-flex; align-items: center; justify-content: center; }
  #app { position: relative; overflow: hidden; }
  .servers, .channels {
    position: fixed; top: 0; bottom: 0; z-index: 30;
    left: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-100vw);
    transition: transform .2s ease, visibility .2s;
  }
  .servers { width: 72px; }
  .channels {
    left: 72px;
    width: min(280px, calc(100vw - 80px));
    box-shadow: 8px 0 24px rgba(0,0,0,.35);
  }
  .members {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(280px, 82vw);
    transform: translateX(110%);
    transition: transform .2s ease;
    background: var(--sidebar);
  }
  body.nav-left .servers, body.nav-left .channels {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
  body.nav-right .members { transform: translateX(0); }
  body.nav-left #mobileOverlay, body.nav-right #mobileOverlay { display: block; }
  #mobileOverlay.hidden { display: none !important; }
  main { width: 100%; }
  .login-card { width: calc(100% - 32px); margin: 16px; padding: 28px 20px; }
  #msgForm { padding: 8px 10px calc(12px + env(safe-area-inset-bottom)); }
  #messages { padding: 12px 10px 80px; }
  .msg { gap: 8px; }
  .msg img { width: 32px; height: 32px; }
  .msg-img img { max-width: 100%; max-height: 240px; }
  .msg-actions { display: flex; }
  #voiceBar { position: absolute; left: 8px; right: 8px; bottom: 56px; transform: none; }
  .voice-controls { display: flex; flex-wrap: wrap; gap: 6px; }
  .settings-card { width: calc(100vw - 24px); max-width: 420px; }
  #screenStage { max-height: 42vh; }
  #userMenu { width: calc(100vw - 24px); max-width: 280px; }
}

#attachPreview {
  margin: 0 16px 8px; padding: 8px; background: #2b2d31; border-radius: 8px;
  display: flex; align-items: flex-start; gap: 8px; width: fit-content;
}
#attachPreview.hidden { display: none; }
#attachPreviewImg { max-height: 120px; max-width: 220px; border-radius: 6px; display: block; }
#attachClear {
  border: none; background: #1e1f22; color: #fff; width: 24px; height: 24px;
  border-radius: 4px; cursor: pointer;
}
main.drop-on { outline: 2px dashed #5865f2; outline-offset: -8px; }
.msg-img img {
  max-width: min(520px, 100%);
  max-height: 360px;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-in;
  border-radius: 8px;
}
#lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.82);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000; cursor: zoom-out;
}
#lightbox.hidden { display: none; }
#lightbox img {
  max-width: 92vw; max-height: 92vh; border-radius: 8px;
  object-fit: contain;
}
body.theme-darker { --bg:#1a1b1e; --sidebar:#111214; --servers:#0c0d0e; --input:#0c0d0e; }
#netBar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: #f0b232; color: #111; text-align: center; padding: 6px; font-weight: 700;
}
.spoiler { background: #111; color: #111; border-radius: 3px; cursor: pointer; }
.spoiler.open { background: #3f4147; color: #dbdee1; }
.reacts { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }
.react-b { background: #2b2d31; border: 1px solid #3f4147; color: #dbdee1; border-radius: 12px; padding: 2px 8px; cursor: pointer; }
.add-friend-row { display: flex; gap: 6px; padding: 8px; }
.add-friend-row input { flex: 1; background: #1e1f22; border: none; color: #fff; border-radius: 4px; padding: 8px; }
.add-friend-row button { background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 8px; cursor: pointer; }
code { background: #1e1f22; padding: 0 4px; border-radius: 3px; font-size: 13px; }
#searchModal, #cmdk { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 40; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
#searchModal.hidden, #cmdk.hidden { display: none !important; }
#userMenu button {
  display: block; width: 100%; margin-top: 6px; border: none; border-radius: 4px;
  padding: 8px; cursor: pointer; color: #fff; background: #3f4248;
}
#userMenuDm { background: var(--accent) !important; }
#userMenuFriend { background: #248046 !important; }
#userMenuBlock, #userMenuReport { background: #4e5058 !important; }
.login-card input, .login-card select {
  width: 100%; padding: 12px; border: none; border-radius: 4px;
  background: #1e1f22; color: #fff; font-size: 16px; margin-bottom: 12px;
}
.settings-card button.ghost, .prompt-actions .ghost {
  background: #4e5058; color: #fff; border: none; border-radius: 4px; cursor: pointer; padding: 10px 14px;
}
.prompt-actions { display: flex; gap: 8px; margin-top: 8px; }
.prompt-actions button { flex: 1; }
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #111214; border: 1px solid #3f4147; color: #fff;
  padding: 10px 16px; border-radius: 8px; z-index: 60; max-width: 90vw;
}
#attachPreview {
  margin: 0 16px 8px; display: flex; align-items: center; gap: 8px;
  background: #2b2d31; padding: 8px; border-radius: 8px;
}
#attachPreview img { height: 64px; border-radius: 6px; }
#attachClear { margin-left: auto; background: #4e5058; color: #fff; border: none; border-radius: 4px; padding: 4px 8px; cursor: pointer; }
#channelHeader #muteSrvBtn { display: none; }

.edit-modal { width: min(420px, calc(100vw - 24px)) !important; padding: 22px !important; }
.edit-modal .settings-title { margin: 0 0 16px; font-size: 20px; }
.edit-modal .fld {
  display: block; margin: 12px 0 6px; font-size: 12px; font-weight: 700;
  color: #b5bac1; text-transform: uppercase; letter-spacing: .3px;
}
.edit-modal input:not([type="file"]):not([type="checkbox"]):not([type="range"]) {
  width: 100%; box-sizing: border-box; margin: 0;
  background: #1e1f22 !important; color: #f2f3f5 !important;
  border: 1px solid #1e1f22 !important; border-radius: 8px;
  padding: 10px 12px; font-size: 15px; outline: none;
}
.edit-modal input:focus { border-color: #5865f2 !important; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ava-upload {
  width: 80px; height: 80px; border-radius: 20px; background: #1e1f22;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto; cursor: pointer; position: relative; overflow: hidden;
  border: 2px dashed #3f4147;
}
.ava-upload img { width: 100%; height: 100%; object-fit: cover; display: none; position: absolute; inset: 0; }
.ava-plus { font-size: 28px; color: #949ba4; }
.ava-cap { text-align: center; color: #949ba4; font-size: 12px; margin: 8px 0 4px; }
.edit-modal .pref { margin: 16px 0 8px; background: #232428; border-radius: 8px; padding: 10px 12px; }
.edit-modal .hint { color: #949ba4; font-size: 12px; margin: 8px 0 16px; }
.edit-modal .prompt-actions button {
  width: auto; flex: 1; padding: 10px 8px; border: none; border-radius: 8px;
  font-weight: 600; cursor: pointer; color: #fff;
}
.edit-modal #srvSave, .edit-modal #chanSave { background: #5865f2; }
.danger-btn { background: #da373c !important; }
.edit-modal .ghost { background: #4e5058 !important; }
#camBtn.sharing { background: #23a559; color: #fff; }
#screenVolMenu {
  position: fixed; z-index: 80; background: #111214; border: 1px solid #3f4147;
  border-radius: 8px; padding: 10px 12px; width: 200px; color: #dbdee1; font-size: 13px;
}
#screenVolMenu.hidden { display: none; }
#screenVolMenu input { width: 100%; margin: 8px 0 4px; }
#screenAudio { display: none; }

/* ===== UX polish 2026 ===== */
.login-wrap {
  display: flex; gap: 48px; align-items: center; justify-content: center;
  flex-wrap: wrap; max-width: 960px; padding: 24px;
}
.login-hero { max-width: 360px; color: #fff; }
.login-badge {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  background: rgba(88,101,242,.25); border: 1px solid rgba(88,101,242,.45);
  font-weight: 800; letter-spacing: 2px; font-size: 13px; margin-bottom: 16px;
}
.login-hero h1 {
  font-size: 34px; line-height: 1.15; margin: 0 0 12px; letter-spacing: -.4px;
}
.login-hero > p { color: #c6c8ce; margin-bottom: 20px; line-height: 1.45; }
.login-features { list-style: none; display: grid; gap: 10px; }
.login-features li {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px; padding: 10px 12px; color: #e3e5e8; font-size: 14px;
}
.login-features span { font-size: 16px; }
#login {
  background:
    radial-gradient(900px 500px at 15% 20%, rgba(88,101,242,.35), transparent 55%),
    radial-gradient(700px 400px at 90% 80%, rgba(35,165,89,.18), transparent 50%),
    linear-gradient(160deg, #0f1115, #1e1f22 45%, #2b2d31);
}
.login-card {
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.field-lab {
  display: block; font-size: 12px; font-weight: 700; color: #b5bac1;
  margin: 0 0 6px; text-transform: uppercase; letter-spacing: .3px;
}
.field-lab .opt { font-weight: 500; text-transform: none; color: #6d6f78; }
.login-card input {
  margin-bottom: 14px; border-radius: 8px;
  border: 1px solid transparent; transition: border-color .15s, box-shadow .15s;
}
.login-card input:focus {
  outline: none; border-color: #5865f2;
  box-shadow: 0 0 0 3px rgba(88,101,242,.25);
}
.login-card button {
  border-radius: 8px; margin-top: 4px;
  transition: transform .12s ease, filter .12s ease;
}
.login-card button:hover { transform: translateY(-1px); }
.ghost-btn {
  width: 100%; margin-top: 10px; background: transparent !important;
  border: 1px solid #3f4147 !important; color: #dbdee1 !important;
  border-radius: 8px; padding: 11px; cursor: pointer; font-weight: 600;
}
.ghost-btn:hover { background: #3f4147 !important; }

#welcomeModal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.62); display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
#welcomeModal.hidden { display: none !important; }
.welcome-card {
  width: min(480px, 96vw); background: #2b2d31; border: 1px solid #3f4147;
  border-radius: 16px; padding: 24px; box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.welcome-kicker {
  color: #23a559; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
}
.welcome-card h2 { margin: 6px 0 16px; font-size: 22px; }
.welcome-steps { display: grid; gap: 12px; margin-bottom: 18px; }
.wstep {
  display: flex; gap: 12px; align-items: flex-start;
  background: #1e1f22; border-radius: 10px; padding: 12px;
}
.wstep b {
  width: 28px; height: 28px; border-radius: 8px; background: #5865f2; color: #fff;
  display: grid; place-items: center; flex: 0 0 28px; font-size: 13px;
}
.wstep strong { display: block; margin-bottom: 2px; }
.wstep span { color: #949ba4; font-size: 13px; line-height: 1.35; }
.welcome-ok {
  width: 100%; border: none; border-radius: 10px; padding: 12px;
  background: #5865f2; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
}
.welcome-ok:hover { filter: brightness(1.08); }

.ch-head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-topic {
  font-size: 12px; color: #949ba4; font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#channelHeader {
  gap: 10px;
}
#channelTitle { font-weight: 700; }

.empty-chat {
  margin: auto; max-width: 420px; text-align: center; padding: 48px 20px;
  color: #dbdee1;
}
.empty-ico {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 18px;
  background: linear-gradient(135deg, #404249, #2b2d31);
  display: grid; place-items: center; font-size: 28px; font-weight: 800; color: #949ba4;
  border: 1px solid #3f4147;
}
.empty-chat h3 { margin: 0 0 8px; font-size: 20px; }
.empty-chat p { color: #949ba4; line-height: 1.45; margin-bottom: 16px; font-size: 14px; }
.empty-tips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.empty-tips span {
  background: #2b2d31; border: 1px solid #3f4147; color: #b5bac1;
  border-radius: 999px; padding: 6px 10px; font-size: 12px;
}

#messages { scroll-behavior: smooth; }
.msg {
  transition: background .12s ease;
  border-radius: 8px;
}
.msg:hover { background: rgba(0,0,0,.12); }
.msg .msg-actions {
  opacity: 0; transition: opacity .12s ease;
}
.msg:hover .msg-actions { opacity: 1; }

#msgForm {
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
  transition: box-shadow .15s ease;
}
#msgForm:focus-within {
  box-shadow: 0 0 0 2px rgba(88,101,242,.35);
}
#sendBtn {
  transition: color .12s ease, background .12s ease, transform .12s ease;
}
#sendBtn:hover { transform: scale(1.05); }

.invite-banner {
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.invite-banner:hover { transform: translateY(-1px); }

.ch {
  transition: background .12s ease, color .12s ease;
}
.server-icon {
  transition: border-radius .15s, background .15s, transform .12s ease;
}
.server-icon:hover { transform: translateY(-1px); }

.toast {
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

#netBar {
  background: #f0b232; color: #111; text-align: center; padding: 8px;
  font-weight: 700; font-size: 13px;
}

.seo-foot {
  position: static;
  width: 100%;
  max-width: 560px;
  flex: 0 0 auto;
  text-align: center;
  font-size: 12px;
  color: #8b8d97;
  padding: 16px 16px 4px;
  line-height: 1.45;
}
.seo-foot p { margin: 0; }
.seo-foot a { color: #c5c8d4; }
#login { position: relative; }
@media (max-width: 860px) {
  .login-hero { display: none; }
  .login-card { width: min(420px, 100%); }
  .login-wrap { padding: 8px 0 12px; gap: 0; }
  .seo-foot { font-size: 11px; padding: 8px 12px 4px; }
  #captchaRow { overflow: hidden; }
  #gRecaptchaWrap { transform: scale(.92); transform-origin: left top; }
}


/* ===== Main design refresh ===== */
html, body {
  font-family: "gg sans", "Segoe UI", Inter, system-ui, sans-serif;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

.servers {
  background: #1e1f22;
  border-right: 1px solid rgba(0,0,0,.25);
}
.server-icon {
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.server-icon.active {
  background: var(--accent);
  box-shadow: 0 6px 16px rgba(88,101,242,.35);
}
.server-sep {
  background: #35363c;
  border-radius: 2px;
}

.channels {
  background: #2b2d31;
  border-right: 1px solid rgba(0,0,0,.15);
}
.server-title {
  height: 48px;
  padding: 0 12px 0 16px;
  background: rgba(43,45,49,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0,0,0,.25);
  box-shadow: 0 1px 0 rgba(255,255,255,.02);
}
.server-title span {
  font-size: 15px;
  letter-spacing: -.1px;
}
.section {
  padding: 16px 16px 6px;
  color: #949ba4;
  font-size: 11px;
  letter-spacing: .5px;
}
.ch {
  margin: 1px 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 15px;
  gap: 8px;
}
.ch .hash {
  width: 18px;
  text-align: center;
  color: #80848e;
  font-size: 18px;
  line-height: 1;
}
.ch.active {
  background: #404249;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.ch.active .hash { color: #fff; }
.ch:hover { background: #35373c; }

.invite-banner {
  border-radius: 6px;
  background: rgba(35,165,89,.12);
  border: 1px solid rgba(35,165,89,.18);
}
.invite-banner:hover {
  background: #23a559;
  border-color: #23a559;
  color: #fff;
}

.user-bar {
  background: #232428;
  border-top: 1px solid rgba(0,0,0,.25);
  padding: 8px;
  gap: 10px;
  min-height: 56px;
}
.user-bar img {
  width: 34px;
  height: 34px;
  box-shadow: 0 0 0 2px #232428;
}
.user-actions button {
  border-radius: 6px;
  transition: background .12s ease, color .12s ease, transform .1s ease;
}
.user-actions button:hover {
  background: #3f4248;
  transform: translateY(-1px);
}
.user-actions button.muted {
  background: rgba(242,63,67,.12);
}

main {
  background: #313338;
}
#channelHeader {
  height: 48px;
  padding: 0 16px;
  background: rgba(49,51,56,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0,0,0,.28);
  box-shadow: 0 1px 0 rgba(255,255,255,.02);
  z-index: 2;
}
#channelTitle {
  flex: initial;
  font-size: 16px;
  letter-spacing: -.2px;
}
.ch-topic {
  max-width: 70vw;
}

#messages {
  padding: 12px 0 12px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), transparent 40px),
    #313338;
}
.msg {
  gap: 14px;
  padding: 8px 16px;
  margin: 0 4px;
  border-radius: 8px;
}
.msg:hover {
  background: rgba(0,0,0,.14);
}
.msg img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}
.msg .meta {
  font-size: 15px;
  font-weight: 600;
}
.msg .body {
  font-size: 15px;
  line-height: 1.45;
  color: #dbdee1;
}
.msg-actions {
  top: -12px;
  right: 12px;
  border-radius: 8px;
  padding: 3px;
  background: #2b2d31;
  border: 1px solid #3f4147;
  box-shadow: var(--elev);
}
.msg-actions button {
  border-radius: 6px;
  padding: 5px 8px;
}
.sys {
  margin: 10px 24px;
  padding: 4px 0;
  position: relative;
  color: #949ba4;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
}
.sys::before,
.sys::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 36%;
  height: 1px;
  background: #3f4147;
}
.sys::before { left: 0; }
.sys::after { right: 0; }

.link-card {
  border-radius: 8px;
  border-left-width: 4px;
  background: #2b2d31;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.msg-img img {
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  max-width: min(480px, 100%);
}
.mention {
  border-radius: 4px;
  padding: 0 4px;
}

#msgForm {
  margin: 0 16px 20px;
  background: #383a40;
  border-radius: 10px;
  border: 1px solid transparent;
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
}
#msgForm:focus-within {
  border-color: rgba(88,101,242,.45);
  box-shadow: 0 0 0 3px rgba(88,101,242,.18);
}
#msgInput {
  padding: 12px 8px 12px 4px;
  font-size: 15px;
}
.attach-btn {
  width: 44px;
  height: 44px;
  color: #b5bac1;
  border-radius: 10px 0 0 10px;
  transition: color .12s ease, background .12s ease;
}
.attach-btn:hover {
  color: #fff;
  background: rgba(255,255,255,.04);
}
#sendBtn {
  width: 44px;
  height: 44px;
  color: #b5bac1;
  border-radius: 0 10px 10px 0;
}
#sendBtn:hover {
  color: #fff;
  background: rgba(88,101,242,.25);
}

#voiceBar {
  background: linear-gradient(180deg, #1f2226, #1a1c1f);
  border: 1px solid rgba(59,165,93,.45);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  border-radius: 10px;
}
.vconn { letter-spacing: .2px; }
.voice-controls button {
  border-radius: 6px !important;
}
#leaveVoiceBtn {
  border-radius: 8px !important;
}

.members {
  background: #2b2d31;
  border-left: 1px solid rgba(0,0,0,.2);
}
.members-head {
  background: rgba(43,45,49,.95);
  backdrop-filter: blur(6px);
}
.member {
  border-radius: 6px;
  padding: 7px 8px;
}
.member:hover {
  background: #35373c;
}
.member.voice .mname {
  color: #3ba55d;
}

#userMenu {
  border-radius: 12px;
  border: 1px solid #3a3c42;
  box-shadow: var(--elev);
  overflow: hidden;
}
.settings-card {
  border-radius: 14px !important;
  border: 1px solid #3a3c42;
  box-shadow: var(--elev);
}

#typingLine {
  color: #b5bac1;
  font-size: 12px;
  min-height: 16px;
  padding: 0 20px 6px;
}

.react-b {
  border-radius: 999px;
  transition: transform .1s ease, background .12s ease;
}
.react-b:hover {
  transform: translateY(-1px);
  background: #35373c;
}

#attachPreview {
  margin: 0 16px 8px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #3f4147;
  background: #2b2d31;
}

.empty-chat {
  animation: fadeUp .35s ease;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  #msgForm { margin: 0 10px 14px; }
  .msg { padding: 8px 10px; gap: 10px; }
}

/* ===== Premium theme pass ===== */
html, body {
  background: var(--bg);
  color: var(--text);
}

#app {
  background:
    radial-gradient(900px 500px at 20% -10%, rgba(124,108,255,.12), transparent 55%),
    radial-gradient(700px 400px at 100% 100%, rgba(45,212,160,.06), transparent 50%),
    var(--bg);
}

.servers {
  background: linear-gradient(180deg, #0b0c12, #0f1018);
  border-right: 1px solid rgba(255,255,255,.04);
  width: 76px;
}
.server-icon {
  background: #1c1e2a;
  color: #c9cce0;
  transition: border-radius .18s ease, background .18s ease, transform .15s ease, box-shadow .18s ease;
}
.server-icon:hover {
  background: #2a2d3d;
  transform: translateY(-2px);
}
.server-icon.active,
.server-icon.home-ico {
  background: linear-gradient(135deg, #7c6cff, #5b8cff);
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(124,108,255,.4);
}
.server-icon.add {
  background: #161824;
  color: var(--green);
  border: 1px dashed rgba(45,212,160,.35);
}
.server-icon.add:hover {
  background: var(--green);
  color: #062016;
  border-style: solid;
}
.server-icon.has-voice {
  box-shadow: 0 0 0 2px var(--green), 0 0 16px rgba(45,212,160,.35);
}
.server-icon::before {
  background: linear-gradient(180deg, #fff, #c4c8ff);
  left: -14px;
}
.server-sep {
  background: linear-gradient(90deg, transparent, #2c3042, transparent);
  width: 36px;
}

.channels {
  background: linear-gradient(180deg, #12131a, #14151c);
  border-right: 1px solid rgba(255,255,255,.04);
  width: 248px;
}
.server-title {
  background: rgba(18,19,26,.9);
  border-bottom: 1px solid rgba(255,255,255,.05);
  height: 52px;
}
.server-title span {
  font-size: 15px;
  font-weight: 750;
  background: linear-gradient(90deg, #fff, #c9cfff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.invite-banner {
  background: linear-gradient(135deg, rgba(45,212,160,.12), rgba(124,108,255,.1));
  border: 1px solid rgba(45,212,160,.25);
  color: #5eefc0;
  border-radius: 10px;
  font-weight: 700;
}
.invite-banner:hover {
  background: linear-gradient(135deg, #2dd4a0, #22b88a);
  color: #04150f;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(45,212,160,.25);
}
.section {
  color: #8b91a8;
  letter-spacing: .6px;
}
.ch {
  border-radius: 8px;
  color: #9aa0b4;
}
.ch:hover {
  background: rgba(255,255,255,.04);
  color: #e8eaf3;
}
.ch.active {
  background: linear-gradient(90deg, rgba(124,108,255,.22), rgba(124,108,255,.08));
  color: #fff;
  box-shadow: inset 3px 0 0 #7c6cff;
}
.ch.active .hash { color: #cfc8ff; }
.ch .hash { color: #6f7690; }

.user-bar {
  background: linear-gradient(180deg, #161822, #12131a);
  border-top: 1px solid rgba(255,255,255,.05);
  min-height: 58px;
}
.user-bar img {
  box-shadow: 0 0 0 2px #12131a, 0 0 0 3px rgba(124,108,255,.35);
}
.ustatus { color: var(--green); font-weight: 600; }
.user-actions button {
  color: #a7adc4;
  border-radius: 8px;
}
.user-actions button:hover {
  background: rgba(124,108,255,.15);
  color: #fff;
}
.user-actions button.muted {
  color: var(--danger);
  background: rgba(255,92,122,.12);
}

main {
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(124,108,255,.08), transparent 60%),
    linear-gradient(180deg, #1c1d28 0%, #1a1b23 40%, #181922 100%);
}
#channelHeader {
  height: 52px;
  background: rgba(22,24,34,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
#channelTitle {
  font-weight: 750;
  letter-spacing: -.2px;
}
.ch-topic { color: #8b91a8; }

#messages {
  background: transparent;
  padding: 16px 0 10px;
}
.msg {
  border-radius: 10px;
  margin: 1px 8px;
  padding: 10px 14px;
}
.msg:hover {
  background: rgba(255,255,255,.035);
}
.msg img {
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}
.msg .meta { color: #f4f5fb; font-weight: 650; }
.msg .time { color: #7f869d; }
.msg .body { color: #d5d8e6; line-height: 1.5; }
.msg-actions {
  background: #1a1c28;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  box-shadow: var(--elev);
}
.msg-actions button:hover {
  background: rgba(124,108,255,.2);
  color: #fff;
}
.sys {
  color: #8b91a8;
}
.sys::before, .sys::after {
  background: linear-gradient(90deg, transparent, #34384c, transparent);
}
.mention {
  background: rgba(124,108,255,.22);
  color: #d7d2ff;
}
.mention.me {
  background: rgba(124,108,255,.55);
  color: #fff;
}
.chat-link { color: #8eb6ff; }
.link-card {
  background: #161822;
  border-left-color: #7c6cff;
  border-radius: 10px;
}
.msg-img img {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

#msgForm {
  margin: 0 18px 22px;
  background: #222433;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
#msgForm:focus-within {
  border-color: rgba(124,108,255,.55);
  box-shadow: 0 0 0 3px rgba(124,108,255,.18), 0 12px 28px rgba(0,0,0,.28);
}
#msgInput {
  color: #eef0f7;
  font-size: 15px;
}
#msgInput::placeholder { color: #6f7690; }
.attach-btn:hover, #sendBtn:hover {
  background: rgba(124,108,255,.18);
  color: #fff;
}
#sendBtn:hover {
  color: #d9d4ff;
}

#voiceBar {
  background: linear-gradient(160deg, #14241f, #121820);
  border: 1px solid rgba(45,212,160,.4);
  box-shadow: 0 10px 28px rgba(0,0,0,.4), 0 0 20px rgba(45,212,160,.12);
  border-radius: 12px;
}
.vconn { color: var(--green); }
#leaveVoiceBtn {
  background: linear-gradient(135deg, #ff5c7a, #e23d5c) !important;
}

.members {
  background: linear-gradient(180deg, #12131a, #14151c);
  border-left: 1px solid rgba(255,255,255,.04);
}
.members-head {
  background: rgba(18,19,26,.92);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.members-title { color: #8b91a8; }
.members-title span { color: #e8eaf3; }
.invite-people-btn {
  background: rgba(45,212,160,.12);
  color: #5eefc0;
}
.invite-people-btn:hover {
  background: var(--green);
  color: #04150f;
}
.mgroup { color: #8b91a8; }
.member {
  border-radius: 8px;
}
.member:hover {
  background: rgba(255,255,255,.04);
}
.member.voice .mname { color: var(--green); }
.member.voice .mstatus { color: #6fe8c0; }
.mav .pdot {
  box-shadow: 0 0 0 3px #14151c;
}
.pdot { background: var(--green); }
.pdot.dnd { background: var(--danger); }
.pdot.offline { background: #5c637a; }

#userMenu, .settings-card, .invite-card {
  background: #161822 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: var(--elev) !important;
  border-radius: 14px !important;
}
.settings-card button,
#inviteCopy,
.invite-copy {
  border-radius: 8px !important;
}

.toast {
  background: #161822;
  border: 1px solid rgba(124,108,255,.25);
  box-shadow: var(--elev);
}

#login {
  background:
    radial-gradient(1000px 600px at 10% 0%, rgba(124,108,255,.35), transparent 50%),
    radial-gradient(800px 500px at 100% 100%, rgba(45,212,160,.18), transparent 45%),
    linear-gradient(160deg, #07080d, #12131a 50%, #0d1020);
}
.login-card {
  background: rgba(20,21,30,.92);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.login-card button {
  background: linear-gradient(135deg, #7c6cff, #5b8cff);
  box-shadow: 0 8px 20px rgba(124,108,255,.35);
}
.login-features li {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.06);
}

.welcome-card {
  background: #161822;
  border: 1px solid rgba(255,255,255,.08);
}
.welcome-ok {
  background: linear-gradient(135deg, #7c6cff, #5b8cff);
  box-shadow: 0 8px 22px rgba(124,108,255,.3);
}
.wstep b {
  background: linear-gradient(135deg, #7c6cff, #5b8cff);
}

.empty-ico {
  background: linear-gradient(135deg, #2a2d40, #1c1e2a);
  border-color: rgba(124,108,255,.25);
  color: #b7b3ff;
  box-shadow: var(--glow);
}
.empty-tips span {
  background: #1a1c28;
  border-color: rgba(255,255,255,.06);
}

.react-b {
  background: #1a1c28;
  border-color: rgba(255,255,255,.08);
}
.react-b:hover {
  background: rgba(124,108,255,.15);
}

#voiceBar .share-text {
  background: rgba(255,255,255,.06) !important;
  color: #e8eaf3 !important;
  border: 1px solid rgba(255,255,255,.06);
}
#voiceBar .share-text:hover {
  background: rgba(124,108,255,.2) !important;
}

::-webkit-scrollbar-thumb {
  background-color: #2a2d3c;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #3a3e55;
}
* { scrollbar-color: #2a2d3c transparent; }

/* ===== Buttons system ===== */
button, .attach-btn, .icon-btn, .vbtn, .add-ch, .nav-btn {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.icon-btn {
  width: 34px !important;
  height: 34px !important;
  border: none;
  border-radius: 10px !important;
  background: rgba(255,255,255,.04) !important;
  color: #c5c9db !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease !important;
}
.icon-btn:hover {
  background: rgba(124,108,255,.2) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.icon-btn:active { transform: translateY(0) scale(.96); }
.icon-btn.muted,
.user-actions button.muted {
  background: rgba(255,92,122,.16) !important;
  color: #ff7a92 !important;
  box-shadow: inset 0 0 0 1px rgba(255,92,122,.35);
}
.icon-btn .ico { font-size: 15px; line-height: 1; }

.add-ch {
  width: 24px;
  height: 24px;
  border-radius: 6px !important;
  background: rgba(255,255,255,.04) !important;
  color: #9aa0b4 !important;
  font-size: 14px !important;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.add-ch:hover {
  background: rgba(124,108,255,.25) !important;
  color: #fff !important;
  transform: scale(1.06);
}

.ch-gear {
  width: 26px;
  height: 26px;
  border-radius: 6px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, color .12s ease, opacity .12s ease;
}
.ch-gear:hover {
  background: rgba(255,255,255,.08);
  color: #fff !important;
}

#muteSrvBtn {
  width: 32px;
  height: 32px;
  border-radius: 8px !important;
  background: rgba(255,255,255,.04);
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
#muteSrvBtn:hover {
  background: rgba(124,108,255,.2);
  color: #fff;
  transform: translateY(-1px);
}

.invite-banner {
  min-height: 36px;
  letter-spacing: .2px;
}
.invite-people-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  font-size: 18px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.invite-people-btn:hover {
  transform: scale(1.08);
}

.vbtn {
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.06) !important;
  color: #e8eaf3 !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease !important;
}
.vbtn:hover {
  background: rgba(124,108,255,.22) !important;
  border-color: rgba(124,108,255,.35) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.vbtn.leave,
#leaveVoiceBtn.vbtn,
#leaveVoiceBtn {
  background: linear-gradient(135deg, #ff5c7a, #e23d5c) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 800 !important;
  margin-left: auto !important;
}
.vbtn.leave:hover,
#leaveVoiceBtn:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 16px rgba(255,92,122,.35);
}

.attach-btn {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px 0 0 14px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #a7adc4 !important;
  background: transparent !important;
  transition: color .15s ease, background .15s ease !important;
}
.attach-btn:hover {
  color: #fff !important;
  background: rgba(124,108,255,.15) !important;
}
.attach-plus {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

#sendBtn {
  width: 48px !important;
  height: 46px !important;
  border: none;
  border-radius: 0 14px 14px 0 !important;
  background: transparent;
  color: #8b91a8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s ease, background .15s ease, transform .12s ease;
}
#sendBtn:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(124,108,255,.35), rgba(91,140,255,.25));
}
#sendBtn:hover .send-ico {
  transform: translateX(2px);
}
.send-ico {
  font-size: 16px;
  display: inline-block;
  transition: transform .15s ease;
}

.nav-btn {
  border-radius: 10px !important;
  background: rgba(255,255,255,.06) !important;
  transition: background .15s ease, transform .12s ease !important;
}
.nav-btn:hover {
  background: rgba(124,108,255,.25) !important;
  transform: translateY(-1px);
}

.watch-btn {
  border-radius: 999px !important;
  padding: 3px 8px !important;
  font-weight: 700;
  transition: transform .12s ease, filter .12s ease;
}
.watch-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

#userMenu button,
.settings-card button:not(.ghost),
.login-card button:not(.ghost-btn),
.welcome-ok {
  transition: transform .12s ease, filter .12s ease, box-shadow .15s ease !important;
}
#userMenu button:hover,
.settings-card button:not(.ghost):hover,
.login-card button:not(.ghost-btn):hover,
.welcome-ok:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.ghost,
.ghost-btn,
.settings-card .ghost {
  transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}
.ghost:hover,
.settings-card .ghost:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

.hide-off {
  padding: 4px 6px;
  border-radius: 6px;
  transition: background .12s ease;
}
.hide-off:hover {
  background: rgba(255,255,255,.04);
}

.server-icon.add {
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease !important;
}
.server-icon.add:hover {
  transform: translateY(-2px) scale(1.04);
}

.msg-actions button {
  border-radius: 8px !important;
  min-width: 28px;
  transition: background .12s ease, color .12s ease, transform .1s ease;
}
.msg-actions button:hover {
  transform: translateY(-1px);
}

.react-b {
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.react-b:hover {
  transform: translateY(-1px) scale(1.04);
  border-color: rgba(124,108,255,.4);
}

#friendAddBtn,
.add-friend-row button {
  border-radius: 8px !important;
  background: linear-gradient(135deg, #7c6cff, #5b8cff) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease !important;
}
#friendAddBtn:hover,
.add-friend-row button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(124,108,255,.35);
}

/* ===== User card + modals polish ===== */
#userMenu {
  width: 280px;
  padding: 0;
  background: #161822;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  z-index: 60;
}
.up-banner {
  height: 72px;
  background: linear-gradient(135deg, #7c6cff, #5b8cff 45%, #2dd4a0);
}
.up-head {
  display: flex;
  gap: 12px;
  padding: 0 14px 12px;
  margin-top: -28px;
  align-items: flex-end;
}
.up-ava {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #161822;
  background: #1c1e2a;
  flex: 0 0 64px;
}
.up-id { min-width: 0; padding-bottom: 2px; }
.user-menu-name {
  font-size: 17px;
  font-weight: 750;
  color: #f2f3f5;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.up-status {
  font-size: 12px;
  color: #9aa0b4;
  margin-top: 2px;
}
.up-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(45,212,160,.15);
  color: #5eefc0;
  font-size: 11px;
  font-weight: 700;
}
.up-about {
  margin: 0 14px 10px;
  padding: 10px 12px;
  background: #12141c;
  border-radius: 10px;
  color: #c5c9db;
  font-size: 13px;
  line-height: 1.4;
}
.up-vol {
  padding: 0 14px 12px;
}
.up-vol label {
  display: block;
  font-size: 12px;
  color: #9aa0b4;
  margin-bottom: 6px;
}
.up-vol input[type="range"] {
  width: 100%;
  accent-color: #7c6cff;
}
.up-actions {
  display: grid;
  gap: 6px;
  padding: 0 12px 12px;
}
.up-actions button {
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.up-primary {
  background: linear-gradient(135deg, #7c6cff, #5b8cff);
  color: #fff;
  box-shadow: 0 6px 16px rgba(124,108,255,.3);
}
.up-sec {
  background: rgba(255,255,255,.06);
  color: #e8eaf3;
}
.up-sec.is-friend {
  background: rgba(45,212,160,.12);
  color: #5eefc0;
  cursor: default;
}
.up-sec:disabled {
  opacity: .9;
}
.up-danger {
  background: rgba(255,92,122,.1);
  color: #ff8fa3;
}
.up-actions button:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

#profileModal,
#chanModal,
#srvModal,
#inviteModal,
#promptModal,
#permModal,
#settingsModal {
  backdrop-filter: blur(6px);
  background: rgba(6,8,14,.62) !important;
}
.settings-card,
.edit-modal,
.profile-card,
.invite-card {
  background: #161822 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.55) !important;
  color: #e8eaf3;
}
.settings-title {
  font-size: 18px !important;
  font-weight: 750 !important;
  letter-spacing: -.2px;
  margin-bottom: 14px !important;
}
.settings-card label.fld,
.settings-card > label:not(.pref):not(.ava-upload) {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .35px;
  color: #9aa0b4;
  margin: 12px 0 6px;
}
.settings-card input[type="text"],
.settings-card input[type="number"],
.settings-card input[type="password"],
.settings-card input[type="email"],
.settings-card input:not([type="checkbox"]):not([type="range"]):not([type="color"]):not([type="file"]),
.settings-card select,
.settings-card textarea {
  width: 100%;
  background: #12141c !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 10px !important;
  color: #eef0f7 !important;
  padding: 11px 12px !important;
  margin-bottom: 4px !important;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.settings-card input:focus,
.settings-card select:focus {
  border-color: rgba(124,108,255,.5) !important;
  box-shadow: 0 0 0 3px rgba(124,108,255,.15);
}
.pref {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  margin: 8px 0 !important;
  background: #12141c;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.04);
}
.pref b { display: block; color: #eef0f7; font-size: 14px; }
.pref small { color: #9aa0b4; font-size: 12px; }
.pref input[type="checkbox"] {
  width: 42px !important;
  height: 24px !important;
  appearance: none;
  background: #3a3e55;
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background .15s ease;
  margin: 0 !important;
  flex: 0 0 42px;
}
.pref input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
}
.pref input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #7c6cff, #2dd4a0);
}
.pref input[type="checkbox"]:checked::after {
  transform: translateX(18px);
}
.prompt-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.prompt-actions button {
  flex: 1;
  min-width: 100px;
  border: none;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-weight: 700 !important;
  cursor: pointer;
}
.prompt-actions button:not(.ghost):not(.danger-btn) {
  background: linear-gradient(135deg, #7c6cff, #5b8cff) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(124,108,255,.3);
}
.prompt-actions .ghost {
  background: rgba(255,255,255,.06) !important;
  color: #e8eaf3 !important;
}
.prompt-actions .danger-btn,
#chanDel {
  background: rgba(255,92,122,.16) !important;
  color: #ff8fa3 !important;
}
.ava-upload {
  width: 88px;
  height: 88px;
  margin: 8px auto 6px;
  border-radius: 18px;
  border: 2px dashed rgba(124,108,255,.35);
  background: #12141c;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color .15s ease, transform .12s ease;
}
.ava-upload:hover {
  border-color: #7c6cff;
  transform: translateY(-1px);
}
.ava-upload img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.ava-plus {
  color: #9aa0b4;
  font-size: 28px;
}
.ava-cap {
  text-align: center;
  color: #9aa0b4;
  font-size: 12px;
  margin-bottom: 8px;
}
.fld-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#friendsView {
  background:
    radial-gradient(700px 300px at 30% 0%, rgba(124,108,255,.08), transparent 55%),
    #1a1b23;
}
.friends-head {
  height: 52px;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.2px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  background: rgba(22,24,34,.8);
  backdrop-filter: blur(8px);
}
.friends-col .section {
  color: #8b91a8;
  margin-top: 8px;
}
.friend-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 12px;
  margin: 4px 0;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.02);
  transition: background .12s ease, border-color .12s ease;
}
.friend-row:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.05);
}
.friend-row button {
  background: rgba(255,92,122,.12) !important;
  color: #ff8fa3 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-weight: 700;
  cursor: pointer;
}
.add-friend-row {
  display: flex;
  gap: 8px;
  padding: 10px 0 16px;
}
.add-friend-row input {
  flex: 1;
  background: #12141c !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 10px !important;
  color: #fff !important;
  padding: 11px 12px !important;
}
.empty-f {
  color: #8b91a8;
  padding: 12px;
  background: rgba(255,255,255,.02);
  border-radius: 10px;
  margin: 6px 0 12px;
}

.home-link {
  border-radius: 8px;
  margin: 4px 8px;
  padding: 10px 12px;
  transition: background .12s ease;
}
.home-link.active {
  background: linear-gradient(90deg, rgba(124,108,255,.22), rgba(124,108,255,.08));
  box-shadow: inset 3px 0 0 #7c6cff;
}
.dm-search {
  background: #12141c !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 10px !important;
}

.profile-card .profile-top,
.profile-card > div:first-child {
  margin-bottom: 8px;
}

/* Friend requests */
.friend-row.req {
  border-color: rgba(124,108,255,.25);
  background: rgba(124,108,255,.08);
}
.friend-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.friend-meta strong {
  color: #eef0f7;
  font-size: 14px;
}
.friend-acts {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.friend-acts button {
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-weight: 700 !important;
  cursor: pointer;
  font-size: 12px !important;
}
.friend-acts .f-ok {
  background: linear-gradient(135deg, #2dd4a0, #22b88a) !important;
  color: #04150f !important;
  box-shadow: 0 4px 12px rgba(45,212,160,.3);
}
.friend-acts .f-ok:hover { filter: brightness(1.08); }
.friend-acts .f-no,
.friend-acts .f-rm {
  background: rgba(255,255,255,.06) !important;
  color: #c5c9db !important;
}
.friend-acts .f-dm {
  background: linear-gradient(135deg, #7c6cff, #5b8cff) !important;
  color: #fff !important;
}
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 8px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ff5c7a;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  vertical-align: middle;
}
.home-ico .friend-badge,
.server-icon .friend-badge {
  top: -4px;
  right: -4px;
}

#toastStack {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  max-width: min(420px, 92vw);
}
#toastStack .toast {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0;
  pointer-events: auto;
}

.toast-friend {
  min-width: 280px;
  max-width: 360px;
  padding: 12px 14px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: auto !important;
}
.tf-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.tf-ava {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 36px;
}
.tf-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tf-text b {
  color: #fff;
  font-size: 14px;
}
.tf-text span {
  color: #b5bac1;
  font-size: 12px;
}
.tf-acts {
  display: flex;
  gap: 8px;
}
.tf-acts button {
  flex: 1;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.tf-ok {
  background: linear-gradient(135deg, #2dd4a0, #22b88a);
  color: #04150f;
}
.tf-no {
  background: rgba(255,255,255,.08);
  color: #e8eaf3;
}
.tf-ok:hover, .tf-no:hover { filter: brightness(1.08); }
.friend-acts .f-no {
  background: rgba(255,255,255,.08) !important;
  color: #c5c9db !important;
}
.friend-acts .f-deny,
.tf-deny {
  background: rgba(255,255,255,.06) !important;
  color: #c5c9db !important;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.friend-acts .f-no,
.tf-no {
  background: rgba(255,92,122,.14) !important;
  color: #ff8fa3 !important;
}

/* ===== Centering fixes (servers rail + attach) ===== */
.servers {
  width: 72px !important;
  align-items: center !important;
  padding: 12px 0 !important;
  gap: 8px !important;
}
#serverList {
  width: 100%;
  align-items: center !important;
  gap: 8px !important;
}
.server-icon {
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto !important;
  flex: 0 0 48px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 16px;
  text-align: center;
}
.server-icon.home-ico,
.server-icon.add {
  font-size: 22px !important;
  font-weight: 700;
  line-height: 1 !important;
}
.server-icon.add {
  padding: 0 !important;
}
.server-icon img {
  display: block;
  margin: 0 auto;
}
.server-sep {
  margin-left: auto !important;
  margin-right: auto !important;
}

#msgForm {
  display: flex !important;
  align-items: center !important;
  padding: 0 4px 0 0 !important;
}
.attach-btn {
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 44px !important;
  align-self: center !important;
}
.attach-plus {
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}
#msgInput {
  align-self: center !important;
  height: 44px !important;
  line-height: 44px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#sendBtn {
  height: 44px !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.send-ico {
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===== Hard center pass ===== */
aside.servers {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 12px 0 !important;
  gap: 8px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
aside.servers > .server-icon,
aside.servers > #serverList > .server-icon {
  box-sizing: border-box !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  place-content: center !important;
  line-height: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: center !important;
  overflow: visible !important;
}
aside.servers > .server-icon.home-ico {
  font-size: 18px !important;
  letter-spacing: 0 !important;
}
aside.servers > .server-icon.add {
  font-size: 26px !important;
  font-weight: 500 !important;
  line-height: 0 !important;
  /* optical vertical center for + and ↗ glyphs */
  padding-bottom: 1px !important;
}
aside.servers > .server-icon.add#joinServerBtn {
  font-size: 20px !important;
  padding-bottom: 0 !important;
}
aside.servers .server-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: inherit !important;
}
aside.servers .server-sep {
  width: 32px !important;
  height: 2px !important;
  margin: 4px 0 !important;
  align-self: center !important;
}
aside.servers .server-icon::before {
  left: 0 !important;
  transform: translateX(-10px) !important;
  margin: 0 !important;
}
#serverList {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
}

#msgForm {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 0 !important;
  gap: 0 !important;
}
#msgForm .attach-btn {
  box-sizing: border-box !important;
  width: 48px !important;
  height: 44px !important;
  min-width: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 48px !important;
  align-self: stretch !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
#msgForm .attach-plus {
  box-sizing: border-box !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid currentColor !important;
  display: grid !important;
  place-items: center !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  /* optical: + glyph sits slightly high in many fonts */
  transform: translateY(0.5px);
}
#msgForm #msgInput {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 10px 0 4px !important;
  margin: 0 !important;
  line-height: 44px !important;
  align-self: center !important;
}
#msgForm #sendBtn {
  width: 48px !important;
  height: 44px !important;
  min-width: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 48px !important;
  line-height: 0 !important;
}
#msgForm #sendBtn .send-ico {
  line-height: 1 !important;
  font-size: 16px !important;
  display: block !important;
  transform: translateX(1px);
}

/* ===== Geometric icons (true center) ===== */
.server-icon.add {
  font-size: 0 !important;
  line-height: 0 !important;
  color: var(--green, #2dd4a0) !important;
  border: 1.5px dashed rgba(45, 212, 160, 0.45) !important;
  background: #161824 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}
.server-icon.add:hover {
  background: var(--green, #2dd4a0) !important;
  color: #04150f !important;
  border-style: solid !important;
  border-color: transparent !important;
}

/* CSS plus: two bars */
.server-icon.add-plus::before,
.server-icon.add-plus::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  background: currentColor !important;
  border-radius: 1px !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  pointer-events: none !important;
}
.server-icon.add-plus::before {
  width: 16px !important;
  height: 2.5px !important;
}
.server-icon.add-plus::after {
  width: 2.5px !important;
  height: 16px !important;
  /* kill active-pill styles from .server-icon::before */
  border-radius: 1px !important;
}

/* join arrow via rotated bars */
.server-icon.add-join::before,
.server-icon.add-join::after {
  content: "" !important;
  position: absolute !important;
  background: currentColor !important;
  border-radius: 1px !important;
  opacity: 1 !important;
  margin: 0 !important;
  pointer-events: none !important;
  left: 50% !important;
  top: 50% !important;
}
.server-icon.add-join::before {
  width: 14px !important;
  height: 2.5px !important;
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}
.server-icon.add-join::after {
  width: 8px !important;
  height: 8px !important;
  border: 2.5px solid currentColor !important;
  border-left: none !important;
  border-bottom: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  transform: translate(-30%, -70%) rotate(45deg) !important;
}

/* attach: pure CSS plus in circle */
#msgForm .attach-plus {
  position: relative !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  border: 1.5px solid currentColor !important;
  background: transparent !important;
  display: block !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#msgForm .attach-plus::before,
#msgForm .attach-plus::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  background: currentColor !important;
  border-radius: 1px !important;
  transform: translate(-50%, -50%) !important;
}
#msgForm .attach-plus::before {
  width: 12px !important;
  height: 2px !important;
}
#msgForm .attach-plus::after {
  width: 2px !important;
  height: 12px !important;
}
#msgForm .attach-btn {
  display: grid !important;
  place-items: center !important;
}

/* ===== SVG icons in server rail / attach ===== */
.server-icon.add {
  font-size: 0 !important;
  color: var(--green, #2dd4a0) !important;
  border: 1.5px dashed rgba(45, 212, 160, 0.45) !important;
  background: #161824 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}
.server-icon.add:hover {
  background: var(--green, #2dd4a0) !important;
  color: #04150f !important;
  border-style: solid !important;
  border-color: transparent !important;
}
/* disable white activity pill on add buttons */
.server-icon.add::before,
.server-icon.add::after {
  content: none !important;
  display: none !important;
}
.server-icon .ico-svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 auto !important;
  flex-shrink: 0;
  pointer-events: none;
}

#msgForm .attach-plus {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1.5px solid currentColor !important;
  display: grid !important;
  place-items: center !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
#msgForm .attach-plus::before,
#msgForm .attach-plus::after {
  content: none !important;
  display: none !important;
}
#msgForm .attach-plus .ico-svg {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
}

/* ===== Settings sound modal spacing ===== */
#settingsModal .settings-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: min(90vh, 720px);
  overflow-y: auto;
  padding: 22px 22px 18px !important;
}
#settingsModal .settings-title {
  margin: 0 0 14px !important;
}
#settingsModal .settings-card > label {
  display: block !important;
  margin: 14px 0 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .35px;
  text-transform: uppercase;
  color: #9aa0b4 !important;
  line-height: 1.3 !important;
}
#settingsModal .settings-card > label:first-of-type {
  margin-top: 0 !important;
}
#settingsModal .settings-card select,
#settingsModal .settings-card input[type="range"] {
  width: 100% !important;
  margin: 0 0 4px !important;
  display: block !important;
}
#settingsModal .settings-card select {
  margin-bottom: 2px !important;
  padding: 11px 12px !important;
  border-radius: 10px !important;
  background: #12141c !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  color: #eef0f7 !important;
}
#settingsModal .settings-card .hint {
  margin: 6px 0 10px !important;
  line-height: 1.4 !important;
  position: static !important;
  color: #8b91a8 !important;
}
#settingsModal .meter {
  height: 12px !important;
  margin: 0 0 12px !important;
  background: #12141c !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  flex-shrink: 0;
}
#settingsModal #micMeter {
  height: 100% !important;
  min-height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2dd4a0, #7c6cff) !important;
}
#settingsModal #micTestBtn,
#settingsModal #settingsClose,
#settingsModal #logoutBtn {
  width: 100% !important;
  margin: 8px 0 0 !important;
  display: block !important;
  position: static !important;
  flex-shrink: 0;
}
#settingsModal #micTestHint {
  margin: 10px 0 4px !important;
}
#settingsModal #logoutBtn {
  margin-top: 12px !important;
}

/* Home / friends button */
.server-icon.home-ico {
  font-size: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
}
.server-icon.home-ico .home-svg,
.server-icon.home-ico .ico-svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  pointer-events: none;
}

/* ===== Voice bar redesign ===== */
#voiceBar {
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 62px !important;
  z-index: 40 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 10px 10px 8px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(45, 212, 160, 0.35) !important;
  background: linear-gradient(180deg, rgba(24, 40, 34, 0.98), rgba(18, 22, 28, 0.98)) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.35) !important;
  pointer-events: auto !important;
}
#voiceBar.hidden { display: none !important; }
#voiceBar .voice-info {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  min-width: 0;
}
#voiceBar .green-dot {
  width: 8px !important;
  height: 8px !important;
  margin: 5px 0 0 !important;
  border-radius: 50% !important;
  background: #2dd4a0 !important;
  box-shadow: 0 0 0 4px rgba(45, 212, 160, 0.18);
  flex: 0 0 8px;
}
#voiceBar .voice-meta {
  min-width: 0;
  flex: 1;
}
#voiceBar .vconn {
  color: #2dd4a0 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
  line-height: 1.2 !important;
}
#voiceBar .vconn.is-wait {
  color: #f0c14b !important;
}
#voiceBar.connecting .green-dot {
  background: #f0c14b !important;
  animation: pingPulse 0.9s ease-in-out infinite;
}
#voiceBar .voice-ch-name,
#voiceBar #voiceName {
  display: block !important;
  color: #eef0f7 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#voiceBar .voice-q,
#voiceBar #voiceQ {
  color: #8b91a8 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  margin-top: 2px;
  min-height: 0;
}
#voiceBar .voice-controls {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  align-items: stretch !important;
}
#voiceBar #leaveVoiceBtn,
#voiceBar .vbtn.leave {
  display: flex !important;
  width: 100% !important;
  grid-column: auto !important;
  min-height: 40px !important;
  min-width: 0 !important;
  margin: 0 !important;
  background: #f23f43 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 41 !important;
  cursor: pointer !important;
}
#voiceBar #leaveVoiceBtn:hover {
  background: #ff5a5f !important;
  color: #fff !important;
}
#voiceBar .vbtn {
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: none !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.06) !important;
  color: #e8eaf3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer;
  white-space: nowrap;
}
#voiceBar .vbtn .vico {
  font-size: 13px;
  line-height: 1;
}
#voiceBar .vbtn .vlbl {
  line-height: 1;
}
#voiceBar .vbtn:hover {
  background: rgba(255,255,255,.1) !important;
}
#voiceBar .vbtn.sharing,
#voiceBar .vbtn.on {
  background: rgba(45, 212, 160, 0.22) !important;
  color: #b8f5de !important;
}
#voiceBar #leaveVoiceBtn,
#voiceBar .vbtn.leave {
  grid-column: auto;
  background: #f23f43 !important;
  color: #fff !important;
  min-width: 0 !important;
  margin-left: 0 !important;
}
#voiceBar #leaveVoiceBtn:hover {
  background: rgba(242, 63, 67, 0.32) !important;
  color: #fff !important;
}
#voiceBar #resumeShareBtn.hidden { display: none !important; }

/* Server live indicator — clean, no 🔊 emoji */
.server-icon.has-voice {
  box-shadow: 0 0 0 2px #2dd4a0 !important;
}
.srv-spk { display: none !important; }
.srv-live {
  position: absolute !important;
  left: 50% !important;
  bottom: -7px !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  pointer-events: none;
  z-index: 3;
}
.srv-live img {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  border: 2px solid #0e1016 !important;
  margin-left: -4px !important;
  object-fit: cover;
  background: #313338;
}
.srv-live img:first-child { margin-left: 0 !important; }
.srv-live i {
  font-style: normal !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-left: 2px !important;
  background: #2dd4a0;
  border-radius: 6px;
  padding: 0 3px;
  line-height: 12px;
}

/* Home icon polish */
.server-icon.home-ico {
  background: linear-gradient(145deg, #7c6cff, #5b8cff) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 16px rgba(92, 108, 255, 0.28);
}
.server-icon.home-ico:hover {
  filter: brightness(1.06);
}

/* Voice slots badge: online/max */
.ch .slots {
  display: inline-flex !important;
  align-items: center !important;
  gap: 1px !important;
  margin-left: 6px !important;
  margin-right: auto !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: rgba(124, 108, 255, 0.14) !important;
  border: 1px solid rgba(124, 108, 255, 0.28) !important;
  color: #c5c9f0 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.2px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.ch .slots.busy {
  background: rgba(45, 212, 160, 0.12) !important;
  border-color: rgba(45, 212, 160, 0.35) !important;
  color: #9aefd0 !important;
}
.ch .slots.full {
  background: rgba(242, 63, 67, 0.14) !important;
  border-color: rgba(242, 63, 67, 0.4) !important;
  color: #ff9aa3 !important;
}
.ch .slots-sep {
  opacity: 0.65;
  margin: 0 1px;
}
.ch .slots-now {
  font-weight: 800;
}
.ch .slots-max {
  font-weight: 700;
  opacity: 0.9;
}
.ch[data-vid] {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.ch[data-vid] .ch-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch[data-vid] .ch-gear {
  margin-left: 4px !important;
  flex-shrink: 0;
}

/* Force circular live avatars on server rail */
.srv-live {
  overflow: visible !important;
}
.srv-live img {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  overflow: hidden !important;
  flex: 0 0 16px !important;
  box-sizing: border-box !important;
}
/* Server icon photo also circular when idle */
.server-icon > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}
.server-icon.active > img,
.server-icon:hover > img {
  border-radius: 16px !important;
}
.server-icon {
  overflow: hidden !important;
}
.server-icon.has-voice {
  overflow: visible !important;
}

/* ===== Live voice avatars on server: large circles ===== */
.server-icon.has-voice {
  overflow: visible !important;
  position: relative !important;
}
.srv-live {
  position: absolute !important;
  left: 50% !important;
  bottom: -10px !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  z-index: 6 !important;
  pointer-events: none !important;
  width: max-content !important;
  height: 22px !important;
}
.srv-live-ava {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid #0e1016 !important;
  background: #2b2d31 !important;
  display: block !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.srv-live-ava img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50% !important;
  display: block !important;
  margin: 0 !important;
  border: none !important;
}
.srv-live i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border-radius: 9px !important;
  background: #2dd4a0 !important;
  color: #04150f !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  font-style: normal !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* ===== Home button: clean house icon ===== */
.server-icon.home-ico {
  background: linear-gradient(145deg, #7c6cff 0%, #5b8cff 100%) !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  box-shadow: 0 8px 18px rgba(92, 108, 255, 0.32) !important;
  color: #fff !important;
  font-size: 0 !important;
}
.server-icon.home-ico:hover {
  filter: brightness(1.08);
  border-radius: 14px !important;
}
.server-icon.home-ico.active {
  border-radius: 14px !important;
}
.server-icon.home-ico .home-svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  margin: 0 !important;
  pointer-events: none;
}
.server-icon.home-ico::before {
  /* keep activity pill, but softer */
  background: #fff !important;
}

/* Friend request card — no text crush */
.friend-row.req {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  padding: 14px !important;
}
.friend-row.req .friend-meta {
  width: 100% !important;
  min-width: 0 !important;
}
.friend-row.req .friend-meta strong {
  display: block !important;
  font-size: 15px !important;
  margin-bottom: 4px !important;
}
.friend-row.req .friend-meta .hint {
  display: block !important;
  white-space: normal !important;
  line-height: 1.4 !important;
  color: #9aa0b4 !important;
  font-size: 13px !important;
  margin: 0 !important;
}
.friend-row.req .friend-acts {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  gap: 8px !important;
}
.friend-row.req .friend-acts button {
  flex: 1 1 auto !important;
  min-width: 96px !important;
  text-align: center !important;
  white-space: nowrap !important;
  padding: 10px 12px !important;
}

/* Regular friend rows also stack on narrow screens */
@media (max-width: 720px) {
  .friend-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .friend-row .friend-acts {
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  .friend-row .friend-acts button {
    flex: 1 1 auto !important;
  }
  .add-friend-row {
    flex-wrap: wrap !important;
  }
  .add-friend-row button {
    width: 100% !important;
  }
}

/* Mobile friends header: big menu button */
@media (max-width: 860px) {
  main.friends-on #navMenuBtn {
    display: inline-flex !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: rgba(124, 108, 255, 0.2) !important;
    color: #fff !important;
    font-size: 20px !important;
    flex-shrink: 0;
  }
  main.friends-on #channelTitle {
    font-size: 18px !important;
    font-weight: 800 !important;
  }
}

/* Inline message edit */
.inline-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  max-width: min(560px, 100%);
}
.inline-edit-ta {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid rgba(124,108,255,.35);
  background: #12141c;
  color: #eef0f7;
  padding: 10px 12px;
  font: inherit;
  line-height: 1.4;
  outline: none;
}
.inline-edit-ta:focus {
  border-color: rgba(124,108,255,.7);
  box-shadow: 0 0 0 3px rgba(124,108,255,.15);
}
.inline-edit-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.ie-save {
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  background: linear-gradient(135deg, #7c6cff, #5b8cff) !important;
  color: #fff !important;
  font-weight: 700 !important;
  cursor: pointer;
}
.ie-cancel {
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  background: rgba(255,255,255,.08) !important;
  color: #c5c9db !important;
  font-weight: 700 !important;
  cursor: pointer;
}
.ie-hint {
  font-size: 11px;
  color: #8b91a8;
}

/* Reaction picker */
.react-picker {
  position: fixed;
  z-index: 90;
  width: 280px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 10px;
  border-radius: 14px;
  background: #1a1d28;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.react-picker button {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  padding: 6px 4px;
  border-radius: 8px;
  cursor: pointer;
}
.react-picker button:hover {
  background: rgba(255,255,255,.08);
}

/* Pinned message */
.msg.is-pinned {
  background: rgba(124, 108, 255, 0.06);
  border-left: 3px solid #7c6cff;
  padding-left: 8px;
  border-radius: 0 10px 10px 0;
}
.msg.is-pinned::before {
  content: "📌 Закреплено";
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #a9a4ff;
  margin-bottom: 4px;
}

/* Voice cam button polish */
#voiceBar .vbtn .vsvg {
  display: block;
  flex-shrink: 0;
}
#voiceBar .vbtn {
  gap: 6px !important;
}
#camBtn.sharing {
  background: rgba(45, 212, 160, 0.22) !important;
  color: #b8f5de !important;
}

/* React picker — no overflow / cut-off */
.react-picker {
  position: fixed !important;
  z-index: 120 !important;
  width: min(320px, calc(100vw - 24px)) !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 2px !important;
  padding: 10px !important;
  border-radius: 14px !important;
  background: #1a1d28 !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.5) !important;
  overflow: hidden !important;
}
.react-picker button {
  width: 100% !important;
  aspect-ratio: 1 !important;
  border: none !important;
  background: transparent !important;
  font-size: 22px !important;
  line-height: 1 !important;
  padding: 0 !important;
  border-radius: 8px !important;
  cursor: pointer;
  display: grid !important;
  place-items: center !important;
}
.react-picker button:hover {
  background: rgba(255,255,255,.1) !important;
}

/* Voice buttons: icon + label spacing */
#voiceBar .vbtn {
  gap: 8px !important;
  padding: 0 12px !important;
}
#voiceBar .vbtn .vsvg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 !important;
}
#voiceBar .vbtn .vlbl {
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: 0.2px;
}
#camBtn .vlbl {
  margin-left: 2px !important;
}

/* Pinned bar at top of chat */
.pinned-bar {
  flex-shrink: 0;
  margin: 0 12px 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(124, 108, 255, 0.1);
  border: 1px solid rgba(124, 108, 255, 0.25);
  max-height: 140px;
  overflow: auto;
}
.pinned-bar.hidden { display: none !important; }
.pinned-bar-head {
  font-size: 11px;
  font-weight: 800;
  color: #b4aeff;
  margin-bottom: 6px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.pinned-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  border: none;
  background: rgba(0,0,0,.18);
  color: #eef0f7;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0 0 4px;
  cursor: pointer;
}
.pinned-item:hover { background: rgba(0,0,0,.28); }
.pinned-item strong { font-size: 12px; color: #cfc9ff; }
.pinned-item span { font-size: 12px; color: #c5c9db; line-height: 1.3; }
.msg.pin-flash {
  outline: 2px solid #7c6cff;
  background: rgba(124,108,255,.12);
}

/* Voice control buttons — clean grid */
#voiceBar .voice-controls {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
#voiceBar #leaveVoiceBtn,
#voiceBar .vbtn.leave {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
}
#voiceBar .vbtn {
  height: 36px !important;
  padding: 0 10px !important;
  gap: 8px !important;
  justify-content: center !important;
}
#voiceBar .vbtn .vsvg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
}
#voiceBar .vbtn .vlbl {
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* ===== Profile modal — fixed layout ===== */
#profileModal {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
#profileModal.hidden { display: none !important; }
#profileModal .profile-card {
  width: min(420px, 94vw) !important;
  max-height: min(92vh, 820px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 0 18px !important;
  border-radius: 16px !important;
  background: #1a1d28 !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.5) !important;
  display: flex !important;
  flex-direction: column !important;
}
#profileModal .profile-banner {
  height: 100px !important;
  margin: 0 !important;
  border-radius: 16px 16px 0 0 !important;
  background: linear-gradient(135deg, #7c6cff 0%, #5b8cff 45%, #2dd4a0 100%) !important;
  flex-shrink: 0;
}
#profileModal .profile-head {
  display: flex !important;
  align-items: flex-end !important;
  gap: 14px !important;
  margin: -42px 18px 16px !important;
  position: relative;
  z-index: 2;
}
#profileModal .avatar-edit {
  width: 84px !important;
  height: 84px !important;
  flex: 0 0 84px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  position: relative !important;
  overflow: visible !important;
}
#profileModal .avatar-edit img {
  width: 84px !important;
  height: 84px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 5px solid #1a1d28 !important;
  background: #12141c !important;
  display: block !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
#profileModal .avatar-edit span {
  position: absolute !important;
  inset: 5px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.55) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
}
#profileModal .avatar-edit:hover span {
  display: flex !important;
}
#profileModal .profile-head .settings-title {
  margin: 0 0 2px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #eef0f7 !important;
  cursor: pointer;
  line-height: 1.2 !important;
}
#profileModal .profile-head .hint {
  margin: 0 !important;
  font-size: 12px !important;
  color: #8b91a8 !important;
}
#profileModal .profile-card > label {
  display: block !important;
  margin: 10px 18px 6px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #9aa0b4 !important;
  line-height: 1.2 !important;
}
#profileModal .profile-card > input,
#profileModal .profile-card > select {
  width: calc(100% - 36px) !important;
  margin: 0 18px 4px !important;
  box-sizing: border-box !important;
  padding: 11px 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background: #12141c !important;
  color: #eef0f7 !important;
  font-size: 14px !important;
}
#profileModal .pref-list {
  margin: 14px 18px 8px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: #12141c !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  overflow: hidden !important;
}
#profileModal .pref {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 0 !important;
}
#profileModal .pref:last-child {
  border-bottom: none !important;
}
#profileModal .pref > span {
  min-width: 0;
  flex: 1;
}
#profileModal .pref b {
  display: block !important;
  font-size: 14px !important;
  color: #eef0f7 !important;
  font-weight: 700 !important;
}
#profileModal .pref small {
  display: block !important;
  margin-top: 2px !important;
  font-size: 12px !important;
  color: #8b91a8 !important;
  font-weight: 400 !important;
}
#profileModal .pref input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 42px !important;
  height: 24px !important;
  min-width: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: #3a3e55 !important;
  border: none !important;
  position: relative !important;
  cursor: pointer !important;
  flex: 0 0 42px !important;
  box-shadow: none !important;
}
#profileModal .pref input[type="checkbox"]::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: transform .15s ease !important;
  transform: none !important;
  display: block !important;
  opacity: 1 !important;
}
#profileModal .pref input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #7c6cff, #2dd4a0) !important;
}
#profileModal .pref input[type="checkbox"]:checked::after {
  transform: translateX(18px) !important;
  left: 3px !important;
}
#profileModal .color-pref #nickColorInput,
#profileModal #nickColorInput {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 2px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
  background: transparent !important;
  cursor: pointer !important;
  overflow: hidden !important;
  flex: 0 0 36px !important;
}
#profileModal #nickColorInput::-webkit-color-swatch-wrapper {
  padding: 0 !important;
}
#profileModal #nickColorInput::-webkit-color-swatch {
  border: none !important;
  border-radius: 8px !important;
}
#profileModal #nickColorInput::-moz-color-swatch {
  border: none !important;
  border-radius: 8px !important;
}
#profileModal .prompt-actions {
  display: flex !important;
  gap: 10px !important;
  margin: 12px 18px 0 !important;
  padding: 0 !important;
}
#profileModal .prompt-actions button {
  flex: 1 !important;
  margin: 0 !important;
  height: 42px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}
#profileModal #profileClose.ghost,
#profileModal .prompt-actions .ghost {
  background: rgba(255,255,255,.06) !important;
  color: #c5c9db !important;
}

/* Friends header: PC vs mobile */
.friends-nav { display: none !important; }
@media (max-width: 860px) {
  .friends-nav { display: inline-flex !important; }
}
.friends-head {
  height: 48px !important;
  padding: 0 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  background: transparent !important;
  gap: 10px !important;
}
.friends-head-title {
  font-size: 16px !important;
  font-weight: 800 !important;
}
#friendsView .friends-col {
  padding: 12px 16px 24px !important;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

/* Friend row with avatar — clickable profile */
.friend-row.friend-click {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
}
.friend-row.friend-click:hover {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.05) !important;
}
.friend-ava {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 40px;
  background: #2b2d31;
}
.friend-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.friend-row .friend-meta {
  flex: 1;
  min-width: 0;
}
.friend-row .friend-acts {
  flex-shrink: 0;
}

/* User card call button */
#userMenuCall {
  background: linear-gradient(135deg, #2dd4a0, #22b88a) !important;
  color: #04150f !important;
}

/* Private call modal */
.call-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.call-modal.hidden { display: none !important; }
.call-card {
  width: min(340px, 92vw);
  padding: 28px 22px 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, #1e2230, #141822);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
  text-align: center;
}
.call-ava {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(124,108,255,.5);
  margin: 0 auto 14px;
  display: block;
  background: #2b2d31;
}
.call-title {
  font-size: 20px;
  font-weight: 800;
  color: #eef0f7;
  margin-bottom: 6px;
}
.call-sub {
  font-size: 14px;
  color: #9aa0b4;
  margin-bottom: 20px;
}
.call-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.call-accept, .call-decline {
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  min-width: 120px;
}
.call-accept {
  background: linear-gradient(135deg, #2dd4a0, #22b88a);
  color: #04150f;
}
.call-decline {
  background: rgba(242, 63, 67, 0.2);
  color: #ff8f96;
}
.call-accept:hover { filter: brightness(1.06); }
.call-decline:hover { background: rgba(242, 63, 67, 0.32); color: #fff; }

/* Pinned bar never on friends/home */
main.friends-on #pinnedBar,
main.friends-on .pinned-bar {
  display: none !important;
}

/* ===== Responsive: phones & tablets ===== */
@media (max-width: 1100px) {
  #memberPanel {
    width: 220px !important;
    min-width: 180px !important;
  }
}
@media (max-width: 860px) {
  #app {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  #serverRail {
    width: 64px !important;
  }
  #channelPanel {
    width: min(86vw, 300px) !important;
    max-width: 300px !important;
  }
  #memberPanel {
    position: fixed !important;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 40;
    width: min(86vw, 300px) !important;
    transform: translateX(105%);
    transition: transform .2s ease;
    box-shadow: -12px 0 40px rgba(0,0,0,.45);
  }
  body.members-open #memberPanel {
    transform: translateX(0);
  }
  main {
    min-width: 0 !important;
    flex: 1 !important;
  }
  #channelHeader {
    padding: 0 10px !important;
    gap: 8px !important;
  }
  #channelTitle {
    font-size: 15px !important;
  }
  #channelTopic {
    display: none !important;
  }
  .pinned-bar {
    margin: 6px 8px !important;
    max-height: 100px !important;
  }
  #messages {
    padding: 8px 10px !important;
  }
  #msgForm {
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #voiceBar {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
  }
  .call-card {
    width: min(340px, 94vw) !important;
    padding: 22px 16px 16px !important;
  }
  .friend-row.friend-click {
    padding: 12px 10px !important;
  }
  .friend-acts {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  #profileModal .profile-card {
    width: min(420px, 96vw) !important;
    max-height: 92dvh !important;
  }
  .settings-card {
    width: min(400px, 96vw) !important;
    max-height: 92dvh !important;
    overflow: auto !important;
  }
  #userMenu {
    max-width: min(320px, calc(100vw - 16px)) !important;
    left: 8px !important;
    right: 8px !important;
  }
}
@media (max-width: 520px) {
  #serverRail {
    width: 56px !important;
  }
  .server-icon {
    width: 42px !important;
    height: 42px !important;
  }
  .add-friend-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .add-friend-row button {
    width: 100% !important;
  }
  #voiceBar .vbtn .vlbl {
    font-size: 11px !important;
  }
  .msg {
    padding-left: 4px !important;
  }
}
/* Touch targets */
@media (pointer: coarse) {
  .server-icon,
  .ch,
  .friend-row,
  .member,
  .nav-btn,
  .vbtn {
    min-height: 40px;
  }
  button, .ch-gear {
    min-height: 36px;
  }
}

/* TEAM-FLOW brand */
.login-badge, .logo {
  letter-spacing: 0.08em !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #7c6cff, #2dd4a0) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.login-hero h1 { max-width: 14ch; }

/* Latency / ping indicator — 4 levels: green → red */
.ping-badge {
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  transition: background .45s ease, color .45s ease, box-shadow .45s ease;
}
.ping-badge[data-level="1"] { background: rgba(45,212,160,.22); color: #7df0c8; }
.ping-badge[data-level="2"] { background: rgba(163,230,53,.2); color: #c8f06a; }
.ping-badge[data-level="3"] { background: rgba(251,146,60,.22); color: #ffb86a; }
.ping-badge[data-level="4"] { background: rgba(242,63,67,.24); color: #ff9aa0; }

#voiceBar {
  transition: background .5s ease, border-color .5s ease, box-shadow .5s ease !important;
}
/* 1 — отлично (зелёный) */
#voiceBar[data-ping="1"] {
  background: linear-gradient(135deg, rgba(16,42,32,.97), rgba(18,26,24,.97)) !important;
  border-color: rgba(45,212,160,.5) !important;
  box-shadow: 0 10px 28px rgba(45,212,160,.14) !important;
}
/* 2 — хорошо (лайм) */
#voiceBar[data-ping="2"] {
  background: linear-gradient(135deg, rgba(28,40,16,.97), rgba(22,28,18,.97)) !important;
  border-color: rgba(163,230,53,.45) !important;
  box-shadow: 0 10px 28px rgba(163,230,53,.12) !important;
}
/* 3 — средне (оранжевый) */
#voiceBar[data-ping="3"] {
  background: linear-gradient(135deg, rgba(44,28,14,.97), rgba(30,22,16,.97)) !important;
  border-color: rgba(251,146,60,.5) !important;
  box-shadow: 0 10px 28px rgba(251,146,60,.14) !important;
}
/* 4 — плохо (красный) */
#voiceBar[data-ping="4"] {
  background: linear-gradient(135deg, rgba(48,16,20,.97), rgba(32,14,18,.97)) !important;
  border-color: rgba(242,63,67,.55) !important;
  box-shadow: 0 10px 28px rgba(242,63,67,.16) !important;
}
#voiceBar .voice-q,
#voiceBar #voiceQ {
  font-weight: 700 !important;
  font-size: 12px !important;
  transition: color .4s ease;
}
#voiceBar[data-ping="1"] .voice-q,
#voiceBar[data-ping="1"] #voiceQ { color: #7df0c8 !important; }
#voiceBar[data-ping="2"] .voice-q,
#voiceBar[data-ping="2"] #voiceQ { color: #c8f06a !important; }
#voiceBar[data-ping="3"] .voice-q,
#voiceBar[data-ping="3"] #voiceQ { color: #ffb86a !important; }
#voiceBar[data-ping="4"] .voice-q,
#voiceBar[data-ping="4"] #voiceQ { color: #ff9aa0 !important; }

/* Кнопки: тёмный полупрозрачный фон + светлый текст — не сливаются ни с одним уровнем */
#voiceBar .vbtn {
  background: rgba(0, 0, 0, 0.38) !important;
  color: #f0f2f8 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset !important;
}
#voiceBar .vbtn:hover {
  background: rgba(0, 0, 0, 0.52) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}
#voiceBar .vbtn.sharing,
#voiceBar .vbtn.on {
  background: rgba(0, 0, 0, 0.45) !important;
  border-color: rgba(45, 212, 160, 0.55) !important;
  color: #b8f5de !important;
}
#voiceBar #leaveVoiceBtn,
#voiceBar .vbtn.leave {
  background: rgba(180, 30, 40, 0.55) !important;
  border: 1px solid rgba(255, 120, 130, 0.35) !important;
  color: #ffc4c8 !important;
  box-shadow: none !important;
}
#voiceBar #leaveVoiceBtn:hover,
#voiceBar .vbtn.leave:hover {
  background: rgba(210, 40, 50, 0.75) !important;
  border-color: rgba(255, 140, 150, 0.5) !important;
  color: #fff !important;
}

/* пульс только на самом плохом уровне */
body[data-ping="4"] #voiceBar { animation: pingPulse 2.2s ease-in-out infinite; }
@keyframes pingPulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(242,63,67,.14); }
  50% { box-shadow: 0 10px 36px rgba(242,63,67,.32); }
}