body { overflow: hidden; }

/* ── Guest Voice Mode ──────────────────────────────── */
#guest-voice-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.guest-voice-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--accent-dim);
  font-family: var(--ui-font);
}
.guest-voice-server {
  font-weight: 700;
  color: var(--text);
  font-size: 1rem;
}
.guest-voice-sep {
  color: var(--text-muted);
  font-size: 0.9rem;
}
.guest-voice-channel {
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 600;
}
.guest-voice-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 32px;
}
#guest-voice-rooms {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}
.guest-voice-user {
  padding: 8px 16px;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.88rem;
}
.guest-voice-controls {
  display: flex;
  gap: 12px;
}
.guest-voice-controls .voice-ctrl-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.guest-voice-controls .voice-ctrl-btn:hover {
  background: var(--surface-3);
  border-color: var(--accent);
}
.guest-voice-controls .voice-ctrl-btn.active {
  background: rgba(244,67,54,0.15);
  border-color: #f44336;
  color: #f44336;
}

/* ── Desktop (Electron) — titlebar & drag region ──── */
#desktop-titlebar { display: none; }

body.is-desktop-mac #desktop-titlebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  height: 38px;
  background: var(--bg);
  -webkit-app-region: drag;
  border-bottom: 1px solid var(--border);
  z-index: 10000;
}

body.is-desktop-mac #app-layout {
  height: calc(100vh - 38px);
  margin-top: 38px;
}
body.is-desktop-mac .settings-page {
  top: 38px;
}

/* ── SVG Icon System ─────────────────────────────── */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  display: inline-block;
}
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 18px; height: 18px; }
.icon-lg { width: 24px; height: 24px; }

#app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
  flex-direction: column;
}

/* ── Top Title Bar ───────────────────────────────── */
#app-title-bar {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
  -webkit-app-region: drag;
  user-select: none;
  z-index: 100;
}
#app-title-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  flex-shrink: 0;
}
#app-title-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#app-title-text {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

/* ── App Body (server rail + sidebar + content) ─── */
#app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Server Rail ──────────────────────────────────── */
#server-rail {
  width: 72px;
  flex-shrink: 0;
  background: var(--sidebar-server-bg, var(--bg));
  border-right: 1px solid var(--accent-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0 80px; /* extra bottom padding so buttons aren't hidden behind footer */
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
}

.server-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--accent-dim);
  background: var(--surface-2);
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, box-shadow 0.2s, border-radius 0.2s;
  user-select: none;
  letter-spacing: 0;
  overflow: hidden;
  padding: 0;
}

.server-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.server-icon:hover {
  border-color: var(--accent);
  box-shadow: var(--accent-glow);
  border-radius: 35%;
}

.server-icon.active {
  border-color: var(--accent);
  box-shadow: var(--accent-glow);
  border-radius: 35%;
}

.server-add-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px dashed var(--accent-dim);
  background: transparent;
  color: var(--accent-dim);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
  margin-top: auto;
}

.server-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--accent-glow);
}

/* ── Group Rail Items ─────────────────────────────── */
#group-rail-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  scrollbar-width: none;
}
#group-rail-list::-webkit-scrollbar { display: none; }

.group-rail-item {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 1.1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, box-shadow 0.2s, border-radius 0.2s, filter 0.2s, opacity 0.2s;
  user-select: none;
  position: relative;
  filter: grayscale(0.5);
  opacity: 0.55;
}

.group-rail-item:hover {
  border-color: var(--accent);
  filter: grayscale(0);
  opacity: 1;
  color: var(--text);
}

.group-rail-item.active {
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(200,200,200,0.15);
  filter: grayscale(0);
  opacity: 1;
  color: var(--text);
}

/* Left-side pip indicator */
.group-rail-item::before {
  content: '';
  position: absolute;
  left: -14px;
  width: 4px;
  height: 0;
  border-radius: 0 4px 4px 0;
  background: var(--group-color, var(--accent));
  transition: height 0.2s;
}
.group-rail-item:hover::before { height: 20px; }
.group-rail-item.active::before { height: 36px; }

/* Color accent for groups with custom colors — only when active or hovered */
.group-rail-item[data-group-color]:hover {
  border-color: var(--group-color, var(--accent));
}
.group-rail-item[data-group-color].active {
  border-color: var(--group-color, var(--accent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--group-color) 30%, transparent);
}

.group-rail-item.group-home { font-size: 1.3rem; }
.group-rail-badge {
  position: absolute;
  bottom: -2px;
  right: -4px;
  background: #f87171;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 5px;
  min-width: 14px;
  text-align: center;
  border: 2px solid var(--bg);
  line-height: 1.2;
}
.group-rail-unread-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  border: 2px solid var(--bg);
}

.group-rail-add {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px dashed var(--accent-dim);
  background: transparent;
  color: var(--accent-dim);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
  margin-top: auto;
}
.group-rail-add:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--accent-glow);
}

/* ── Main Menu Popup ───────────────────────────────── */
#main-menu-popup {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2500;
  background: var(--surface-1);
  border: 1.5px solid var(--accent-dim);
  border-radius: var(--radius-lg);
  box-shadow: var(--accent-glow), 0 8px 32px rgba(0,0,0,0.5);
  width: 220px;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.92) translateY(-8px);
  transform-origin: top left;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
#main-menu-popup.visible {
  display: block !important;
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.menu-level { padding: 8px; }

@keyframes menuSlideLeft {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes menuSlideRight {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.menu-level.slide-forward  { animation: menuSlideLeft 0.2s ease; }
.menu-level.slide-backward { animation: menuSlideRight 0.2s ease; }

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.menu-item:hover {
  background: rgba(127,255,212,0.08);
  color: var(--accent);
}
.menu-item > * {
  pointer-events: none;
}
.menu-item-icon {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.menu-item-label {
  flex: 1;
  text-align: left;
}
.menu-item-arrow {
  font-size: 1.2rem;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.menu-item:hover .menu-item-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

.menu-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.menu-back-btn:hover {
  background: rgba(127,255,212,0.08);
  color: var(--accent);
}
.menu-back-arrow { font-size: 1.1rem; }

.menu-separator {
  border: none;
  height: 1px;
  background: var(--accent-dim);
  margin: 4px 8px;
}

.menu-server-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 300px;
  overflow-y: auto;
  padding: 2px 0;
}
.menu-server-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  width: 100%;
  text-align: left;
}
.menu-server-item:hover {
  background: rgba(127,255,212,0.08);
  color: var(--accent);
}

/* Server reorder context menu */
.server-order-menu {
  position: fixed; z-index: 99999;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 10px; padding: 4px; min-width: 150px;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
}
.server-order-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 12px; border: none; background: none; border-radius: 6px;
  color: var(--text); font-size: 0.85rem; cursor: pointer; transition: background .12s;
}
.server-order-item:hover { background: var(--surface-2); color: var(--accent); }
.server-order-icon { font-size: 0.65rem; color: var(--text-muted);
}
.menu-server-item.active {
  background: rgba(127,255,212,0.12);
  color: var(--accent);
}
.menu-server-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1.5px solid var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
}
.menu-server-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.menu-server-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-add-server .menu-item-icon {
  font-size: 1.4rem;
  color: var(--accent-dim);
}
.menu-add-server:hover .menu-item-icon {
  color: var(--accent);
}

/* ── Sidebar Collapse / Expand ────────────────────── */
#sidebar,
#dm-sidebar {
  transition: width 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
  overflow: hidden;
}
.sidebar-collapsed #sidebar,
.sidebar-collapsed #dm-sidebar {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-right: none !important;
  opacity: 0;
  pointer-events: none;
}

.sidebar-expand-btn {
  display: none;
  width: 28px;
  flex-shrink: 0;
  background: var(--surface-1);
  border: none;
  border-right: 1px solid var(--accent-dim);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
}
.sidebar-expand-btn:hover {
  color: var(--accent);
  background: rgba(127,255,212,0.06);
}
.sidebar-collapsed .sidebar-expand-btn {
  display: flex;
}

/* ── Sidebar ──────────────────────────────────────── */
#sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--sidebar-channel-bg, var(--surface-1));
  border-right: 1px solid var(--accent-dim);
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 72px; /* space for the floating footer */
}

#sidebar-header {
  padding: 0 12px 0 16px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--accent-dim);
  flex-shrink: 0;
}

#sidebar-server-name {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-gear {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.2s, background 0.2s;
}
.sidebar-gear svg { width: 18px; height: 18px; }

.sidebar-gear:hover {
  color: var(--accent);
  background: rgba(127,255,212,0.08);
}

#channel-list-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: 12px 8px;
}

.channel-section-header {
  display: flex;
  align-items: center;
  padding: 12px 8px 4px;
}

.channel-section-label {
  flex: 1;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.add-channel-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: color 0.2s, background 0.2s;
}

.add-channel-btn:hover {
  color: var(--accent);
  background: rgba(127,255,212,0.08);
}

/* Category sections */
.category-header { cursor: default; }
.category-label {
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 600;
}
.category-chevron {
  display: inline-flex;
  transition: transform 0.15s;
}
.category-header:not(.collapsed) .category-chevron {
  transform: rotate(90deg);
}
.add-category-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: 0.72rem;
  padding: 6px 10px;
  margin-top: 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.add-category-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.channel-section-header.drop-target {
  background: rgba(127,255,212,0.10);
  border-radius: var(--radius-sm);
}

.channel-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  user-select: none;
  position: relative;
}

.ch-icon {
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.7;
}
.channel-item.active .ch-icon { opacity: 1; }

.channel-item:hover  { background: rgba(127,255,212,0.07); color: var(--text); }
.channel-item.active { background: rgba(127,255,212,0.12); color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }

/* ── Voice channel hover action buttons ─────────────── */
.vc-hover-actions {
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}
.channel-item:hover .vc-hover-actions { display: flex; }
.vc-hover-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vc-hover-btn svg { width: 16px; height: 16px; }
.vc-hover-btn:hover { color: var(--text); background: rgba(127,255,212,0.1); }

/* ── Voice Channel Text Chat Side Panel ────────────── */
.vc-chat-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 50%;
  border-top: 1px solid var(--card-border);
  background: var(--bg);
  flex-shrink: 0;
}
.vc-chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--card-border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.vc-chat-header .vc-chat-close { margin-left: auto; }
.vc-chat-temp-badge {
  font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: 4px; background: var(--surface-3); color: var(--text-muted);
}
.voice-topbar-chat-btn {
  width: auto !important; padding: 0 10px !important; border-radius: 6px !important; font-size: 0.75rem;
  gap: 4px;
}
.voice-topbar-chat-btn .icon { width: 14px; height: 14px;
}
.vc-chat-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
}
.vc-chat-close:hover { color: var(--text); }
.vc-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
}
.vc-chat-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--card-border);
}
.vc-chat-input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 8px 14px;
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
}
.vc-chat-input:focus { border-color: var(--accent); }

/* ── Manage Channels Button + Page ─────────────────── */
.manage-channels-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 16px);
  margin: 4px 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
}
.manage-channels-btn:hover { background: var(--surface-3); }
.manage-channels-icon { font-size: 1rem; opacity: 0.7; }

.manage-ch-banner {
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
}
.manage-ch-banner h3 { margin: 0 0 6px; font-size: 1.1rem; color: var(--text); }
.manage-ch-banner p { margin: 4px 0; font-size: 0.85rem; color: var(--text-muted); }

.manage-ch-category {
  margin-bottom: 16px;
}
.manage-ch-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--card-border);
}
.manage-ch-cat-name {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
}
.manage-ch-cat-follow {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.manage-ch-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.manage-ch-item:hover { background: rgba(127,255,212,0.02); }
.manage-ch-icon { color: var(--text-muted); font-size: 0.85rem; flex-shrink: 0; }
.manage-ch-info { flex: 1; min-width: 0; }
.manage-ch-name { font-size: 0.92rem; color: var(--text); font-weight: 500; }
.manage-ch-activity { font-size: 0.75rem; color: var(--text-muted); }

/* ── Channel drag-and-drop reordering ──────────────────── */
.ch-draggable { cursor: grab; }
.ch-draggable:active { cursor: grabbing; }
.ch-draggable.dragging { opacity: 0.4; }
.ch-drop-before { border-top: 2px solid var(--accent); margin-top: -2px; }
.ch-drop-after  { border-bottom: 2px solid var(--accent); margin-bottom: -2px; }

/* ── Channel type picker (create dialog) ───────────────── */
.channel-type-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.ch-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  color: var(--text-muted);
  font-size: 0.65rem;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--ui-font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ch-type-btn .ch-type-icon { font-size: 1.1rem; }
.ch-type-btn:hover { border-color: var(--accent); color: var(--text); }
.ch-type-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
  box-shadow: var(--accent-glow);
}

/* ── New channel type view containers ──────────────────── */
.type-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--accent-dim);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}
.type-back-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  transition: color 0.15s;
}
.type-back-btn:hover { color: var(--accent); }
.type-nav-btn {
  background: transparent;
  border: 1px solid var(--accent-dim);
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}
.type-nav-btn:hover { border-color: var(--accent); color: var(--accent); }

.type-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}
.type-empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 40px 16px;
}

/* ── Media gallery grid ─────────────────────────────────── */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  align-content: start;
  gap: 12px;
  padding: 4px;
}
.media-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  cursor: pointer;
  transition: border-color 0.15s;
}
.media-item:hover { border-color: var(--accent); }
.media-item img, .media-item video {
  width: 100%; height: 100%; object-fit: cover;
}
.media-item-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 6px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.media-item:hover .media-item-overlay { opacity: 1; }
.media-item-overlay { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.media-item-author { font-weight: 600; font-size: 0.72rem; }
.media-item-caption { font-size: 0.68rem; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-item-thumb { display: block; }
.media-heart-btn {
  position: absolute; top: auto; bottom: auto; right: 0;
  align-self: flex-end;
  background: rgba(0,0,0,0.5); border: none; border-radius: 16px;
  color: #fff; cursor: pointer; display: flex; align-items: center; gap: 4px;
  padding: 3px 8px; font-size: 0.72rem; font-weight: 600;
  transition: background 0.15s, transform 0.15s;
  margin-top: -2px;
}
.media-heart-btn:hover { background: rgba(0,0,0,0.7); transform: scale(1.08); }
.media-heart-btn.hearted { background: rgba(224,85,85,0.25); }
.media-heart-count { min-width: 6px; }

/* ── Task kanban board ──────────────────────────────────── */
.task-kanban {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  overflow-x: auto;
}
.task-column {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
}
.task-column-header {
  padding: 10px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--accent-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}
.task-column-name {
  cursor: pointer;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-column-name:hover { color: var(--text); }
.task-column-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.task-column-header:hover .task-column-actions { opacity: 1; }
.task-col-action-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  line-height: 1;
}
.task-col-action-btn:hover { color: var(--text); background: var(--surface-3); }
.task-col-action-btn.danger:hover { color: #e74c3c; }
.task-column-body {
  flex: 1;
  padding: 8px;
  overflow-y: auto;
  min-height: 60px;
  transition: background 0.15s, border-color 0.15s;
}
.task-column-body.drag-over {
  background: rgba(127, 255, 212, 0.06);
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.task-column.col-drag-over {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}
.task-column.dragging {
  opacity: 0.4;
}
.task-column-empty {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.5;
  padding: 16px 8px;
  pointer-events: none;
}
.task-card {
  padding: 10px;
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  cursor: grab;
  transition: border-color 0.15s, opacity 0.15s, transform 0.15s;
  user-select: none;
}
.task-card:active { cursor: grabbing; }
.task-card.dragging {
  opacity: 0.4;
  transform: rotate(2deg);
}
.task-card:hover { border-color: var(--accent); }
.task-card-title { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.task-card-desc { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; line-height: 1.3; }
.task-card-footer { display: flex; gap: 8px; margin-top: 6px; font-size: 0.7rem; color: var(--text-muted); }
.task-card-assignee { opacity: 0.8; }
.task-card-due { opacity: 0.8; }
.task-card-due.overdue { color: #e74c3c; }
.task-card-actions {
  display: flex; gap: 4px; margin-top: 6px;
  opacity: 0;
  transition: opacity 0.15s;
}
.task-card:hover .task-card-actions { opacity: 1; }
.task-move-btn {
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  cursor: pointer;
}
.task-move-btn:hover { border-color: var(--accent); color: var(--text); }
.task-move-btn.danger:hover { border-color: #e74c3c; color: #e74c3c; }
.task-count {
  font-size: 0.65rem;
  background: var(--accent-dim);
  color: var(--text);
  padding: 1px 6px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* ── Calendar grid ──────────────────────────────────────── */
.cal-header-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  padding: 0 16px;
}
.cal-day-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 0;
  letter-spacing: 0.06em;
}
.cal-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  padding: 0 16px;
  flex: 1;
}
.cal-cell {
  min-height: 90px;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.cal-cell:hover { border-color: var(--accent); }
.cal-cell.empty { background: transparent; border-color: transparent; cursor: default; }
.cal-cell.empty:hover { border-color: transparent; }
.cal-cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-day-num {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}
.cal-cell.today .cal-day-num { color: var(--accent); font-weight: 700; }
.cal-cell.today { border: 1px solid var(--accent); }
.cal-events-slot { margin-top: 2px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-event-chip {
  font-size: 0.6rem;
  padding: 1px 4px;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.cal-event-chip:hover { opacity: 0.85; }
.cal-event-more { font-size: 0.6rem; color: var(--text-muted); }
.cal-event-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin: 1px;
}

/* ── Event dialogs ─────────────────────────────────────── */
#dialog-new-event { width: 420px; }
#dialog-new-event textarea,
#dialog-new-event input[type="text"] {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 10px;
  font-size: 0.85rem;
  font-family: inherit;
}
#dialog-new-event textarea:focus,
#dialog-new-event input[type="text"]:focus { outline: none; border-color: var(--accent); }
#dialog-new-event input[type="datetime-local"] {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 10px;
  font-size: 0.85rem;
  font-family: inherit;
}
#dialog-new-event input[type="datetime-local"]:focus { outline: none; border-color: var(--accent); }

#dialog-event-detail { width: 460px; }
.event-detail-stripe {
  height: 6px;
  border-radius: 3px;
  margin-bottom: 12px;
}
.event-detail-title { margin: 0 0 8px; font-size: 1.1rem; color: var(--text); }
.event-detail-meta { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 4px; }
.event-detail-host { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 12px; }
.event-detail-desc {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.4;
  padding: 10px 12px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-dim);
  margin-bottom: 12px;
  white-space: pre-wrap;
}
.event-rsvp-bar { display: flex; gap: 8px; margin-bottom: 12px; }
.event-rsvp-btn {
  flex: 1;
  padding: 8px;
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.15s;
}
.event-rsvp-btn:hover { border-color: var(--accent); color: var(--text); }
.event-rsvp-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}
.event-attendees { margin-top: 8px; }
.event-attendee-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; margin-top: 8px; }
.event-attendee-list { display: flex; gap: 6px; flex-wrap: wrap; }
.event-attendee-list span {
  font-size: 0.78rem;
  padding: 2px 8px;
  background: var(--surface-3);
  border-radius: 10px;
  color: var(--text);
}

/* ── Forum post cards ───────────────────────────────────── */
.forum-post-card {
  padding: 12px 16px;
  background: var(--thread-card-bg, var(--surface-3));
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.forum-post-card:hover { border-color: var(--accent); }
.forum-post-card.pinned { border-left: 3px solid var(--accent); }
.forum-post-title-row { display: flex; align-items: center; gap: 6px; }
.forum-post-badges { display: flex; gap: 4px; flex-shrink: 0; }
.forum-badge { font-size: 0.7rem; opacity: 0.8; }
.forum-post-title { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.forum-post-preview { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; line-height: 1.3; }
.forum-post-meta {
  display: flex; gap: 12px; margin-top: 8px;
  font-size: 0.7rem; color: var(--text-muted);
}
.forum-post-author { font-weight: 600; }

/* ── Forum detail view ─────────────────────────────────── */
#forum-post-detail {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.forum-detail-header {}
.forum-detail-header-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.forum-detail-title { font-size: 1.2rem; font-weight: 700; color: var(--text); margin: 0; }
.forum-detail-badges { display: flex; gap: 6px; }
.forum-detail-badges .forum-badge {
  font-size: 0.75rem;
  padding: 2px 8px;
  background: var(--surface-3);
  border-radius: 10px;
  border: 1px solid var(--accent-dim);
}
.forum-detail-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.forum-detail-author .msg-avatar { width: 28px; height: 28px; font-size: 0.7rem; flex-shrink: 0; }
.forum-detail-author-name { font-weight: 600; font-size: 0.85rem; }
.forum-detail-time { font-size: 0.75rem; color: var(--text-muted); }
.forum-detail-actions {
  display: flex; gap: 6px; margin-left: auto;
}
.forum-action-btn {
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  color: var(--text-muted);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.15s;
}
.forum-action-btn:hover { border-color: var(--accent); color: var(--text); }
.forum-action-btn.danger:hover { border-color: #e74c3c; color: #e74c3c; }

.forum-detail-content {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text);
  padding: 12px 16px;
  background: var(--surface-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--accent-dim);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ── Forum replies ───────────────────────────────────────── */
.forum-replies-section { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.forum-replies-header {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--accent-dim);
  margin-bottom: 8px;
}
.forum-replies-list { overflow-y: auto; flex: 1; }

.forum-reply {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  transition: background 0.1s;
}
.forum-reply:hover { background: var(--surface-3); }
.forum-reply .msg-avatar { width: 28px; height: 28px; font-size: 0.7rem; flex-shrink: 0; }
.forum-reply-body { flex: 1; min-width: 0; }
.forum-reply-header { display: flex; gap: 8px; align-items: baseline; }
.forum-reply-author { font-weight: 600; font-size: 0.82rem; }
.forum-reply-time { font-size: 0.7rem; color: var(--text-muted); }
.forum-reply-content {
  font-size: 0.85rem;
  color: var(--text);
  margin: 2px 0 0;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* ── Forum reply input bar ───────────────────────────────── */
.forum-reply-bar {
  display: flex;
  gap: 8px;
  padding: 10px 0 0;
  border-top: 1px solid var(--accent-dim);
  align-items: flex-end;
}
.forum-reply-input {
  flex: 1;
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 8px 12px;
  font-size: 0.85rem;
  resize: none;
  font-family: inherit;
}
.forum-reply-input:focus {
  outline: none;
  border-color: var(--accent);
}
.forum-reply-send {
  padding: 8px 16px;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.forum-locked-notice {
  text-align: center;
  padding: 12px;
  color: var(--text-muted);
  font-size: 0.82rem;
  border-top: 1px solid var(--accent-dim);
  margin-top: 8px;
}

/* ── New Post dialog ────────────────────────────────────── */
#dialog-new-post { width: 480px; }
#dialog-new-post textarea {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 10px;
  font-size: 0.85rem;
  resize: vertical;
  font-family: inherit;
}
#dialog-new-post textarea:focus { outline: none; border-color: var(--accent); }

/* ── Doc list items ─────────────────────────────────────── */
.doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.doc-item:hover { border-color: var(--accent); }
.doc-item.pinned { border-left: 3px solid var(--accent); }
.doc-item-icon { font-size: 1.2rem; flex-shrink: 0; }
.doc-item-info { flex: 1; min-width: 0; }
.doc-item-title { font-size: 0.88rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-item-meta { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }

/* ── File Viewer Overlay ───────────────────────────── */
#file-viewer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 1200;
  align-items: center;
  justify-content: center;
}
#file-viewer-overlay[style*="flex"] { display: flex !important; }
#file-viewer-modal {
  display: flex;
  flex-direction: column;
  width: min(92vw, 1100px);
  height: min(90vh, 860px);
  background: var(--surface-1);
  border: 1.5px solid var(--accent-dim);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7);
}
#file-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--accent-dim);
  background: var(--surface-2);
  flex-shrink: 0;
  gap: 12px;
}
#file-viewer-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
#file-viewer-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#file-viewer-body iframe,
#file-viewer-body embed {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}
#file-viewer-body pre {
  flex: 1;
  overflow: auto;
  padding: 20px;
  margin: 0;
  font-size: 0.82rem;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.file-viewer-unsupported {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted);
}
.file-viewer-unsupported .fvu-icon { font-size: 3.5rem; line-height: 1; }
.file-viewer-unsupported .fvu-icon svg { width: 64px; height: 78px; }
.file-viewer-unsupported .fvu-name { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.file-viewer-unsupported .fvu-hint { font-size: 0.8rem; }


/* ── Doc editor ──────────────────────────────────────────── */
#docs-editor {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.doc-editor-title {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--accent-dim);
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 700;
  padding: 8px 4px;
  font-family: inherit;
}
.doc-editor-title:focus { outline: none; border-bottom-color: var(--accent); }
.doc-editor-content {
  flex: 1;
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 14px 16px;
  font-size: 0.88rem;
  line-height: 1.6;
  font-family: 'IBM Plex Mono', monospace;
  resize: none;
  min-height: 200px;
}
.doc-editor-content:focus { outline: none; border-color: var(--accent); }
.doc-editor-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.doc-editor-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ── Server Overview ─────────────────────────────────────── */

/* Hero banner — layout controlled by inline styles in JS */
.overview-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  overflow: visible;
  padding: 16px 16px 0;
}
/* Inner wrapper — sizes to image, centered */
.overview-hero-bg {
  align-self: center;
  max-width: 100%;
  overflow: hidden;
  border-radius: 12px;
}
.overview-hero-icon {
  position: relative;
  z-index: 2;
  margin-top: -48px;
  width: 96px;
  height: 96px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 4px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--accent);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.overview-hero-icon img { width: 100%; height: 100%; object-fit: cover; }
.overview-hero-edit {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Identity block — centered */
.overview-identity {
  padding: 16px 32px 40px;
  text-align: center;
  border-bottom: none;
  align-self: stretch;
}
.overview-server-name {
  margin: 0 0 6px;
  font-size: 1.75rem;
  color: var(--text);
  font-weight: 700;
}
.overview-server-desc {
  margin: 0 auto;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 560px;
}

/* Two-column body */
.overview-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
.overview-main {
  padding: 24px 28px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.overview-about {
  padding: 20px 16px;
  border-left: 1px solid var(--accent-dim);
  min-width: 0;
  border-radius: 12px 0 0 0;
}

/* Section headings */
.overview-section-title {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.overview-section-title-link {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}
.overview-section-title-link:hover { text-decoration: underline; }

/* Upcoming events — horizontal scroll row */
.overview-events-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.overview-event-card {
  display: flex;
  flex-direction: column;
  min-width: 220px;
  max-width: 280px;
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color 0.15s;
  cursor: pointer;
}
.overview-event-card:hover { border-color: var(--accent); }
.overview-event-card-body {
  padding: 12px 14px 10px;
  flex: 1;
}
.overview-event-card-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overview-event-card-going {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.overview-event-card-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.overview-event-rsvp {
  display: flex;
  border-top: 1px solid var(--accent-dim);
}
.overview-rsvp-btn {
  flex: 1;
  padding: 8px 0;
  border: none;
  border-right: 1px solid var(--accent-dim);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.overview-rsvp-btn:last-child { border-right: none; }
.overview-rsvp-btn:hover { background: var(--surface-2); color: var(--text); }
.overview-rsvp-btn.active { background: var(--accent); color: var(--bg); font-weight: 600; }

/* Announcement cards grid */
.overview-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 600px;
}
.overview-announce-card {
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.overview-announce-card:hover { border-color: var(--accent); }
.overview-announce-card-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}
.overview-announce-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.overview-announce-card-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--accent);
  overflow: hidden;
  flex-shrink: 0;
}
.overview-announce-card-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Forum post cards */
.overview-discuss-card {
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.overview-discuss-card:hover { border-color: var(--accent); }
.overview-discuss-card-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}
.overview-discuss-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.overview-discuss-card-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--accent);
  overflow: hidden;
  flex-shrink: 0;
}
.overview-discuss-card-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Card grid (custom cards) */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.overview-section {
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.overview-section-empty { font-size: 0.78rem; color: var(--text-muted); }
.overview-activity-list { display: flex; flex-direction: column; gap: 6px; }
.overview-activity-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.78rem;
  padding: 4px 0;
  border-bottom: 1px solid var(--accent-dim);
}
.overview-activity-item:last-child { border-bottom: none; }
.overview-act-author { font-weight: 600; flex-shrink: 0; }
.overview-act-channel { color: var(--accent); opacity: 0.7; flex-shrink: 0; font-size: 0.7rem; }
.overview-act-preview { color: var(--text-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-act-time { color: var(--text-muted); font-size: 0.68rem; flex-shrink: 0; }
.overview-events-list, .overview-posts-list { display: flex; flex-direction: column; gap: 8px; }
.overview-event-item { display: flex; align-items: flex-start; gap: 8px; font-size: 0.82rem; color: var(--text); }
.overview-event-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.overview-post-item { font-size: 0.82rem; color: var(--text); padding: 4px 0; border-bottom: 1px solid var(--accent-dim); }
.overview-post-item:last-child { border-bottom: none; }
.overview-channels-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.overview-channel-chip {
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: 12px;
  font-size: 0.75rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s;
}
.overview-channel-chip:hover { border-color: var(--accent); }

/* -- Overview size classes ---- */
.overview-size-small { grid-column: span 1; }
.overview-size-wide  { grid-column: span 2; }
.overview-size-full  { grid-column: 1 / -1; }

/* -- Overview custom card body ---- */
.overview-custom-body {
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

/* About sidebar */
.overview-about-heading {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.overview-about-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 12px;
}
.overview-about-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.overview-about-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.overview-about-invite {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.1s;
  background: none;
  border: none;
  width: 100%;
  margin-bottom: 12px;
}
.overview-about-invite:hover { color: var(--accent); }
.overview-about-invite-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.overview-about-role-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 10px 0 4px;
}
.overview-about-members {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.overview-about-member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s;
}
.overview-about-member-row:hover { background: var(--surface-3); }
.overview-about-avatar {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  overflow: visible;
}
.overview-about-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.overview-about-status {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--surface-2);
}
.overview-about-status.online  { background: #43b581; }
.overview-about-status.idle    { background: #faa61a; }
.overview-about-status.dnd     { background: #f04747; }
.overview-about-status.offline { background: #747f8d; }
.overview-about-member-info { display: flex; flex-direction: column; min-width: 0; }
.overview-about-member-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overview-about-member-status {
  font-size: 0.7rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- Customize button (overlaid on hero) ---- */
.overview-edit-btn {
  padding: 5px 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.78rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.15s, border-color 0.15s;
}
.overview-edit-btn:hover {
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.4);
}

/* -- Edit mode grid ---- */
.overview-grid--editing .overview-section {
  border: 2px dashed var(--accent-dim);
  position: relative;
  cursor: grab;
  min-height: 100px;
}
.overview-grid--editing .overview-section.dragging { opacity: 0.4; }
.overview-grid--editing .overview-section.drag-over {
  border-color: var(--accent);
  background: rgba(0, 255, 180, 0.04);
}
.overview-edit-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--accent-dim);
}
.overview-edit-handle {
  font-size: 1.1rem;
  color: var(--text-muted);
  cursor: grab;
  user-select: none;
  letter-spacing: 2px;
}
.overview-edit-size-btn,
.overview-edit-delete-btn {
  padding: 2px 8px;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.72rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.overview-edit-size-btn:hover { border-color: var(--accent); color: var(--accent); }
.overview-edit-delete-btn { margin-left: auto; }
.overview-edit-delete-btn:hover { border-color: #e74c3c; color: #e74c3c; }
.overview-edit-label { font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.overview-edit-sublabel { font-size: 0.72rem; color: var(--text-muted); font-style: italic; }
.overview-custom-title-input {
  width: 100%;
  padding: 6px 8px;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
  outline: none;
}
.overview-custom-title-input:focus { border-color: var(--accent); }
.overview-custom-content-input {
  width: 100%;
  min-height: 80px;
  padding: 6px 8px;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.8rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
}
.overview-custom-content-input:focus { border-color: var(--accent); }
.overview-add-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px dashed var(--accent-dim) !important;
  background: transparent !important;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  color: var(--text-muted);
  min-height: 100px;
}
.overview-add-card:hover { border-color: var(--accent) !important; color: var(--accent); }
.overview-add-card-icon { font-size: 1.8rem; line-height: 1; }
.overview-add-menu {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  padding: 6px 0;
  min-width: 200px;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.overview-add-menu-item {
  padding: 8px 14px;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s;
}
.overview-add-menu-item:hover { background: var(--surface-3); }
.overview-edit-toolbar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  background: var(--surface-2);
  border-top: 1px solid var(--accent-dim);
  margin-top: 8px;
  z-index: 50;
}
.overview-toolbar-right { display: flex; gap: 8px; }
.overview-toolbar-btn {
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  cursor: pointer;
  border: 1px solid var(--accent-dim);
  transition: background 0.15s, border-color 0.15s;
}
.overview-toolbar-reset { background: transparent; color: var(--text-muted); }
.overview-toolbar-reset:hover { border-color: #e74c3c; color: #e74c3c; }
.overview-toolbar-cancel { background: transparent; color: var(--accent); border-color: var(--accent); }
.overview-toolbar-cancel:hover { background: rgba(127, 255, 212, 0.07); }
.overview-toolbar-save { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 600; }
.overview-toolbar-save:hover { opacity: 0.9; }
.overview-toolbar-save:disabled { opacity: 0.5; cursor: not-allowed; }

/* Sidebar Sections nav */
.sidebar-sections-block {
  padding: 8px 8px 4px;
  border-bottom: 1px solid var(--accent-dim);
  margin-bottom: 4px;
}
.sidebar-sections-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0 6px 4px;
}
.sidebar-section-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, color 0.1s;
}
.sidebar-section-item { position: relative; }
.sidebar-section-item:hover { background: var(--surface-3); color: var(--text); }
.sidebar-section-item.active { background: var(--surface-3); color: var(--text); font-weight: 600; }
.sidebar-section-item svg { opacity: 0.7; flex-shrink: 0; }
.app-pending-badge {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: #f04747; color: #fff; font-size: 0.68rem; font-weight: 700;
  min-width: 18px; height: 18px; line-height: 18px; text-align: center;
  border-radius: 9px; padding: 0 5px; box-sizing: border-box;
}

/* -- Responsive ---- */
@media (max-width: 900px) {
  .overview-body { grid-template-columns: 1fr; }
  .overview-about { border-left: none; border-top: 1px solid var(--accent-dim); }
}
@media (max-width: 700px) {
  .overview-size-wide,
  .overview-size-full { grid-column: span 1; }
  .overview-hero { height: auto; flex: none; }
}

/* ── Tournament cards ──────────────────────────────────── */
.tournament-card, .form-card {
  padding: 12px 14px;
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}
.tournament-card-header, .form-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: var(--text);
}
.tournament-status, .form-status-badge {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.tournament-card-meta, .form-card-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.form-card-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.tournament-card-actions, .form-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

/* ── Form field builder ──────────────────────────────── */
.form-field-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.form-field-label-input {
  flex: 1;
  min-width: 0;
}
.form-field-type-select {
  width: 100px;
  flex-shrink: 0;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 0.82rem;
}
.form-field-options-input {
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
}

/* ── Bracket display ─────────────────────────────────── */
.bracket-section-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.bracket-teams { display: flex; flex-direction: column; gap: 4px; }
.bracket-team {
  padding: 6px 10px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text);
}
.bracket-rounds { display: flex; gap: 16px; overflow-x: auto; padding: 8px 0; }
.bracket-round { min-width: 180px; }
.bracket-round-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.bracket-match {
  padding: 8px 10px;
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  font-size: 0.82rem;
}
.bracket-match-team { padding: 3px 0; color: var(--text); }
.bracket-match-team.winner { color: var(--accent); font-weight: 600; }
.bracket-match-vs { font-size: 0.65rem; color: var(--text-muted); text-align: center; }

/* ── Form responses ──────────────────────────────────── */
.form-fill-section {
  padding: 12px 14px;
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}
.form-your-response {
  padding: 12px 14px;
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}
.form-response-card {
  padding: 10px 12px;
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.form-response-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text);
  margin-bottom: 4px;
}

#sidebar-footer {
  position: fixed;
  bottom: 8px;
  left: 8px;
  width: calc(72px + 240px - 16px);
  padding: 10px 12px;
  height: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(30,30,30,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  z-index: 20;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
#dm-sidebar-footer {
  padding: 0 8px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  flex-shrink: 0;
}

.user-avatar-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-3);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
}
.user-avatar-sm img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.user-avatar-sm.speaking {
  box-shadow: 0 0 0 2px #43b581, 0 0 8px rgba(67,181,129,0.5);
}

#footer-username {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}
.footer-status-text {
  font-size: 0.7rem;
  color: #4ade80;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}
.footer-status-text .status-dot-inline {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
}
.footer-status-text.idle .status-dot-inline { background: #facc15; }
.footer-status-text.idle { color: #facc15; }
.footer-status-text.dnd .status-dot-inline { background: #f87171; }
.footer-status-text.dnd { color: #f87171; }
.footer-status-text.invisible .status-dot-inline { background: #6b7280; }
.footer-status-text.invisible { color: #6b7280; }

/* Footer voice buttons (mic + speaker with dropdown arrows) */
.footer-voice-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.footer-voice-btn-wrap {
  display: flex;
  align-items: center;
  position: relative;
}
.footer-voice-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.footer-voice-btn svg { width: 18px; height: 18px; }
.footer-voice-btn:hover { color: var(--text); background: rgba(127,255,212,0.1); }
.footer-voice-btn.muted {
  color: #f87171;
}
.footer-voice-btn.muted:hover { color: #ff4d6a; }
.footer-voice-dropdown {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.65rem;
  padding: 0 3px;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
}
.footer-voice-btn-wrap:hover .footer-voice-dropdown { opacity: 1; }
.footer-voice-dropdown:hover { color: var(--text); }

/* ── Main Content ─────────────────────────────────── */
#main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--chat-bg, var(--surface-2));
  min-width: 0;
}

#channel-topbar {
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--accent-dim);
  flex-shrink: 0;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--surface-2);
}

#channel-topbar-name   { font-weight: bold; color: var(--accent); }
#channel-topbar-name::before { content: '# '; }

#channel-topbar-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-left: 4px;
  border-left: 1px solid var(--accent-dim);
  padding-left: 10px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  transition: color 0.2s, background 0.2s;
  flex-shrink: 0;
  margin-left: auto;
}

.topbar-btn:hover   { color: var(--accent); background: rgba(127,255,212,0.08); }
.topbar-btn.active  { color: var(--accent); }

#message-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Jump to Present Bar ──────────────────────────── */
.jump-to-present {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 20px;
  background: var(--accent, #5865f2);
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.2s;
  opacity: 0.95;
  flex-shrink: 0;
}
.jump-to-present:hover { opacity: 1; }
.jump-to-present span { flex: 1; }
.jump-to-present button {
  background: none;
  color: #fff;
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}

.msg-empty {
  margin: auto;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ── Message ──────────────────────────────────────── */
.message {
  display: flex;
  gap: 12px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
  position: relative;
}

.message:hover { background: rgba(127,255,212,0.03); }

.msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1.5px solid var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.msg-body { flex: 1; min-width: 0; }

.msg-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}

.msg-username { font-size: 0.9rem; font-weight: bold; color: var(--accent); }
.msg-time     { font-size: 0.7rem; color: var(--text-muted); }
.msg-e2e-lock { color: var(--accent); opacity: 0.5; margin-left: 4px; vertical-align: middle; display: inline-flex; }
.e2e-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.05em;
  color: var(--accent); opacity: 0.6;
  background: rgba(var(--accent-rgb, 0,255,180), 0.08);
  padding: 1px 6px; border-radius: 8px; margin-left: 6px;
  cursor: default;
}

.msg-content {
  font-size: 0.92rem;
  color: var(--text);
  word-break: break-word;
  white-space: pre-wrap;
}

.msg-edited {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-left: 5px;
  font-style: italic;
}

/* DM read receipt indicators */
.msg-receipt {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: 6px;
  letter-spacing: -2px;
}
.msg-receipt.read {
  color: var(--accent);
}

/* Deleted message placeholder */
.message-deleted {
  opacity: 0.6;
}
.msg-deleted {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.82rem;
  padding: 6px 0;
  margin: 0;
}

/* Inline edit textarea */
.msg-edit-area {
  width: 100%;
  background: var(--surface-3);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 10px;
  font-size: 0.92rem;
  font-family: sans-serif;
  resize: none;
  outline: none;
  box-shadow: var(--accent-glow);
  max-height: 200px;
  overflow-y: auto;
  margin-top: 4px;
}

.msg-edit-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.msg-edit-actions button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

.msg-edit-save   { color: var(--accent); border: 1px solid var(--accent-dim) !important; }
.msg-edit-cancel { color: var(--accent); border: 1px solid var(--accent-dim) !important; }
.msg-edit-save:hover   { background: rgba(127,255,212,0.1) !important; }
.msg-edit-cancel:hover { background: rgba(127,255,212,0.1) !important; }

/* Message action buttons (hover toolbar) */
.msg-actions {
  display: none;
  position: absolute;
  top: -16px;
  right: 16px;
  gap: 2px;
  background: var(--surface-1);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 2px 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 10;
}

.message:hover .msg-actions { display: flex; }
.message-deleted:hover .msg-actions { display: none; }

.msg-action-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--text-muted);
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}

.msg-action-btn:hover         { background: rgba(127,255,212,0.1); color: var(--accent); }
.msg-action-btn.delete:hover  { background: rgba(255,77,106,0.12); color: #ff4d6a; }

/* ── Typing indicator ──────────────────────────────── */
#typing-indicator {
  height: 20px;
  padding: 0 28px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  flex-shrink: 0;
}
.typing-name { font-weight: 600; font-style: normal; }

/* ── Message input bar ─────────────────────────────── */
#message-input-bar {
  padding: 10px 16px 14px;
  background: var(--surface-2);
  flex-shrink: 0;
}

#message-input {
  width: 100%;
  background: var(--surface-3);
  border: 1.5px solid var(--accent-dim);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 11px 16px;
  font-size: 0.95rem;
  font-family: sans-serif;
  outline: none;
  resize: none;
  max-height: 160px;
  overflow-y: auto;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#message-input:focus { border-color: var(--accent); box-shadow: var(--accent-glow); }
#message-input::placeholder { color: var(--text-muted); }

/* ── Empty state ───────────────────────────────────── */
#empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 2rem;
}

#empty-state h2 {
  font-size: 1.2rem;
  -webkit-text-stroke: 1px var(--accent);
  color: transparent;
  text-shadow: var(--accent-glow);
}

/* ── Members Panel ─────────────────────────────────── */
#members-panel {
  width: 220px;
  flex-shrink: 0;
  background: var(--surface-1);
  border-left: 1px solid var(--accent-dim);
  display: flex;
  flex-direction: column;
  transition: width 0.2s, opacity 0.2s;
  overflow: hidden;
}

#members-panel.panel-hidden {
  width: 0;
  opacity: 0;
  border-left: none;
}

#members-panel-header {
  padding: 0 14px;
  height: 52px;
  display: flex;
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--accent-dim);
  flex-shrink: 0;
}

#members-list-container {
  flex: 1;
  overflow-y: auto;
  padding: 12px 8px;
}

.members-section-label {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 8px 6px;
}

.member-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  cursor: default;
}

.member-item:hover { background: rgba(127,255,212,0.05); }

.member-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1.5px solid var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--accent);
  flex-shrink: 0;
  position: relative;
}

.member-avatar.online  { border-color: #4ade80; }
.member-avatar::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--surface-1);
  background: var(--text-muted);
  opacity: 0;
}

.member-avatar.online::after { background: #4ade80; opacity: 1; }

.member-name {
  font-size: 0.85rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-item.offline .member-name { color: var(--text-muted); }

/* ── Modal ─────────────────────────────────────────── */
dialog {
  background: var(--surface-1);
  border: 1.5px solid var(--accent-dim);
  border-radius: var(--radius-lg);
  box-shadow: var(--accent-glow);
  color: var(--text);
  padding: 2rem;
  width: 380px;
  max-width: 95vw;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  margin: auto;
}

dialog::backdrop { background: rgba(0,0,0,0.7); }

#dialog-confirm {
  width: 340px;
  text-align: center;
}
#dialog-confirm .dialog-actions {
  justify-content: center;
}

#dialog-create-channel {
  width: 440px;
}

#dialog-role-edit {
  width: 520px;
  max-height: calc(100vh - 60px);
}

#dialog-server-settings {
  width: 520px;
  max-height: calc(100vh - 60px);
}

#dialog-server-settings #settings-tabs {
  flex-wrap: wrap;
}

/* Ensure tournament & form tab content is scrollable */
#stab-tournaments,
#stab-forms {
  max-height: 50vh;
  overflow-y: auto;
}

#confirm-message {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

dialog h2 {
  color: var(--accent);
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
  letter-spacing: 0.05em;
}

.dialog-field { margin-bottom: 1rem; }

.dialog-field label:not(.toggle-row) {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.dialog-field input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.dialog-field input:focus { border-color: var(--accent); box-shadow: var(--accent-glow); }

.dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

.btn-cancel, .btn-confirm {
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  cursor: pointer;
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent);
  box-shadow: var(--accent-glow);
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s, background 0.2s;
}

.btn-confirm:hover, .btn-cancel:hover { box-shadow: var(--accent-glow); background: rgba(127,255,212,0.07); }

.btn-secondary {
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  cursor: pointer;
  border: 1px solid var(--card-border);
  background: var(--surface-3);
  color: var(--label);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.btn-secondary:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--text);
}

.btn-delete {
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  cursor: pointer;
  border: 1.5px solid #ff4d6a;
  background: transparent;
  color: #ff4d6a;
  transition: background 0.2s, box-shadow 0.2s;
}
.btn-delete:hover { background: rgba(255,77,106,0.1); box-shadow: 0 0 8px rgba(255,77,106,0.4); }

/* ── Dialog tabs ───────────────────────────────────── */
#server-dialog-tabs, #settings-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--accent-dim);
  padding-bottom: 0.5rem;
}

.srv-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  transition: color 0.2s, background 0.2s;
}

.srv-tab.active { color: var(--accent); background: rgba(127,255,212,0.08); }
.srv-tab:hover  { color: var(--text); background: rgba(255,255,255,0.04); }

/* ── Icon upload row ───────────────────────────────── */
.upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-preview {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1.5px solid var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
}

.icon-preview img { width: 100%; height: 100%; object-fit: cover; }

.upload-btn {
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-dim);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  flex-shrink: 0;
}

.upload-btn:hover { border-color: var(--accent); background: rgba(127,255,212,0.06); }

.upload-file-name {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* ── Invite list in settings ───────────────────────── */
.invite-list {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.invite-empty { font-size: 0.82rem; color: var(--text-muted); text-align: center; padding: 1rem 0; }

.invite-row {
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.invite-code {
  font-family: monospace;
  font-size: 0.88rem;
  color: var(--accent);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invite-meta { font-size: 0.7rem; color: var(--text-muted); }

.invite-copy-btn {
  background: transparent;
  border: 1px solid var(--accent-dim);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 3px 7px;
  transition: border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}

.invite-copy-btn:hover   { border-color: var(--accent); color: var(--accent); }
.invite-copy-btn.copied  { border-color: #4ade80; color: #4ade80; }

.invite-revoke-btn {
  background: transparent;
  border: none;
  color: #ff4d6a;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 3px;
  border-radius: 4px;
  transition: background 0.15s;
  flex-shrink: 0;
}
.invite-revoke-btn:hover { background: rgba(255,77,106,0.12); }

/* ── Invite preview box (join dialog) ──────────────── */
.invite-preview-box {
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

#invite-server-name { font-size: 0.9rem; color: var(--accent); flex: 1; }
.invite-member-count { font-size: 0.75rem; color: var(--text-muted); }

/* ── Context menus ─────────────────────────────────── */
#channel-context-menu,
#message-context-menu,
#dm-context-menu,
#dm-sidebar-context-menu {
  position: fixed;
  background: var(--surface-1);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  box-shadow: var(--accent-glow);
  z-index: 1000;
  overflow: hidden;
  min-width: 140px;
}

#channel-context-menu button,
#message-context-menu button,
#dm-context-menu button,
#dm-sidebar-context-menu button {
  display: block;
  width: 100%;
  padding: 9px 14px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

#channel-context-menu button:hover,
#message-context-menu button:hover,
#dm-context-menu button:hover,
#dm-sidebar-context-menu button:hover { background: rgba(127,255,212,0.08); color: var(--accent); }

#channel-context-menu .ctx-danger:hover,
#message-context-menu .ctx-danger:hover,
#dm-context-menu .ctx-danger:hover,
#dm-sidebar-context-menu .ctx-danger:hover { background: rgba(255,77,106,0.1); color: #ff4d6a; }

/* ── Voice area ────────────────────────────────────── */
.voice-member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
  cursor: pointer;
  min-width: 0;
}
.voice-member-card:hover { background: var(--surface-3); }

.voice-member-name {
  font-size: 0.72rem;
  color: var(--text);
  text-align: center;
  word-break: break-word;
  max-width: 100%;
  line-height: 1.2;
}

.voice-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 2px solid var(--accent);
  box-shadow: var(--accent-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--accent);
  flex-shrink: 0;
}

.voice-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.voice-avatar.speaking {
  border-color: #43b581;
  box-shadow: 0 0 12px rgba(67,181,129,0.7), 0 0 24px rgba(67,181,129,0.4);
  animation: voice-pulse 0.8s ease-in-out infinite alternate;
}
@keyframes voice-pulse {
  from { box-shadow: 0 0 8px rgba(67,181,129,0.5), 0 0 16px rgba(67,181,129,0.25); }
  to   { box-shadow: 0 0 14px rgba(67,181,129,0.8), 0 0 28px rgba(67,181,129,0.45); }
}
.voice-avatar.muted {
  border-color: #ed4245;
  box-shadow: 0 0 10px rgba(237,66,69,0.5), 0 0 20px rgba(237,66,69,0.25);
  animation: none;
}
.voice-avatar.deafened {
  border-color: #555;
  box-shadow: none;
  opacity: 0.4;
  filter: grayscale(0.8);
  animation: none;
}
/* Deafened overrides muted (deafened implies muted) */
.voice-avatar.muted.deafened {
  border-color: #555;
  box-shadow: none;
  opacity: 0.4;
  filter: grayscale(0.8);
}
.voice-member-name { font-size: 0.78rem; color: var(--text-muted); }

.voice-leave-btn {
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-md);
  border: 1.5px solid #ff4d6a;
  background: transparent;
  color: #ff4d6a;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s, box-shadow 0.2s;
}
.voice-leave-btn:hover { background: rgba(255,77,106,0.12); box-shadow: 0 0 8px rgba(255,77,106,0.3); }

/* ── Voice users sidebar sub-list ──────────────────── */
.voice-users-row {
  padding: 2px 12px 4px 32px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.voice-user-row-item {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.voice-user-row-item:hover {
  background: var(--surface-3);
  color: var(--text);
}
.voice-user-row-item.dragging { opacity: 0.4; }
.voice-user-row-item[draggable="true"] { cursor: grab; }
.voice-user-row-item[draggable="true"]:active { cursor: grabbing; }
.voice-user-row-item.speaking { color: #43b581; font-weight: 600; }
.voice-user-row-item.speaking::before { color: #43b581; }
.voice-drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); }

/* Voice rooms in sidebar */
.voice-rooms-list {
  padding: 2px 0 2px 24px;
}
.voice-room-sidebar-item {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s, color 0.15s;
}
.voice-room-sidebar-item:hover {
  background: var(--surface-3);
  color: var(--text);
}
.voice-room-sidebar-limit {
  margin-left: auto;
  font-size: 0.65rem;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Voice room context menu */
#room-context-menu,
.room-ctx-menu {
  position: fixed;
  z-index: 9999;
  background: var(--surface-1);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  padding: 4px 0;
  min-width: 160px;
}
#room-context-menu button,
.room-ctx-menu .context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 12px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.8rem;
  cursor: pointer;
  text-align: left;
}
#room-context-menu button:hover,
.room-ctx-menu .context-menu-item:hover { background: var(--surface-3); }
#room-context-menu button.ctx-danger,
.room-ctx-menu .context-menu-item.danger { color: #f44336; }
#room-context-menu button.ctx-danger:hover,
.room-ctx-menu .context-menu-item.danger:hover { background: rgba(244,67,54,0.1); }
#room-context-menu button .icon,
.room-ctx-menu .context-menu-item .icon { width: 14px; height: 14px; flex-shrink: 0; }

.voice-user-row-item::before { content: '◉'; font-size: 0.5rem; color: var(--accent); }

/* ── Voice sidebar room labels ─────────────────────── */
.voice-user-room-label {
  font-size: 0.65rem;
  font-family: var(--label-font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 4px 0 1px;
  opacity: 0.7;
}
.voice-user-room-label .icon { width: 10px; height: 10px; vertical-align: middle; }

/* ── Voice Room Sections (main panel) ─────────────── */
#voice-rooms-container {
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

/* Tree node: holds a room card + optional children row below */
.voice-tree-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
}

/* Children row: siblings sit side by side */
.voice-tree-children {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  justify-content: center;
  margin-top: 24px;
  position: relative;
  width: 100%;
}

/* Guide line: vertical stem from parent card down to horizontal bar */
.voice-tree-children::before {
  content: '';
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 24px;
  background: var(--border);
}

/* Each child node gets a vertical line dropping into its card */
.voice-tree-child {
  position: relative;
  flex: 1 1 160px;
  max-width: 420px;
  min-width: 140px;
  padding-top: 20px;
}

/* Vertical drop line from horizontal bar into child card */
.voice-tree-child::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
  background: var(--border);
}

/* Horizontal bar connecting sibling drop lines
   Uses a real element injected by JS (.voice-tree-hbar) for accurate positioning */
.voice-tree-hbar {
  position: absolute;
  top: 0;
  height: 2px;
  background: var(--border);
  pointer-events: none;
}

.voice-room-section {
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  overflow: hidden;
  width: 100%;
}

/* ── Responsive: stack children on narrow screens ─── */
@media (max-width: 600px) {
  .voice-tree-children { flex-direction: column; align-items: center; gap: 0; }
  .voice-tree-child { max-width: 100%; min-width: 0; flex: none; width: 90%; }
  .voice-tree-hbar { display: none; }
  .voice-tree-children::before { display: none; }
  .voice-tree-child::before { height: 12px; top: 0; }
  .voice-tree-child { padding-top: 12px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .voice-tree-child { flex: 1 1 140px; min-width: 120px; max-width: 300px; }
}
@media (min-width: 901px) {
  .voice-tree-child { flex: 1 1 180px; min-width: 160px; max-width: 420px; }
}

.voice-room-section.current-room {
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(127,255,212,0.1);
}

.voice-room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--accent-dim);
}

.voice-room-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  flex: 1;
}

.voice-room-header-left .icon { width: 16px; height: 16px; opacity: 0.6; flex-shrink: 0; }

.voice-room-name {
  font-weight: 600;
  font-family: var(--ui-font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-room-count {
  color: var(--text-muted);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.voice-room-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 8px;
}

.voice-room-join-btn {
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-family: var(--ui-font);
  font-size: 0.72rem;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.voice-room-join-btn:hover {
  background: var(--accent);
  color: var(--bg);
}

.voice-room-edit-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s;
}
.voice-room-header:hover .voice-room-edit-btn { opacity: 1; }
.voice-room-edit-btn:hover { color: var(--accent); }
.voice-room-edit-btn.danger:hover { color: #ff4d6a; }
.voice-room-chat-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  padding: 2px; opacity: 0.6; transition: opacity .15s, color .15s;
}
.voice-room-chat-btn:hover { opacity: 1; color: var(--accent); }
.voice-room-chat-btn .icon { width: 14px; height: 14px; }
.voice-room-edit-btn .icon { width: 14px; height: 14px; }

.voice-room-members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  padding: 10px 12px;
  min-height: 36px;
}

.voice-room-members:empty::after {
  content: 'No users';
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.5;
  font-style: italic;
}

/* ── Nested voice room tree layout (handled by .voice-tree-* classes) ── */

/* ── Speak down/up icons in member cards ────────── */
.icon-speak-down .icon,
.icon-speak-up .icon {
  width: 14px; height: 14px;
}
.icon-speak-down { color: var(--accent); }
.icon-speak-up   { color: #60a5fa; }

/* ── Speak down/up button active states ─────────── */
.voice-ctrl-btn#btn-voice-speak-down.active { color: var(--accent); background: rgba(127,255,212,0.12); border-color: var(--accent-dim); }
.voice-ctrl-btn#btn-voice-speak-up.active   { color: #60a5fa; background: rgba(96,165,250,0.12); border-color: rgba(96,165,250,0.3); }

/* ── Keybind recorder popover ───────────────────── */
.keybind-popover {
  position: fixed;
  z-index: 9999;
  background: var(--surface-1);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  padding: 10px 12px;
  width: 220px;
}
.kbp-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
  font-size: 0.8rem;
}
.kbp-header strong { font-size: 0.82rem; }
.kbp-target { color: var(--text-muted); font-size: 0.72rem; }
.keybind-display-sm {
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  text-align: center;
  font-size: 0.85rem;
  font-family: monospace;
  color: var(--accent);
  margin-bottom: 8px;
}
.kbp-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.kbp-actions .btn-sm { font-size: 0.7rem; padding: 3px 10px; }
.keybind-display-sm { cursor: pointer; transition: border-color 0.15s; }
.keybind-display-sm.kbp-active { border-color: var(--accent); }

/* ── Voice topbar actions ─────────────────────────── */
#voice-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--accent-dim);
}

#voice-topbar-actions {
  display: flex;
  gap: 6px;
}

.voice-topbar-btn {
  background: none;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.voice-topbar-btn:hover { color: var(--accent); border-color: var(--accent); }
.voice-topbar-btn .icon { width: 16px; height: 16px; }

/* ── Broadcast control button styling ─────────────── */
#btn-voice-broadcast-ctrl .icon { width: 16px; height: 16px; }
#btn-voice-broadcast-ctrl.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(127,255,212,0.12);
  animation: broadcast-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes broadcast-pulse {
  from { box-shadow: none; }
  to   { box-shadow: 0 0 8px rgba(127,255,212,0.4); }
}

/* ── Small icon size utility ─────────────────────── */
.icon-xs { width: 12px; height: 12px; }
.icon-sm { width: 16px; height: 16px; }

/* ── Misc ──────────────────────────────────────────── */
.dialog-error {
  font-size: 0.8rem;
  color: #ff6b8a;
  min-height: 1rem;
  margin-top: 0.25rem;
}

/* ── Attach button in input bar ────────────────────── */
#message-input-bar, #dm-input-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.input-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 2px;
}

.attach-btn {
  font-size: 1.15rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  flex-shrink: 0;
  line-height: 1;
  transition: color 0.2s, background 0.2s;
  user-select: none;
}

.attach-btn:hover { color: var(--accent); background: var(--accent-dim); }

/* ── Attachment preview bar ────────────────────────── */
#attachment-preview-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 4px;
  background: var(--surface-2);
}

#attachment-preview-inner {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  min-width: 0;
}

#attachment-preview-inner img {
  max-height: 60px;
  max-width: 80px;
  border-radius: 4px;
  object-fit: cover;
}

.attach-preview-name {
  font-size: 0.82rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.attach-preview-size {
  font-size: 0.72rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

#btn-remove-attachment {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: color 0.2s, background 0.2s;
}

#btn-remove-attachment:hover { color: #ff4d6a; background: rgba(255,77,106,0.1); }

/* ── Message attachments ───────────────────────────── */
.msg-attachment { margin-top: 6px; }

.msg-attachment-img {
  max-width: min(400px, 100%);
  max-height: 300px;
  border-radius: var(--radius-sm);
  display: block;
  cursor: pointer;
  border: 1px solid var(--accent-dim);
  transition: opacity 0.2s;
}
.msg-attachment-img:hover { opacity: 0.9; }

.msg-attachment-video {
  max-width: min(400px, 100%);
  max-height: 300px;
  border-radius: var(--radius-sm);
  display: block;
  border: 1px solid var(--accent-dim);
}

.msg-attachment-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  transition: border-color 0.2s, background 0.2s;
}
.msg-attachment-file:hover { border-color: var(--accent); background: rgba(127,255,212,0.05); }
.msg-attachment-file-icon { font-size: 1.1rem; }
.msg-attachment-file-info { display: flex; flex-direction: column; min-width: 0; }
.msg-attachment-file-name { color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.msg-attachment-file-size { font-size: 0.72rem; color: var(--text-muted); }

/* ── Announcement channel styles ────────────────────── */
.announcement-channel .message {
  border-left: 3px solid var(--accent);
  padding-left: 14px;
  margin-bottom: 12px;
  background: rgba(127,255,212,0.03);
  border-radius: var(--radius-sm);
  padding-top: 10px;
  padding-bottom: 10px;
}
.announcement-channel .msg-content {
  font-size: 0.95rem;
}
.announce-readonly-bar {
  padding: 10px 16px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--surface-2);
  border-top: 1px solid var(--accent-dim);
  flex-shrink: 0;
}

/* ── Announcement rich compose ─────────────────────── */
#announcement-compose {
  flex-direction: column;
  border-top: 1px solid var(--accent-dim);
  background: var(--surface-2);
  flex-shrink: 0;
}
#announcement-compose .ql-toolbar {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid var(--accent-dim);
}
#announcement-compose .ql-container {
  border: none;
  min-height: 80px;
  max-height: 260px;
  overflow-y: auto;
}
#announcement-compose .ql-editor {
  min-height: 80px;
}
.announcement-compose-footer {
  display: flex;
  justify-content: flex-end;
  padding: 8px 12px;
  border-top: 1px solid var(--accent-dim);
}

/* ── User settings rename hint ─────────────────────── */
.rename-limit-hint {
  font-size: 0.73rem;
  color: var(--text-muted);
  margin-top: 4px;
  min-height: 1rem;
}

.rename-limit-hint.warn { color: #f6c90e; }
.rename-limit-hint.err  { color: #ff6b8a; }

/* ── Bio textarea ──────────────────────────────────── */
.dialog-field textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  font-family: sans-serif;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.dialog-field textarea:focus { border-color: var(--accent); box-shadow: var(--accent-glow); }
.dialog-field textarea::placeholder { color: var(--text-muted); }

/* ── Color wheel (user name colour picker) ──────────── */
#color-wheel-wrap {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}

#user-color-wheel {
  border-radius: 50%;
  cursor: crosshair;
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  display: block;
}

#color-wheel-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding-top: 6px;
}

.color-wheel-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-wheel-label {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}

#user-color-brightness {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, #111 0%, var(--accent) 100%);
  outline: none;
  cursor: pointer;
  border: none;
}
#user-color-brightness::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg);
  box-shadow: 0 0 4px rgba(127,255,212,0.5);
}
#user-color-brightness::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg);
}

.color-wheel-hex-hash {
  font-size: 0.9rem;
  color: var(--text-muted);
  flex-shrink: 0;
  font-family: monospace;
}

.color-wheel-hex-input {
  flex: 1;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 5px 8px;
  font-size: 0.82rem;
  font-family: monospace;
  outline: none;
  letter-spacing: 0.05em;
  transition: border-color 0.2s;
}
.color-wheel-hex-input:focus { border-color: var(--accent); }

.color-wheel-reset {
  background: transparent;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.74rem;
  cursor: pointer;
  padding: 5px 10px;
  transition: border-color 0.15s, color 0.15s;
  text-align: left;
}
.color-wheel-reset:hover { border-color: #ff4d6a; color: #ff4d6a; }

/* Section label inside dialog fields */
.color-wheel-section-label {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Gradient preset styles removed (presets removed from UI) */

/* Role color swatches (still swatch-based, kept for role edit dialog) */
#role-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 30px);
  gap: 6px;
  margin-bottom: 10px;
}

.color-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: border-color 0.15s, transform 0.15s;
  position: relative;
}
.color-swatch:hover   { transform: scale(1.15); }
.color-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }

.swatch-check {
  font-size: 0.72rem;
  color: #fff;
  text-shadow: 0 0 3px rgba(0,0,0,0.8);
  display: none;
}
.color-swatch.selected .swatch-check { display: block; }

/* Colour preview row (below wheel) */
#color-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  margin-top: 4px;
}

#color-preview-label { font-size: 0.75rem; color: var(--text-muted); flex-shrink: 0; }

#color-preview-name {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--accent);
}

/* ── Role badges ───────────────────────────────────── */
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 4px;
  opacity: 0.9;
}

.msg-roles {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  vertical-align: middle;
}

.member-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 2px;
}

.member-name-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── Profile Popup ─────────────────────────────────── */
/* ── Profile Popup (Discord-style) ───────────────── */
#profile-popup {
  position: fixed;
  z-index: 2000;
  background: var(--surface-1);
  border: 1.5px solid var(--accent-dim);
  border-radius: var(--radius-lg);
  box-shadow: var(--accent-glow), 0 8px 32px rgba(0,0,0,0.5);
  width: 300px;
  max-width: 90vw;
  overflow: hidden;
}

#profile-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.15s;
  line-height: 1;
}
#profile-popup-close:hover { background: rgba(0,0,0,0.75); }

#profile-popup-banner {
  height: 60px;
  background: linear-gradient(135deg, var(--accent-dim), var(--surface-3));
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}

.profile-popup-avatar-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12px;
  margin-top: -36px;
  position: relative;
  z-index: 2;
}

.profile-popup-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 4px solid var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
}
.profile-popup-avatar img { width: 100%; height: 100%; object-fit: cover; }

.profile-popup-badges {
  display: flex;
  gap: 4px;
  padding: 4px 12px 0;
  align-self: flex-start;
}

.profile-popup-body {
  padding: 4px 12px 12px;
  text-align: left;
}

.profile-popup-username {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
  line-height: 1.3;
}

.profile-popup-pronouns {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 1px;
}

.profile-popup-sep {
  height: 1px;
  background: var(--accent-dim);
  margin: 8px 0;
}

.profile-popup-bio {
  font-size: 0.82rem;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 4px;
}

.profile-popup-section { margin-top: 8px; }
.profile-popup-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.profile-popup-joined {
  font-size: 0.75rem;
  color: var(--text);
}

.profile-popup-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.profile-popup-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.profile-popup-actions .popup-action-btn {
  flex: 1;
  padding: 6px 8px;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-dim);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.profile-popup-actions .popup-action-btn:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.profile-popup-actions .popup-action-btn.primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 600;
}
.profile-popup-actions .popup-action-btn.primary:hover {
  opacity: 0.9;
}

.profile-popup-snowflake {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 6px;
  cursor: pointer;
}
.profile-popup-snowflake:hover { color: var(--text); }

.profile-popup-last-online {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── User Panel Popup (bottom-left, Discord-style) ── */
#user-panel-popup {
  position: fixed;
  z-index: 2500;
  background: var(--surface-1);
  border: 1.5px solid var(--accent-dim);
  border-radius: var(--radius-lg);
  box-shadow: var(--accent-glow), 0 8px 32px rgba(0,0,0,0.5);
  width: 300px;
  overflow: visible;
  bottom: 60px;
  left: 72px;
}

#user-panel-banner {
  height: 100px;
  background: linear-gradient(135deg, var(--accent-dim), var(--surface-3));
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}

.user-panel-avatar-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12px;
  margin-top: -36px;
  position: relative;
  z-index: 2;
}

.user-panel-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 4px solid var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--accent);
  overflow: hidden;
}
.user-panel-avatar img { width: 100%; height: 100%; object-fit: cover; }

.user-panel-body {
  padding: 4px 12px 12px;
  text-align: left;
}

.user-panel-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 4px;
}

.user-panel-sep {
  height: 1px;
  background: var(--accent-dim);
  margin: 8px 0;
}

.user-panel-section-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.user-panel-statuses {
  padding: 0 4px;
}

/* Master status row — single row showing current status */
.status-master {
  padding: 6px 4px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.12s;
  position: relative;
}
.status-master:hover { background: var(--surface-3); }

/* Status options inside L2 flyout */
.user-panel-statuses .status-picker-option {
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.12s;
  position: relative;
}
.user-panel-statuses .status-picker-option:hover { background: var(--surface-3); }
.user-panel-statuses .status-picker-option.active { background: var(--accent-dim); color: var(--accent); }

.submenu-arrow { margin-left: auto; color: var(--text-muted); font-size: 1rem; flex-shrink: 0; }

/* Flyout submenu (both L2 and L3) */
.status-submenu {
  display: none;
  position: absolute;
  left: calc(100% + 4px);
  bottom: 0;
  background: var(--surface-1);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  padding: 4px;
  min-width: 160px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  z-index: 10;
}
/* L2/L3 shown via JS hover-intent (.visible class) */
.status-master.has-submenu > .status-submenu.visible { display: block; }
.status-picker-option.has-submenu > .status-submenu.visible { display: block; }

.status-submenu-header {
  padding: 4px 10px 6px;
  font-size: 0.68rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.status-duration {
  padding: 5px 10px;
  font-size: 0.78rem;
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.status-duration:hover { background: var(--surface-3); }

.user-panel-custom-status input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 6px 8px;
  font-size: 0.8rem;
  outline: none;
}
.user-panel-custom-status input:focus { border-color: var(--accent); }

.user-panel-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-panel-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.12s;
  text-align: left;
}
.user-panel-action-btn:hover { background: var(--surface-3); }
.user-panel-action-btn svg { opacity: 0.7; }

/* ── Clickable usernames ───────────────────────────── */
.msg-username, .member-name {
  cursor: pointer;
}
.msg-username:hover { text-decoration: underline; }

/* ── Roles list in server settings ─────────────────── */
#roles-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  margin-bottom: 4px;
}

.role-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
}

.role-row-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.role-row-name {
  flex: 1;
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 500;
}

.role-row-btn {
  background: transparent;
  border: 1px solid var(--accent-dim);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 3px 8px;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.role-row-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Permission checkboxes ─────────────────────────── */
.perm-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}

.perm-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.perm-row:hover { background: rgba(127,255,212,0.06); }

.perm-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Text column: label on top, description below */
.perm-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.perm-row-label {
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
}

.perm-row-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ── Guilded-style Roles Panel (split layout) ──────── */
/* When Roles panel is active, remove content padding so the split layout fills the area */
.settings-content:has(.sp-roles-panel.active) { padding: 0; }
.settings-content > .sp-roles-panel { max-width: none; }
.sp-roles-panel { padding: 0 !important; overflow: hidden; height: 100%; }
.sp-roles-layout {
  display: flex;
  height: 100%;
  min-height: 0;
}

/* Left sidebar — role list */
.sp-roles-sidebar {
  width: 200px;
  min-width: 160px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 20px 0;
  overflow-y: auto;
  background: var(--bg);
}
.sp-roles-sidebar h3 {
  font-family: var(--ui-font);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 16px 12px;
}
.sp-roles-add-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 0 16px 12px;
  padding: 8px 12px;
  background: none;
  border: 1px dashed var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-family: var(--ui-font);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}
.sp-roles-add-btn:hover { border-color: var(--accent); color: var(--accent); }

.sp-roles-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px;
}
.sp-role-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--ui-font);
}
.sp-role-list-item:hover { background: var(--surface-1); }
.sp-role-list-item.active { background: var(--surface-2); }
.sp-role-list-item-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--bg);
  font-weight: 700;
}
.sp-role-list-item-icon img { width: 100%; height: 100%; object-fit: cover; }
.sp-role-list-item-name {
  font-size: 0.85rem;
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-roles-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  padding: 12px 16px 0;
  line-height: 1.4;
}

/* Right editor */
.sp-roles-editor {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  min-width: 0;
}
.sp-roles-editor-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0 48px;
}
.sp-roles-editor-top > div {
  flex: 1 1 300px;
  min-width: 280px;
}
.sp-roles-editor-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.sp-role-field {
  margin-bottom: 28px;
}
.sp-role-field > label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.sp-role-field input[type="text"] {
  width: 100%;
}

/* Color tabs */
.sp-role-color-tabs {
  display: inline-flex;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 12px;
}
.sp-role-color-tab {
  padding: 6px 16px;
  font-size: 0.8rem;
  font-family: var(--ui-font);
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.sp-role-color-tab.active {
  background: var(--accent);
  color: var(--bg);
}
.sp-role-color-tab:not(.active):hover { color: var(--text); }

#sp-role-color-wheel-wrap, #sp-role-gradient-wheel-wrap {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
#sp-role-color-wheel, #sp-role-gradient-wheel {
  border-radius: 50%;
  cursor: crosshair;
  flex-shrink: 0;
}
.sp-role-color-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding-top: 6px;
}
.sp-gradient-preview {
  height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-dim);
  margin-top: 4px;
}

/* Role icon */
.sp-role-icon-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sp-role-icon-preview {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--accent-dim);
}
.sp-role-icon-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sp-role-icon-remove {
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
}
.sp-role-icon-remove:hover { color: var(--danger); }

/* Role settings toggles */
.sp-role-settings-list {
  display: flex;
  flex-direction: column;
}
.sp-role-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.sp-role-setting-row > div { min-width: 0; flex: 1; }
.sp-role-setting-row:last-child { border-bottom: none; }
.sp-role-setting-label {
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 500;
}
.sp-role-setting-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Permissions — tri-state (Guilded-style) */
.sp-role-bulk-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.sp-role-bulk-actions button {
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
}
.sp-role-permissions {
  display: flex;
  flex-direction: column;
}
.sp-perm-category {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  margin: 28px 0 12px;
  letter-spacing: 0.02em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.sp-perm-category:first-child { margin-top: 0; }

.sp-perm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sp-perm-row:last-child { border-bottom: none; }
.sp-perm-info { flex: 1; min-width: 0; }
.sp-perm-label {
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 600;
}
.sp-perm-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}

/* Tri-state button group — larger, colored like Guilded */
.sp-perm-tristate {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.sp-perm-tristate button {
  width: 40px;
  height: 36px;
  border: none;
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.sp-perm-tristate button:not(:last-child) { border-right: 1px solid var(--border); }
.sp-perm-tristate button:hover { background: var(--surface-3); }
.sp-perm-tristate button.deny-active {
  background: #e74c3c;
  color: #fff;
}
.sp-perm-tristate button.default-active {
  background: var(--surface-3);
  color: var(--text);
}
.sp-perm-tristate button.allow-active {
  background: #2ecc71;
  color: #fff;
}

/* Role actions footer */
.sp-role-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}

/* ── Role members assign dialog ────────────────────── */
.role-members-assign-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 4px;
}

.role-member-assign-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
}

.role-member-assign-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1.5px solid var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
}
.role-member-assign-avatar img { width: 100%; height: 100%; object-fit: cover; }

.role-member-assign-name { flex: 1; font-size: 0.85rem; color: var(--text); }

.role-member-toggle {
  background: transparent;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 3px 10px;
  color: var(--text-muted);
  transition: all 0.15s;
  flex-shrink: 0;
}
.role-member-toggle.has-role { border-color: var(--accent); color: var(--accent); background: rgba(127,255,212,0.08); }
.role-member-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ══════════════════════════════════════════════════════
   NEW FEATURES — appended
   ══════════════════════════════════════════════════════ */

/* ── DM icon in server rail ────────────────────────── */
.server-icon-dm {
  margin-bottom: 4px;
  border-style: solid;
}
.server-icon-dm.active { border-color: var(--accent); box-shadow: var(--accent-glow); }
.rail-logo {
  width: 28px;
  height: 28px;
}

/* ── Voice controls bar (above sidebar footer) ─────── */
#voice-controls-bar {
  background: var(--voice-bar-bg, var(--surface-3));
  border-top: 1px solid var(--accent-dim);
  padding: 10px 12px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Status row: green dot + text + disconnect button */
.vc-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vc-status-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* vc-status-dot removed — replaced by vc-signal-btn */

.vc-status-text {
  min-width: 0;
}

.vc-status-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #43b581;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  cursor: pointer;
}
.vc-status-label:hover { text-decoration: underline; }

#voice-controls-channel-name {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
#voice-controls-channel-name:hover {
  color: var(--text);
  text-decoration: underline;
}

/* vc-signal-btn removed — signal bars are now the clickable element */

/* Signal bars indicator */
.vc-signal-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.vc-signal-bars span {
  width: 3px;
  border-radius: 1px;
  background: #43b581;
  transition: background 0.3s, height 0.3s;
}
.vc-signal-bars span:nth-child(1) { height: 4px; }
.vc-signal-bars span:nth-child(2) { height: 6px; }
.vc-signal-bars span:nth-child(3) { height: 8px; }
.vc-signal-bars span:nth-child(4) { height: 11px; }
.vc-signal-bars span:nth-child(5) { height: 14px; }
.vc-signal-bars.quality-good span { background: #43b581; }
.vc-signal-bars.quality-ok span { background: #faa61a; }
.vc-signal-bars.quality-bad span { background: #f04747; }
.vc-signal-bars.quality-ok span:nth-child(4),
.vc-signal-bars.quality-ok span:nth-child(5) { background: var(--surface-1); }
.vc-signal-bars.quality-bad span:nth-child(3),
.vc-signal-bars.quality-bad span:nth-child(4),
.vc-signal-bars.quality-bad span:nth-child(5) { background: var(--surface-1); }

.vc-disconnect-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255,77,106,0.12);
  color: #ff4d6a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.vc-disconnect-btn svg { width: 16px; height: 16px; }
.vc-disconnect-btn:hover {
  background: #ff4d6a;
  color: #fff;
}

/* ── Voice Details / Noise Suppression Popovers ──── */
.vc-popover {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 4px;
  background: var(--surface-1);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  padding: 14px;
  z-index: 100;
  font-size: 0.82rem;
  color: var(--text);
}
.vc-popover-stats { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.vc-popover-stats strong { color: var(--text); }
.vc-popover-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0 0 10px;
}
.vc-popover-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--accent-dim);
}
.vc-secure-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: #43b581;
}
.vc-secure-badge .icon { width: 12px; height: 12px; }
.vc-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: 600;
}
.vc-popover-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0 0 12px;
}
.vc-mic-test {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vc-mic-meter {
  flex: 1;
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
}
.vc-mic-fill {
  height: 100%;
  width: 0%;
  background: #43b581;
  border-radius: 3px;
  transition: width 0.1s;
}

/* Voice timer */
.vc-timer {
  font-weight: 400;
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-left: 6px;
}

/* ── Floating voice controls bar (bottom of voice area) ── */
#voice-floating-bar {
  position: sticky;
  bottom: 16px;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(30,31,34,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--accent-dim);
  border-radius: 28px;
  padding: 8px 12px;
  z-index: 10;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.vf-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.vf-btn svg { width: 20px; height: 20px; }
.vf-btn:hover { background: var(--surface-3); color: var(--text); }
.vf-btn.active { background: rgba(127,255,212,0.15); color: var(--accent); }
.vf-btn.vf-disconnect {
  background: #f04747;
  color: #fff;
}
.vf-btn.vf-disconnect:hover { background: #d83c3c; }

/* Control buttons row */
#voice-controls-btns {
  display: flex;
  gap: 4px;
}

.voice-ctrl-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  transition: all 0.15s;
  line-height: 1;
}
.voice-ctrl-btn svg { width: 18px; height: 18px; }
.voice-ctrl-btn:hover     { color: var(--text); background: var(--surface-1); }
.voice-ctrl-btn.active    { color: var(--accent); background: rgba(127,255,212,0.12); border-color: var(--accent-dim); }
.voice-ctrl-btn.active:hover { background: rgba(127,255,212,0.18); }
.voice-ctrl-btn.disabled  { opacity: 0.25; pointer-events: none; }

/* ── Voice area ────────────────────────────────────── */
#voice-topbar {
  height: 52px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--accent-dim);
  flex-shrink: 0;
}

#voice-channel-name {
  font-size: 1rem;
  font-weight: bold;
  color: var(--accent);
}

#voice-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  overflow: hidden;
}

#voice-members-list {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

#screen-share-view {
  width: 100%;
  max-width: 900px;
  position: relative;
}

#screen-share-video {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--accent-dim);
  background: #000;
  max-height: 60vh;
  object-fit: contain;
}

#screen-share-label {
  position: absolute;
  bottom: 8px;
  left: 10px;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(0,0,0,0.55);
  padding: 2px 8px;
  border-radius: 4px;
}

/* ── Remote screen shares ──────────────────────────── */
.remote-screen-wrap {
  width: 640px;
  height: 360px;
  max-width: 100%;
  min-width: 320px;
  min-height: 180px;
  position: relative;
  margin-top: 12px;
  overflow: visible;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--accent-dim);
  background: #000;
}
.screen-resize-handle {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  background: var(--accent);
  border-radius: 4px;
  opacity: 0.4;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--bg);
  transition: opacity 0.15s, transform 0.15s;
}
.screen-resize-handle::after { content: '⤡'; }
.remote-screen-wrap:hover .screen-resize-handle { opacity: 0.9; transform: scale(1.1); }
.remote-screen-wrap:fullscreen { border: none; border-radius: 0; max-width: none; width: 100% !important; height: 100% !important; }
.remote-screen-video {
  width: 100%;
  height: 100%;
  background: #000;
  object-fit: contain;
  display: block;
}
.remote-screen-label {
  position: absolute;
  bottom: 8px;
  left: 10px;
  font-size: 0.75rem;
  color: #fff;
  background: rgba(0,0,0,0.6);
  padding: 2px 8px;
  border-radius: 4px;
  pointer-events: none;
}
.remote-screen-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}
.remote-screen-wrap:hover .remote-screen-controls { opacity: 1; }
.screen-ctrl-btn {
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 1rem;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.screen-ctrl-btn:hover { background: rgba(0,0,0,0.9); }

/* ── Modal (generic) ──────────────────────────────── */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-box {
  background: var(--surface-1);
  border: 1.5px solid var(--accent-dim);
  border-radius: var(--radius-lg);
  box-shadow: var(--accent-glow), 0 16px 48px rgba(0,0,0,0.5);
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--accent-dim);
  flex-shrink: 0;
}
.modal-header h3 { margin: 0; font-size: 1rem; color: var(--text); }
.modal-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.modal-close-btn:hover { color: var(--text); background: var(--surface-3); }
.modal-body { padding: 20px; flex: 1; }

/* ── Multi-Stream Grid ─────────────────────────────── */
.stream-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 4px;
  flex: 1;
  min-height: 0;
  padding: 4px;
}
.stream-grid:empty { display: none; }

.stream-tile {
  position: relative;
  background: #111;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--accent-dim);
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stream-tile video { width: 100%; height: 100%; object-fit: contain; }
.stream-tile-label {
  position: absolute;
  bottom: 6px; left: 8px;
  font-size: 0.72rem;
  color: #fff;
  background: rgba(0,0,0,0.65);
  padding: 2px 8px;
  border-radius: 3px;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.stream-tile-label .live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #e74c3c;
  animation: live-pulse 1.5s infinite;
}
@keyframes live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.stream-tile-controls {
  position: absolute;
  top: 6px; right: 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}
.stream-tile:hover .stream-tile-controls { opacity: 1; }
.stream-tile-btn {
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 0.75rem;
  padding: 3px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}
.stream-tile-btn:hover { background: rgba(0,0,0,0.95); }

.stream-focused {
  flex: 1;
  min-height: 0;
  position: relative;
  background: #000;
}
.stream-focused video { width: 100%; height: 100%; object-fit: contain; }
.stream-focused .stream-tile-label { bottom: 10px; left: 12px; font-size: 0.85rem; }
.stream-focused .stream-tile-controls { top: 10px; right: 10px; }
.stream-focused:hover .stream-tile-controls { opacity: 1; }

.stream-grid.has-focus {
  flex: none;
  grid-template-columns: repeat(auto-fill, 160px);
  max-height: 100px;
  overflow-x: auto;
  overflow-y: hidden;
}
.stream-grid.has-focus .stream-tile { min-height: 90px; cursor: pointer; }
.stream-grid.has-focus .stream-tile-controls { display: none; }
.stream-grid.has-focus .stream-tile-label { font-size: 0.55rem; padding: 1px 4px; }

/* ── Stream URL Dialog ──────────────────────────────── */
.stream-section {
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  padding: 16px;
}
.stream-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.stream-section-header strong { font-size: 0.88rem; color: var(--text); }
.stream-section-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 4px 0 0;
  line-height: 1.4;
}
.stream-field { margin-bottom: 10px; }
.stream-field label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 4px;
}
.stream-field-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.stream-input {
  flex: 1;
  font-size: 0.8rem;
  font-family: var(--mono-font, monospace);
  padding: 7px 10px;
  background: var(--surface-1);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  outline: none;
}
.stream-input:focus { border-color: var(--accent); }
.stream-obs-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 8px 0 0;
  padding: 8px 10px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  line-height: 1.4;
}

/* ── DM area ───────────────────────────────────────── */
#dm-topbar {
  height: 52px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--accent-dim);
  flex-shrink: 0;
  background: var(--surface-2);
}

/* DM topbar call buttons */
.dm-topbar-actions { display: flex; gap: 6px; margin-left: auto; }
.dm-topbar-btn {
  background: none; border: 1px solid var(--border); border-radius: 50%; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--text-muted); transition: all .15s;
}
.dm-topbar-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--surface-3); }
.dm-topbar-btn .icon { width: 16px; height: 16px; }

/* DM call bar (active call controls) */
#dm-call-bar {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 16px;
  background: var(--surface-3); border-bottom: 1px solid var(--accent-dim); flex-shrink: 0;
}
.dm-call-bar-info { display: flex; align-items: center; gap: 10px; }
.dm-call-bar-status { font-size: 0.85rem; font-weight: 600; color: #43b581; }
.dm-call-bar-timer { font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dm-call-bar-controls { display: flex; gap: 8px; }
.dm-call-ctrl {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 50%; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--text-muted); transition: all .15s;
}
.dm-call-ctrl:hover { color: var(--text); border-color: var(--text-muted); }
.dm-call-ctrl.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.dm-call-ctrl .icon { width: 16px; height: 16px; }
.dm-call-hangup { background: #ed4245; border-color: #ed4245; color: #fff; }
.dm-call-hangup:hover { background: #c93b3e; }

/* DM video container */
#dm-call-video-container {
  position: relative; flex-shrink: 0; min-height: 280px; max-height: 60vh;
  margin: 12px; border-radius: 16px; overflow: hidden;
  background: #0a0a0a; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) inset;
}
#dm-call-remote-video { width: 100%; height: 100%; object-fit: contain; border-radius: 16px; }
/* Local video: full-size preview while ringing, shrinks to PiP when call connects */
#dm-call-local-video {
  width: 100%; height: 100%; object-fit: cover; border-radius: 16px; border: none;
  z-index: 2; transition: all .35s cubic-bezier(.4,0,.2,1);
}
#dm-call-local-video.pip {
  position: absolute; bottom: 16px; right: 16px; width: 180px; height: 135px;
  border-radius: 12px; border: 2px solid rgba(255,255,255,.12);
  box-shadow: 0 4px 16px rgba(0,0,0,.6);
}

/* Incoming call overlay */
.dm-call-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.dm-call-overlay-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px;
  padding: 32px 40px; text-align: center; min-width: 280px;
  box-shadow: 0 16px 48px rgba(0,0,0,.6); animation: dm-call-pulse 2s ease-in-out infinite;
}
@keyframes dm-call-pulse {
  0%, 100% { box-shadow: 0 16px 48px rgba(0,0,0,.6); }
  50% { box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 0 8px rgba(67,181,129,.15); }
}
.dm-call-overlay-avatar {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 12px;
  background: var(--surface-3); display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: var(--accent); overflow: hidden;
}
.dm-call-overlay-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-call-overlay-name { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.dm-call-overlay-label { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 20px; }
.dm-call-overlay-actions { display: flex; gap: 16px; justify-content: center; }
.dm-call-accept, .dm-call-decline {
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: transform .12s;
}
.dm-call-accept { background: #43b581; color: #fff; }
.dm-call-decline { background: #ed4245; color: #fff; }
.dm-call-accept:hover, .dm-call-decline:hover { transform: scale(1.1); }
.dm-call-accept .icon, .dm-call-decline .icon { width: 22px; height: 22px; }

#dm-partner-name {
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--accent);
}

#dm-message-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#dm-typing-indicator {
  height: 20px;
  padding: 0 28px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  flex-shrink: 0;
}

#dm-attachment-preview-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 4px;
  background: var(--surface-2);
}

#dm-attachment-preview-inner {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  min-width: 0;
}

#dm-attachment-preview-inner img {
  max-height: 60px;
  max-width: 80px;
  border-radius: 4px;
  object-fit: cover;
}

#btn-dm-remove-attachment {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  transition: color 0.2s, background 0.2s;
}
#btn-dm-remove-attachment:hover { color: #ff4d6a; background: rgba(255,77,106,0.1); }

#dm-input-bar {
  padding: 10px 16px 14px;
  background: var(--surface-2);
  flex-shrink: 0;
}

#dm-input {
  flex: 1;
  background: var(--surface-3);
  border: 1.5px solid var(--accent-dim);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 11px 16px;
  font-size: 0.95rem;
  font-family: sans-serif;
  outline: none;
  resize: none;
  max-height: 160px;
  overflow-y: auto;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#dm-input:focus { border-color: var(--accent); box-shadow: var(--accent-glow); }
#dm-input::placeholder { color: var(--text-muted); }

/* ── DM sidebar (2nd column, shown in DM/friends mode) */
#dm-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface-1);
  border-right: 1px solid var(--accent-dim);
  border-left: 1px solid var(--accent-dim);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#dm-sidebar-header {
  padding: 0 12px 0 14px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--accent-dim);
  flex-shrink: 0;
}
#dm-sidebar-header span { flex: 1; }

#dm-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 6px;
}

.dm-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.dm-sidebar-item:hover  { background: rgba(127,255,212,0.07); }
.dm-sidebar-item.active { background: rgba(127,255,212,0.12); }

.dm-sidebar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1.5px solid var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  color: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
}
.dm-sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }

.dm-sidebar-info {
  flex: 1;
  min-width: 0;
}
.dm-sidebar-name {
  font-size: 0.85rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-sidebar-preview {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Friends area ──────────────────────────────────── */
/* Friends area layout */
.friends-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

#friends-topbar {
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--accent-dim);
  flex-shrink: 0;
  background: var(--surface-2);
}

#friends-tabs {
  display: flex;
  gap: 4px;
  align-items: center;
}
.fr-tab-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-right: 12px;
  padding-right: 12px;
  border-right: 1px solid var(--card-border);
}

.fr-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  transition: color 0.2s, background 0.2s;
}
.fr-tab.active { color: var(--text); background: rgba(255,255,255,0.08); }
.fr-tab:hover  { color: var(--text); background: rgba(255,255,255,0.04); }
.fr-tab-add {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.fr-tab-add:hover { filter: brightness(1.1); }
.fr-badge {
  background: #f87171;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 5px;
  margin-left: 4px;
}

.friends-search-bar {
  padding: 12px 20px;
  flex-shrink: 0;
}
.friends-search-bar input {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  color: var(--text);
  font-size: 0.88rem;
  outline: none;
}
.friends-search-bar input:focus { border-color: var(--accent); }

.friends-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 20px;
}

#friends-content {
  flex: 1;
  overflow-y: auto;
}

.friends-add-section {
  padding: 20px;
  border-bottom: 1px solid var(--card-border);
}
.friends-add-section h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}
.friends-add-section p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 16px;
}

/* Active Now sidebar */
.friends-active-sidebar {
  width: 340px;
  flex-shrink: 0;
  border-left: 1px solid var(--card-border);
  background: var(--surface-1);
  padding: 16px;
  overflow-y: auto;
}
.friends-active-sidebar h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
}
.friends-active-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.friends-active-empty strong { color: var(--text); }
.friends-active-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  background: var(--surface-2);
  cursor: pointer;
}
.friends-active-item:hover { background: var(--surface-3); }
.friends-active-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-3);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}
.friends-active-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.friends-active-info { flex: 1; min-width: 0; }
.friends-active-name { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.friends-active-status { font-size: 0.75rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.friends-active-status .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.friends-active-status .status-dot.online { background: #4ade80; }
.friends-active-status .status-dot.idle { background: #facc15; }
.friends-active-status .status-dot.dnd { background: #f87171; }

.fr-section-label {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  margin-top: 16px;
}
.fr-section-label:first-child { margin-top: 0; }

.friend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  margin-bottom: 6px;
  transition: background 0.15s;
}
.friend-row:hover { background: rgba(127,255,212,0.04); }

.friend-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1.5px solid var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
}
.friend-avatar img { width: 100%; height: 100%; object-fit: cover; }

.friend-name-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.friend-name {
  font-size: 0.88rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-status {
  font-size: 0.7rem;
  line-height: 1;
  white-space: nowrap;
}
.friend-status.online {
  color: #4ade80;
}
.friend-status.offline {
  color: var(--text-muted);
}

.friend-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.fr-btn {
  background: transparent;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 4px 10px;
  transition: all 0.15s;
}
.fr-btn:hover      { border-color: var(--accent); color: var(--accent); }
.fr-btn.accept     { border-color: #4ade80; color: #4ade80; }
.fr-btn.accept:hover { background: rgba(74,222,128,0.1); }
.fr-btn.danger     { border-color: #ff4d6a; color: #ff4d6a; }
.fr-btn.danger:hover { background: rgba(255,77,106,0.1); }

.add-friend-form {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.add-friend-form input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}
.add-friend-form input:focus { border-color: var(--accent); }

#add-friend-result {
  font-size: 0.82rem;
  min-height: 1rem;
  padding: 4px 0;
}
#add-friend-result.ok  { color: #4ade80; }
#add-friend-result.err { color: #ff4d6a; }

/* ── Lightbox ───────────────────────────────────────── */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
}

#lightbox-close {
  position: fixed;
  top: 16px;
  right: 20px;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: 50%;
  color: var(--accent);
  font-size: 1rem;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  z-index: 5001;
}
#lightbox-close:hover { background: var(--accent-dim); border-color: var(--accent); }

#lightbox-content {
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#lightbox-content img,
#lightbox-content video {
  max-width: 95vw;
  max-height: 90vh;
  border-radius: var(--radius-md);
  object-fit: contain;
  border: 2px solid var(--accent-dim);
  box-shadow: var(--accent-glow), 0 8px 40px rgba(0,0,0,0.6);
}

#lightbox-content video { outline: none; }

/* ── GIF Picker ─────────────────────────────────────── */
#gif-picker {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  background: var(--surface-1);
  border: 1.5px solid var(--accent-dim);
  border-radius: var(--radius-lg);
  box-shadow: var(--accent-glow), 0 8px 32px rgba(0,0,0,0.5);
  width: 380px;
  max-width: 95vw;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

#gif-picker-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--accent-dim);
  flex-shrink: 0;
}

#gif-search-input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 7px 10px;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.2s;
}
#gif-search-input:focus { border-color: var(--accent); }

#btn-close-gif-picker {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: color 0.15s;
}
#btn-close-gif-picker:hover { color: var(--text); }

#gif-favorites-bar {
  padding: 8px 10px 4px;
  border-bottom: 1px solid var(--accent-dim);
  flex-shrink: 0;
}

.gif-section-label {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}

#gif-results-grid,
#gif-favorites-grid {
  columns: 3;
  column-gap: 4px;
  padding: 8px;
  overflow-y: auto;
}

#gif-results-grid { flex: 1; min-height: 0; }

.gif-item {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface-3);
  border: 1px solid var(--accent-dim);
  transition: border-color 0.15s, transform 0.1s;
  break-inside: avoid;
  margin-bottom: 4px;
}
.gif-item:hover { border-color: var(--accent); transform: scale(1.03); }

.gif-item img {
  width: 100%;
  display: block;
  background: var(--surface-2);
}

.gif-fav-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  background: rgba(0,0,0,0.55);
  border: none;
  border-radius: 3px;
  color: #fff;
  font-size: 0.7rem;
  cursor: pointer;
  padding: 2px 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.gif-item:hover .gif-fav-btn { opacity: 1; }
.gif-fav-btn.fav { color: #ffd93d; opacity: 1; }

#gif-picker-empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ── GIF button — styled badge ─────────────────────── */
.gif-btn {
  font-size: 0.68rem !important;
  font-weight: 900;
  letter-spacing: 0.08em;
  border: 1.5px solid var(--accent-dim) !important;
  border-radius: 5px !important;
  padding: 2px 6px !important;
  line-height: 1.4;
  color: var(--accent) !important;
  background: transparent !important;
  opacity: 0.8;
  transition: opacity 0.15s, border-color 0.15s, background 0.15s !important;
}
.gif-btn:hover {
  border-color: var(--accent) !important;
  background: var(--accent-dim) !important;
  opacity: 1;
}

/* ── Profile popup — banner ─────────────────────────── */
#profile-popup-banner {
  width: 100%;
  height: 72px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--surface-3), var(--surface-2));
  flex-shrink: 0;
}
#profile-popup-banner.has-banner {
  height: 90px;
}
#profile-popup-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Allow avatar to overlap banner */
#profile-popup {
  overflow: visible;
}
#profile-popup > .profile-popup-body {
  overflow: visible;
}

/* With banner the avatar overlap is more dramatic — increase height */
#profile-popup.has-banner #profile-popup-banner {
  height: 90px;
}

/* ── Profile popup — actions (DM / friend) ──────────── */
#profile-popup-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.popup-action-btn {
  flex: 1;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-dim);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.popup-action-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(127,255,212,0.07); }
.popup-action-btn.danger { border-color: #ff4d6a; color: #ff4d6a; }
.popup-action-btn.danger:hover { background: rgba(255,77,106,0.1); }
.popup-action-btn.accept { border-color: #4ade80; color: #4ade80; }
.popup-action-btn.accept:hover { background: rgba(74,222,128,0.1); }

/* ── User settings — banner preview ────────────────── */
.banner-preview-box {
  width: 100%;
  height: 72px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  overflow: hidden;
  position: relative;
}
.banner-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── User settings — voice settings ────────────────── */
.voice-settings-field {
  display: flex;
  align-items: center;
  gap: 10px;
}
.voice-settings-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  width: 100px;
  flex-shrink: 0;
}
.voice-settings-select {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 5px 8px;
  font-size: 0.82rem;
  outline: none;
  cursor: pointer;
}
.voice-settings-select:focus { border-color: var(--accent); }

/* ── Hardware info grid (desktop voice settings) ───── */
.hw-info-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  padding: 12px;
  background: var(--surface-2);
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.8rem;
}
.hw-info-grid .hw-label {
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.hw-info-grid .hw-value {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hw-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hw-chip.hw-active {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}
.hw-chip.hw-inactive {
  background: rgba(251, 113, 133, 0.15);
  color: #fb7185;
}

/* ── DM notification badge ─────────────────────────── */
.server-icon-dm { position: relative; overflow: visible; }

/* Counter badge (iOS-style app badge) */
.dm-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ff4d6a;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
  line-height: 1;
  pointer-events: none;
  z-index: 5;
}

/* Subtle glow when there are unread DMs */
.server-icon-dm.has-notification {
  border-color: #ff4d6a;
  box-shadow: 0 0 0 2px rgba(255,77,106,0.3);
}

/* Hover popover showing per-user breakdown */
.dm-badge-popover {
  position: fixed;
  z-index: 9999;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  min-width: 220px;
  max-width: 300px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  display: none;
}
.dm-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
}
.dm-badge-row:hover { background: var(--surface-2); }
.dm-badge-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
}
.dm-badge-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--text-muted); font-size: 0.75rem; font-weight: 700;
}
.dm-badge-name { flex: 1; font-size: 0.85rem; font-weight: 600; color: var(--text); }
.dm-badge-count { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }

/* ── Voice member mute/deafen icons ─────────────────── */
.voice-member-icons {
  display: flex;
  gap: 4px;
  font-size: 0.85rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── DM sidebar active item ─────────────────────────── */
.dm-sidebar-item.active {
  background: rgba(127,255,212,0.08);
  border-color: var(--accent);
}

/* ── Profile popup action button variants ───────────── */
.popup-action-btn.danger { border-color: #ff4d6a; color: #ff4d6a; }
.popup-action-btn.danger:hover { background: rgba(255,77,106,0.1); }
.popup-action-btn.accept { border-color: #4ade80; color: #4ade80; }
.popup-action-btn.accept:hover { background: rgba(74,222,128,0.1); }
.popup-action-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Message attachment — cursor for lightbox ────────── */
.msg-attachment-img,
.msg-attachment-video { cursor: zoom-in; }

/* ── GIF fav btn active state ────────────────────────── */
.gif-fav-btn.active { color: #ffd93d; opacity: 1; }

/* ── Server rail separator (between DM btn and servers) */
.server-rail-separator {
  width: 36px;
  height: 1px;
  border: none;
  background: var(--accent-dim);
  flex-shrink: 0;
  margin: 2px 0;
}

/* ── Theme picker ─────────────────────────────────── */
.theme-picker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.theme-swatch {
  background: transparent;
  border: 1.5px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 72px;
}
.theme-swatch-preview {
  display: flex;
  height: 36px;
  width: 100%;
  overflow: hidden;
}
.tsp-bar {
  flex: 1;
}
.tsp-accent {
  flex: 0.6;
}
.theme-swatch-name {
  display: block;
  padding: 4px 0 5px;
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.theme-swatch:hover {
  border-color: var(--accent);
}
.theme-swatch:hover .theme-swatch-name {
  color: var(--text);
}
.theme-swatch.active {
  border-color: var(--accent);
  box-shadow: var(--accent-glow);
}
.theme-swatch.active .theme-swatch-name {
  color: var(--accent);
}
.theme-swatch.previewing {
  border-color: var(--accent);
  opacity: 1;
}

/* ── Interface & Themes — 2-column layout ─────────── */
.appearance-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  align-items: start;
}
.appearance-controls {
  min-width: 0;
}
.appearance-preview-pane {
  position: sticky;
  top: 16px;
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px;
}
.appearance-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.appearance-preview-label {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.appearance-preview-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
}
.if-theme-preview {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  border: 1px solid rgba(255,255,255,0.06);
  font-family: inherit;
}
.appearance-preview-hint {
  font-size: 0.62rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
  opacity: 0.6;
}

/* Responsive: stack on narrow widths */
@media (max-width: 720px) {
  .appearance-layout {
    grid-template-columns: 1fr;
  }
  .appearance-preview-pane {
    position: static;
  }
}

/* ── Role color wheel (mirrors user color wheel) ───── */
#role-color-wheel-wrap {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}

#role-color-wheel {
  border-radius: 50%;
  cursor: crosshair;
  flex-shrink: 0;
  display: block;
}

#role-color-wheel-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding-top: 6px;
}

/* ── Tabbed User Settings Dialog ─────────────────── */
#dialog-user-settings:not([open]) {
  display: none;
}
#dialog-user-settings {
  padding: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  overflow: hidden;
  border-radius: 0;
  border: none;
  margin: 0;
}

.settings-nav {
  width: 220px;
  flex-shrink: 0;
  background: var(--surface-2);
  border-right: 1px solid var(--accent-dim);
  display: flex;
  flex-direction: column;
  padding: 60px 8px 20px;
  gap: 1px;
  overflow-y: auto;
}

.settings-nav-title {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 0.6rem 0.6rem;
  margin-bottom: 4px;
}

.settings-nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.875rem;
  text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.settings-nav-btn:hover {
  background: var(--accent-dim);
  color: var(--text);
}

.settings-nav-btn.active {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 600;
}

.settings-nav-sep {
  height: 1px;
  background: var(--accent-dim);
  margin: 0.6rem 0.4rem;
  flex-shrink: 0;
}

.settings-nav-logout {
  width: calc(100% - 12px);
  margin-left: 6px;
  text-align: left;
  font-size: 0.85rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
}

/* Settings nav profile card + search */
.settings-nav-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 12px;
  margin-bottom: 4px;
}
.settings-nav-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-3);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
}
.settings-nav-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.settings-nav-user { min-width: 0; }
.settings-nav-username {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-nav-edit-link {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-decoration: none;
}
.settings-nav-edit-link:hover { color: var(--accent); text-decoration: underline; }
.settings-nav-search-wrap {
  padding: 0 8px 10px;
}
.settings-nav-search-wrap input {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  color: var(--text);
  font-size: 0.82rem;
  outline: none;
}
.settings-nav-search-wrap input:focus { border-color: var(--accent); }

/* Account subtabs */
.account-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--card-border);
}
.account-subtab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 8px 16px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.account-subtab:hover { color: var(--text); }
.account-subtab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Account section divider */
.account-section-divider {
  height: 1px;
  background: var(--card-border);
  margin: 24px 0;
}

/* Auth block */
.account-auth-block {
  margin-top: 20px;
  padding-top: 16px;
}
.account-auth-block h4 {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}

/* Standing card */
.account-standing-card {
  padding: 20px;
}
.standing-status-good {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
}
.standing-icon { font-size: 1.5rem; }
.standing-status-good strong { color: var(--text); font-size: 0.95rem; display: block; margin-bottom: 4px; }
.standing-status-good p { color: var(--text-muted); font-size: 0.85rem; margin: 0; }

.settings-nav-section-label {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 0.75rem 4px;
  font-weight: 600;
}
.settings-nav-version {
  font-size: 0.65rem;
  color: var(--text-muted);
  padding: 8px 0.75rem;
  opacity: 0.5;
}

/* ── Account Card ── */
.settings-account-card {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--card-border);
}
.settings-account-banner {
  height: 100px;
  background: linear-gradient(135deg, var(--accent-dim), var(--surface-3));
  position: relative;
}
.settings-account-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 12px;
  margin-top: -28px;
  position: relative;
}
.settings-account-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--surface-1);
  border: 5px solid var(--surface-2);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
}
.settings-account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.settings-account-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.settings-account-fields {
  padding: 0 16px 16px;
}
.settings-account-field {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--card-border);
}
.settings-account-field-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
  width: 110px;
  flex-shrink: 0;
}
.settings-account-field-value {
  flex: 1;
  font-size: 0.88rem;
  color: var(--text);
}

/* ── Settings Toggle Row ── */
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--card-border);
  gap: 16px;
}
.settings-toggle-row div { flex: 1; }
.settings-toggle-row strong { font-size: 0.88rem; color: var(--text); font-weight: 500; }
.settings-toggle-row small { font-size: 0.78rem; color: var(--text-muted); display: block; margin-top: 2px; }

/* Toggle switch — uses existing .toggle-switch / .toggle-input / .toggle-slider system */

/* ── Radio groups ── */
.settings-radio-group { display: flex; flex-direction: column; gap: 8px; }
.settings-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
}
.settings-radio input { accent-color: var(--accent); }

/* ── Keybind list ── */
.keybind-list { display: flex; flex-direction: column; gap: 2px; }
.keybind-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--text);
}
.keybind-row span:first-child { flex: 1; }
.keybind-mode-tag {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 4px; font-weight: 600;
  background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border);
}
/* Keybind mode selector in recorder */
.kbp-mode-row {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
}
.kbp-mode-label { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }
.kbp-mode-btn {
  padding: 3px 10px; font-size: 0.72rem; border-radius: 4px; cursor: pointer;
  background: var(--surface-3); border: 1px solid var(--border); color: var(--text-muted);
  transition: all .12s;
}
.kbp-mode-btn:hover { border-color: var(--accent); color: var(--text); }
.kbp-mode-btn.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.keybind-row kbd {
  background: var(--surface-3);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-family: monospace;
  color: var(--text-muted);
}

/* ── Device cards ── */
.settings-device-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.settings-device-icon::before { content: '\1F4BB'; font-size: 1.5rem; }
.settings-device-details strong { font-size: 0.85rem; color: var(--text); }

/* ── Danger button ── */
.btn-danger {
  background: var(--danger, #da373c);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 0.85rem;
  cursor: pointer;
}
.btn-danger:hover { filter: brightness(1.1); }
.btn-danger-outline {
  background: transparent;
  color: var(--danger, #da373c);
  border: 1px solid var(--danger, #da373c);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-danger-outline:hover { background: rgba(218,55,60,0.1); }

.settings-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: relative;
  min-width: 0;
  background: var(--bg);
}

.settings-panels-wrap {
  flex: 1;
  padding: 60px 40px 40px;
  max-width: 960px;
  width: 100%;
}

.settings-panel { display: none; }
.settings-panel.active { display: block; }

.settings-panel h2 {
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.settings-panel h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 20px;
}

/* ── Forward Message Dialog ───────────────────────── */
.fwd-dialog:not([open]) { display: none; }
.fwd-dialog[open] {
  width: min(500px, 92vw);
  padding: 0;
  background: var(--surface-1);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(680px, 85vh);
}
.fwd-dialog::backdrop { background: rgba(0,0,0,0.7); }
.fwd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 12px;
}
.fwd-header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--text); }
.fwd-header p { margin: 4px 0 0; font-size: 0.82rem; color: var(--text-muted); }
.fwd-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.fwd-close:hover { color: var(--text); }
.fwd-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 16px 12px;
  padding: 8px 12px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--card-border);
}
.fwd-search-wrap:focus-within { border-color: var(--accent); }
.fwd-search-icon { font-size: 0.9rem; opacity: 0.5; flex-shrink: 0; }
.fwd-search-wrap input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
}
.fwd-targets {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px;
  max-height: 340px;
  min-height: 120px;
}
.fwd-target-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s;
}
.fwd-target-item:hover { background: rgba(127,255,212,0.04); }
.fwd-target-item.selected { background: rgba(127,255,212,0.08); }
.fwd-target-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  overflow: hidden;
  position: relative;
}
.fwd-target-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.fwd-target-avatar .fwd-channel-icon {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: var(--surface-1);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--text-muted);
}
.fwd-target-info { flex: 1; min-width: 0; }
.fwd-target-name { font-size: 0.92rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fwd-target-sub { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fwd-target-check {
  width: 22px;
  height: 22px;
  border: 2px solid var(--text-muted);
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.fwd-target-item.selected .fwd-target-check {
  background: var(--accent);
  border-color: var(--accent);
}
.fwd-target-item.selected .fwd-target-check::after {
  content: '\2713';
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}
.fwd-preview {
  margin: 8px 16px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  font-size: 0.82rem;
  color: var(--text);
  max-height: 80px;
  overflow-y: auto;
  word-break: break-word;
}
.fwd-preview:empty { display: none; }
.fwd-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--card-border);
}
.fwd-footer input {
  flex: 1;
  background: var(--surface-3);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 8px 16px;
  color: var(--text);
  font-size: 0.88rem;
  outline: none;
}
.fwd-footer input:focus { border-color: var(--accent); }
.fwd-send-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s;
}
.fwd-send-btn:hover { filter: brightness(1.1); }

/* ── Download App Dialog ──────────────────────────── */
.dl-dialog:not([open]) { display: none; }
.dl-dialog[open] {
  width: min(540px, 92vw);
  padding: 0;
  background: var(--surface-1);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dl-dialog::backdrop { background: rgba(0,0,0,0.7); }
.dl-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 24px 12px;
}
.dl-header h3 { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--text); }
.dl-header p { margin: 4px 0 0; font-size: 0.85rem; color: var(--text-muted); }
.dl-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.dl-close:hover { color: var(--text); }
.dl-body { padding: 8px 24px 24px; }
.dl-body h4 {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
  margin: 0 0 12px;
}
.dl-grid {
  display: grid;
  gap: 12px;
}
.dl-grid-3 { grid-template-columns: repeat(3, 1fr); }
.dl-grid-2 { grid-template-columns: repeat(2, 1fr); }
.dl-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s;
}
.dl-card:hover { border-color: var(--accent); }
.dl-card-disabled { opacity: 0.6; }
.dl-card-disabled:hover { border-color: var(--card-border); }
.dl-card-icon {
  width: 48px;
  height: 48px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dl-card-icon svg { width: 100%; height: 100%; }
.dl-icon-text {
  width: auto;
  height: auto;
}
.dl-macos-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-weight: 300;
  color: var(--text);
}
.dl-mac-sm { font-size: 1rem; }
.dl-os-lg { font-size: 2rem; font-weight: 400; margin-top: -4px; }
.dl-ios-label {
  font-size: 2.2rem;
  font-weight: 600;
  background: linear-gradient(135deg, #f06, #f90, #fc0, #0c0, #09f, #90f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dl-card-name { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.dl-card-btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 20px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s;
}
.dl-card-btn:hover { filter: brightness(1.1); }
.dl-card-soon {
  font-size: 0.78rem;
  color: var(--text-muted);
  background: var(--surface-3);
  padding: 4px 14px;
  border-radius: 20px;
  font-weight: 500;
}

/* ── Profile Edit Layout (form + preview side by side) ── */
.profile-edit-layout {
  display: flex;
  gap: 24px;
}
.profile-edit-form {
  flex: 1;
  min-width: 0;
}
.profile-section-divider {
  height: 1px;
  background: var(--card-border);
  margin: 20px 0;
}
.profile-upload-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-profile-action {
  padding: 6px 16px !important;
  font-size: 0.82rem !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer;
}
.btn-profile-action-outline {
  background: none;
  border: 1px solid var(--card-border);
  color: var(--text);
  padding: 6px 16px;
  font-size: 0.82rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-profile-action-outline:hover { background: var(--surface-3); }
.dialog-field-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 2px 0 8px;
}
.profile-edit-preview {
  width: 280px;
  flex-shrink: 0;
  margin-top: 0;
  position: sticky;
  top: 20px;
}
.profile-preview-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.profile-preview-card {
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.profile-preview-banner {
  height: 80px;
  background: linear-gradient(135deg, var(--accent-dim), var(--surface-3));
  background-size: cover;
  background-position: center;
}
.profile-preview-avatar-row {
  display: flex;
  justify-content: center;
  margin-top: -32px;
  position: relative;
  z-index: 2;
}
.profile-preview-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 4px solid var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--accent);
  overflow: hidden;
}
.profile-preview-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-preview-body {
  padding: 4px 14px 14px;
  text-align: center;
}
.profile-preview-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.profile-preview-pronouns {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.profile-preview-sep {
  height: 1px;
  background: var(--accent-dim);
  margin: 8px 0;
}
.profile-preview-bio {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
}
@media (max-width: 700px) {
  .profile-edit-layout { flex-direction: column; }
  .profile-edit-preview { width: 100%; }
}

/* ── Toggle switch ─────────────────────────────────── */
.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  position: relative;
  padding: 12px 0;
}
.toggle-label {
  font-size: 0.9rem;
  color: var(--text);
  flex: 1;
  text-transform: none;
  letter-spacing: 0;
  padding-top: 2px;
}
.toggle-hint {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 3px;
  font-weight: 400;
  line-height: 1.35;
}
/* Toggle switch wrapper */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  width: 52px;
  min-width: 52px;
  height: 28px;
  background: rgba(255,255,255,0.25);
  border: none;
  border-radius: 14px;
  position: relative;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
  order: 2;
  margin-top: 1px;
}
.toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: #e0e0e0;
  border-radius: 50%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.toggle-row:hover .toggle-slider {
  background: rgba(255,255,255,0.32);
}
.toggle-input:checked + .toggle-slider {
  background: var(--accent);
  box-shadow: var(--accent-glow);
}
.toggle-input:checked + .toggle-slider::after {
  transform: translateX(24px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3), 0 0 0 2px var(--accent);
}
.toggle-row:hover .toggle-input:checked + .toggle-slider {
  filter: brightness(1.1);
}

/* ── Field select dropdown ─────────────────────────── */
.field-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.field-select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.field-select:focus {
  border-color: var(--accent);
  box-shadow: var(--accent-glow);
}
.field-select option {
  background: var(--surface-1);
  color: var(--text);
}

.settings-close-btn {
  position: fixed;
  top: 16px;
  right: 20px;
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
  z-index: 999;
  line-height: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-close-btn:hover {
  color: var(--text);
  background: var(--accent-dim);
}

.settings-footer {
  padding: 0.75rem 40px;
  border-top: 1px solid var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  background: var(--bg);
}

.settings-footer .dialog-error {
  flex: 1;
  margin: 0;
  font-size: 0.82rem;
}

.settings-footer-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ── @Mention highlights ───────────────────────────────── */
.msg-mention {
  background: rgba(var(--accent-rgb, 0,255,180), 0.15);
  color: var(--accent, #00ffb4);
  padding: 0 3px;
  border-radius: 3px;
  font-weight: 600;
  cursor: pointer;
}

.msg-mention:hover {
  background: rgba(var(--accent-rgb, 0,255,180), 0.28);
}

/* ── Reply preview in message bubble ───────────────────── */
.msg-reply-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin-bottom: 4px;
  border-left: 3px solid var(--accent, #00ffb4);
  background: rgba(255,255,255,0.04);
  border-radius: 0 4px 4px 0;
  font-size: 0.78rem;
  color: var(--text-secondary, #8a8a8e);
  cursor: pointer;
  transition: background 0.15s;
}

.msg-reply-preview:hover {
  background: rgba(255,255,255,0.08);
}

.msg-reply-icon {
  font-size: 0.7rem;
  opacity: 0.6;
}

.msg-reply-author {
  font-weight: 600;
  color: var(--text-primary, #fff);
}

.msg-reply-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}

/* ── Reply button on messages ──────────────────────────── */
.msg-reply-btn {
  background: none;
  border: none;
  color: var(--text-secondary, #8a8a8e);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.message:hover .msg-reply-btn {
  opacity: 1;
}

.msg-reply-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary, #fff);
}

/* ── Message highlight flash (on reply click scroll) ──── */
.msg-highlight {
  animation: msgHighlight 1.5s ease-out;
}

@keyframes msgHighlight {
  0%   { background: rgba(var(--accent-rgb, 0,255,180), 0.18); }
  100% { background: transparent; }
}

/* ── Reply preview bar (above input) ───────────────────── */
.reply-preview-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--surface-1, #1a1a2e);
  border-top: 1px solid var(--border, #2a2a3e);
  font-size: 0.82rem;
  color: var(--text-secondary, #8a8a8e);
  flex-shrink: 0;
}

.reply-bar-text {
  font-weight: 600;
  color: var(--accent, #00ffb4);
  white-space: nowrap;
}

.reply-bar-preview {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary, #8a8a8e);
}

.reply-bar-close {
  background: none;
  border: none;
  color: var(--text-secondary, #8a8a8e);
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.reply-bar-close:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary, #fff);
}

/* ── @Mention autocomplete dropdown ────────────────────── */
.mention-dropdown {
  position: fixed;
  z-index: 9999;
  background: var(--surface-2, #22223a);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
}

.mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.12s;
  font-size: 0.88rem;
  color: var(--text-primary, #fff);
}

.mention-item:hover,
.mention-item.selected {
  background: rgba(var(--accent-rgb, 0,255,180), 0.12);
}

.mention-item-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-3, #2e2e48);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary, #8a8a8e);
  flex-shrink: 0;
  overflow: hidden;
}

.mention-item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Message reactions bar ─────────────────────────────── */
.msg-reactions-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
  padding: 2px 0;
}

.reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--surface-2, #22223a);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-size: 0.85rem;
  user-select: none;
}

.reaction-pill:hover {
  background: rgba(var(--accent-rgb, 0,255,180), 0.08);
  border-color: var(--accent, #00ffb4);
}

.reaction-pill.user-reacted {
  background: rgba(var(--accent-rgb, 0,255,180), 0.14);
  border-color: var(--accent, #00ffb4);
}

.reaction-emoji {
  font-size: 1rem;
  line-height: 1;
}

.reaction-count {
  font-size: 0.75rem;
  color: var(--text-secondary, #8a8a8e);
  font-weight: 600;
  min-width: 8px;
  text-align: center;
}

.reaction-pill.user-reacted .reaction-count {
  color: var(--accent, #00ffb4);
}

.reaction-add-btn {
  background: transparent;
  border: 1px dashed var(--border, #2a2a3e);
  border-radius: 14px;
  width: 28px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.15s, border-color 0.15s;
  opacity: 0;
}

.message:hover .reaction-add-btn,
.msg-reactions-bar:hover .reaction-add-btn {
  opacity: 1;
}

.reaction-add-btn:hover {
  background: rgba(var(--accent-rgb, 0,255,180), 0.08);
  border-color: var(--accent, #00ffb4);
}

/* ── Emoji Picker ──────────────────────────────────────── */
#emoji-picker {
  position: fixed;
  z-index: 10000;
  background: var(--surface-1);
  border: 1.5px solid var(--accent-dim);
  border-radius: var(--radius-lg);
  box-shadow: var(--accent-glow), 0 8px 28px rgba(0,0,0,0.5);
  width: 340px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.react-picker-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 8px 0;
  flex-shrink: 0;
}
.react-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 5px 8px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.react-tab:hover { color: var(--text); }
.react-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.react-search {
  margin: 6px 8px;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 5px 8px;
  font-size: 0.8rem;
  outline: none;
  flex-shrink: 0;
}
.react-search:focus { border-color: var(--accent); }

#react-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 8px 8px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
#react-grid.emote-grid { grid-template-columns: repeat(5, 1fr); gap: 4px; }

.emoji-picker-item {
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 1.3rem;
  padding: 4px;
  cursor: pointer;
  transition: background 0.12s, transform 0.1s;
  line-height: 1.2;
  text-align: center;
}
.emoji-picker-item:hover {
  background: rgba(var(--accent-rgb, 0,255,180), 0.12);
  transform: scale(1.15);
}

.react-emote-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s;
}
.react-emote-item:hover { background: var(--surface-3); }
.react-emote-item img { width: 28px; height: 28px; object-fit: contain; }
.react-emote-item span { font-size: 0.52rem; color: var(--text-muted); margin-top: 1px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Subscription Panel ─────────────────────────────── */
.sub-current-tier {
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.sub-current-info { display: flex; align-items: center; gap: 12px; }
.sub-current-info strong { font-size: 1.1rem; }
.sub-tier-status { font-size: 0.8rem; color: var(--text-muted); margin: 2px 0 0; }

.sub-gift-section, .sub-redeem-section { margin-bottom: 20px; }
.sub-gift-section h3, .sub-redeem-section h3 { font-size: 0.9rem; margin-bottom: 8px; }
.sub-gift-count { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 10px; }
.sub-gift-actions { display: flex; gap: 8px; }
.sub-code-display {
  margin-top: 10px; padding: 8px 12px; background: var(--surface-2);
  border-radius: var(--radius-sm); display: flex; align-items: center; gap: 8px;
  font-family: monospace; font-size: 1rem; letter-spacing: 0.15em;
}
.sub-redeem-row { display: flex; gap: 8px; }
.sub-redeem-row input { flex: 1; font-family: monospace; letter-spacing: 0.12em; }
.sub-redeem-msg { font-size: 0.78rem; margin-top: 6px; }
.sub-redeem-msg.success { color: var(--accent); }
.sub-redeem-msg.error { color: #f44; }

/* Subscription panel needs more width for 3-column card layout */
#settings-panel-subscription { max-width: 960px; }

.sub-tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.sub-backer-teaser {
  text-align: center;
  padding: 20px 16px;
  margin-bottom: 16px;
  background: var(--surface-2);
  border: 1.5px solid var(--accent-dim);
  border-radius: var(--radius-lg);
}
.sub-backer-teaser p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.sub-backer-teaser strong { color: var(--accent); }
.backer-teaser-link {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: opacity 0.15s;
}
.backer-teaser-link:hover { opacity: 0.8; text-decoration: underline; }
.sub-tier-card {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex; flex-direction: column;
  transition: border-color 0.2s;
}
.sub-tier-card:hover { border-color: var(--accent-dim); }
.sub-tier-card.current { border-color: var(--accent); }
.sub-tier-card .tier-card-name {
  font-size: 1rem; font-weight: 700; margin-bottom: 2px;
  display: flex; align-items: center; gap: 6px;
}
.sub-tier-card .tier-card-price {
  font-size: 0.82rem; color: var(--text-muted); margin-bottom: 10px;
}
.sub-tier-card .tier-card-perks {
  flex: 1; font-size: 0.75rem; color: var(--text-muted); line-height: 1.6;
  list-style: none; padding: 0; margin: 0 0 12px;
}
.sub-tier-card .tier-card-perks li::before { content: '✓ '; color: var(--accent); }
.sub-tier-card .tier-card-cta {
  margin-top: auto; text-align: center; font-size: 0.78rem; font-weight: 600;
  padding: 8px 0; border-radius: var(--radius-sm); border: none; width: 100%;
  cursor: pointer; transition: background 0.15s, transform 0.1s;
}
.sub-tier-card .tier-card-cta.current {
  background: var(--accent-dim); color: var(--accent); cursor: default;
}
.sub-tier-card .tier-card-cta.subscribe {
  background: var(--accent); color: var(--bg); font-weight: 700;
}
.sub-tier-card .tier-card-cta.subscribe:hover:not(:disabled) {
  transform: scale(1.02); filter: brightness(1.1);
}
.sub-tier-card .tier-card-cta.subscribe:disabled {
  opacity: 0.6; cursor: wait;
}
.sub-tier-card .tier-card-cta.contact {
  background: var(--surface-3); color: var(--text-muted); cursor: not-allowed;
}
.sub-tier-card .seats-remaining {
  font-size: 0.7rem; color: var(--text-muted); text-align: center; margin-top: 4px;
}

/* ── Tier Badges ───────────────────────────────────── */
/* ── Inline Tier Badges (next to username in messages) ── */
.tier-badge-wrapper { cursor: pointer; }
.tier-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 4px;
  font-size: 8px; line-height: 1; vertical-align: middle; margin-left: 4px;
  flex-shrink: 0; transition: transform 0.1s;
}
.tier-badge:hover { transform: scale(1.15); }
.tier-badge svg { width: 12px; height: 12px; }
@keyframes badge-expand {
  from { opacity: 0; transform: translateY(-50%) scale(0.6); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}
.tier-badge-expanded { pointer-events: auto; }

/* Subscriber — Patched teal/mint (brand accent) */
.tier-badge-subscriber {
  background: linear-gradient(135deg, #0a5c4a, #00b894);
  color: #a0ffe0;
  box-shadow: 0 1px 3px rgba(0,184,148,0.35);
}
/* Supporter — electric cyan */
.tier-badge-supporter {
  background: linear-gradient(135deg, #0a4a6b, #00b4d8);
  color: #a0ecff;
  box-shadow: 0 1px 3px rgba(0,180,216,0.35);
}
/* Promoter — vivid purple */
.tier-badge-promoter {
  background: linear-gradient(135deg, #5a1a8a, #a855f7);
  color: #dcc0ff;
  box-shadow: 0 1px 3px rgba(168,85,247,0.35);
}
/* Backer — metallic bronze */
.tier-badge-backer {
  background: linear-gradient(135deg, #6b3a1a, #cd7f32, #a0522d);
  color: #f4c58a;
  box-shadow: 0 1px 4px rgba(205,127,50,0.4);
}
/* Backer Plus — metallic silver */
.tier-badge-backer_plus {
  background: linear-gradient(135deg, #6e7578, #c0c0c0, #e8e8e8, #a8a8a8);
  color: #f0f0f0;
  box-shadow: 0 0 0 1.5px rgba(192,192,192,0.5), 0 1px 4px rgba(192,192,192,0.3);
}
/* Backer Premiere — metallic gold */
.tier-badge-backer_premiere {
  background: linear-gradient(135deg, #8a6d1b, #ffd700, #e0b820, #c9a020);
  color: #fff8dc;
  box-shadow: 0 0 0 1.5px rgba(255,215,0,0.6), 0 0 8px rgba(255,215,0,0.4);
  animation: backer-glow 2s ease-in-out infinite alternate;
}
@keyframes backer-glow {
  from { box-shadow: 0 0 0 1.5px rgba(255,215,0,0.7), 0 0 6px rgba(255,215,0,0.3); }
  to   { box-shadow: 0 0 0 1.5px rgba(255,215,0,0.9), 0 0 12px rgba(255,215,0,0.5); }
}

/* Patched Pro — employee badge, warm orange/amber */
.tier-badge-patched_pro {
  background: linear-gradient(135deg, #4a2000, #e67e22, #f39c12);
  background-size: 200% 200%;
  color: #fff2d9;
  box-shadow: 0 0 0 1.5px rgba(230,126,34,0.5), 0 1px 4px rgba(243,156,18,0.3);
  animation: pro-shift 4s ease-in-out infinite;
}
@keyframes pro-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Founder — one-of-a-kind holographic/iridescent badge (platform creators only) */
.tier-badge-founder {
  background: linear-gradient(135deg, #00ffb4, #00b4d8, #a855f7, #ff6b9d, #ffd700);
  background-size: 300% 300%;
  color: #fff;
  box-shadow: 0 0 0 1.5px rgba(0,255,180,0.6), 0 0 10px rgba(0,255,180,0.3), 0 0 20px rgba(168,85,247,0.15);
  animation: founder-shift 3s ease-in-out infinite, founder-glow 2s ease-in-out infinite alternate;
  width: 18px; height: 18px;
  border-radius: 5px;
}
.tier-badge-founder svg { width: 14px; height: 14px; }
@keyframes founder-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes founder-glow {
  from { box-shadow: 0 0 0 1.5px rgba(0,255,180,0.6), 0 0 8px rgba(0,255,180,0.25), 0 0 16px rgba(168,85,247,0.1); }
  to   { box-shadow: 0 0 0 2px rgba(168,85,247,0.7), 0 0 12px rgba(168,85,247,0.3), 0 0 20px rgba(0,255,180,0.15); }
}

/* ── Platform Bridge Badges ── */
.platform-badge {
  font-size: 0.58rem;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
  margin-left: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.3;
}
.platform-badge-discord { background: #5865F2; color: #fff; }
.platform-badge-slack   { background: #4A154B; color: #fff; }
.platform-badge-teams   { background: #6264A7; color: #fff; }

/* Bridged channel indicator in sidebar */
.channel-platform-icon {
  width: 12px; height: 12px;
  border-radius: 2px;
  margin-right: 2px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.channel-platform-icon.discord { background: #5865F2; }
.channel-platform-icon.slack   { background: #4A154B; }

/* ── Profile Tier Badges (in profile popup / settings) ── */
.tier-badge-hover-overlay {
  display: none;
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 600;
  align-items: center; justify-content: center;
  border-radius: inherit;
  white-space: nowrap;
}
.profile-tier-badge:hover .tier-badge-hover-overlay { display: flex; }
.profile-tier-badge:hover { opacity: 0.85; }

.profile-tier-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.7rem; font-weight: 600; padding: 3px 10px;
  border-radius: 12px; margin-top: 4px; transition: opacity 0.15s;
}
.profile-badge-icon { display: flex; align-items: center; }
.profile-badge-icon svg { width: 14px; height: 14px; }

.profile-tier-badge.subscriber {
  background: rgba(0,184,148,0.12); color: #00e6b8;
  border: 1px solid rgba(0,184,148,0.3);
}
.profile-tier-badge.supporter {
  background: rgba(0,180,216,0.12); color: #00c8e8;
  border: 1px solid rgba(0,180,216,0.3);
}
.profile-tier-badge.promoter {
  background: rgba(168,85,247,0.12); color: #b880f0;
  border: 1px solid rgba(168,85,247,0.3);
}
.profile-tier-badge.backer {
  background: rgba(205,127,50,0.15); color: #cd7f32;
  border: 1px solid rgba(205,127,50,0.3);
}
.profile-tier-badge.backer_plus {
  background: rgba(192,192,192,0.12); color: #d0d0d0;
  border: 1px solid rgba(192,192,192,0.35);
  box-shadow: 0 0 6px rgba(192,192,192,0.15);
}
.profile-tier-badge.backer_premiere {
  background: rgba(201,160,32,0.2); color: #fff0a0;
  border: 1px solid rgba(255,215,0,0.5);
  box-shadow: 0 0 8px rgba(255,215,0,0.2);
}
.profile-tier-badge.patched_pro {
  background: rgba(230,126,34,0.15); color: #f0a050;
  border: 1px solid rgba(230,126,34,0.4);
  box-shadow: 0 0 6px rgba(230,126,34,0.15);
}
.profile-tier-badge.founder {
  background: linear-gradient(135deg, #00ffb4, #00b4d8, #a855f7, #ff6b9d, #ffd700);
  background-size: 300% 300%;
  color: #fff;
  border: 1px solid rgba(0,255,180,0.5);
  box-shadow: 0 0 8px rgba(0,255,180,0.25), 0 0 16px rgba(168,85,247,0.15);
  animation: founder-shift 3s ease-in-out infinite, founder-profile-glow 3s ease-in-out infinite alternate;
}
@keyframes founder-profile-glow {
  0%   { border-color: rgba(0,255,180,0.5); color: #00ffb4; }
  50%  { border-color: rgba(168,85,247,0.5); color: #c07ff0; }
  100% { border-color: rgba(255,107,157,0.5); color: #ff6b9d; }
}

/* ── Group Tabs Bar (hidden — replaced by group rail) */
#group-tabs-bar { display: none !important; }

/* ── Group Context Menu ───────────────────────────── */
#group-context-menu {
  position: fixed;
  background: var(--surface-1);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  box-shadow: var(--accent-glow);
  z-index: 1000;
  overflow: hidden;
  min-width: 140px;
}
#group-context-menu button {
  display: block;
  width: 100%;
  padding: 9px 14px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
#group-context-menu button:hover {
  background: rgba(127,255,212,0.08);
  color: var(--accent);
}
#group-context-menu .ctx-danger:hover {
  background: rgba(255,77,106,0.1);
  color: #ff4d6a;
}

/* ── Generic Context Menu (categories etc.) ──── */
.ctx-menu {
  position: fixed;
  background: var(--surface-1);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  box-shadow: var(--accent-glow);
  z-index: 9999;
  overflow: hidden;
  min-width: 160px;
}
.ctx-menu .ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.ctx-menu .ctx-item:hover {
  background: rgba(127,255,212,0.08);
  color: var(--accent);
}
.ctx-menu .ctx-item-danger:hover {
  background: rgba(255,77,106,0.1);
  color: #ff4d6a;
}

/* ── Channel Context Menu — Move to Group Items ──── */
.ctx-group-sep {
  height: 1px;
  background: var(--accent-dim);
  margin: 4px 0;
}
.ctx-group-label {
  padding: 6px 14px !important;
  font-size: 0.75rem !important;
  color: var(--text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: default !important;
  pointer-events: none;
}
.ctx-group-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.ctx-group-item.ctx-active {
  color: var(--accent);
}
.ctx-group-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Group Edit Dialog ────────────────────────────── */
#dialog-group-edit {
  width: min(520px, 95vw);
  max-height: 85vh;
  padding: 0;
}
.group-edit-form {
  padding: 20px 24px !important;
  overflow-y: auto;
  max-height: calc(85vh - 56px);
}
#dialog-group-edit .dialog-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
#dialog-group-edit .dialog-field label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--label-font);
}
/* Color swatch row */
.group-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.group-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.group-color-swatch:hover { transform: scale(1.15); }
.group-color-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.group-color-custom {
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.group-color-hex-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--label-font);
  margin-left: 4px;
}
/* Game and membership selects */
#group-edit-game,
#group-edit-membership-role {
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  color: var(--text);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  width: 100%;
}
#group-edit-game:focus,
#group-edit-membership-role:focus { border-color: var(--accent); outline: none; }
.group-field-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}
.group-allowed-picker { position: relative; }
.group-allowed-search {
  width: 100%; padding: 8px 10px; font-size: 0.85rem; font-family: inherit;
  background: var(--surface-3); border: 1px solid var(--accent-dim); border-radius: var(--radius-sm);
  color: var(--text); outline: none;
}
.group-allowed-search:focus { border-color: var(--accent); }
.group-allowed-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
  max-height: 200px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  margin-top: 4px;
}
.group-allowed-option {
  display: flex; align-items: center; gap: 10px; padding: 7px 12px;
  font-size: 0.84rem; cursor: pointer; transition: background .1s;
}
.group-allowed-option:hover { background: var(--surface-2); }
.group-allowed-option .ga-icon {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 700; overflow: hidden;
}
.group-allowed-option .ga-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.group-allowed-option .ga-type { font-size: 0.65rem; color: var(--text-muted); margin-left: auto; }
.group-allowed-tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.group-allowed-tag {
  display: flex; align-items: center; gap: 5px; padding: 3px 8px 3px 3px;
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 12px;
  font-size: 0.78rem; color: var(--text);
}
.group-allowed-tag .ga-tag-icon {
  width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 0.55rem; font-weight: 700; overflow: hidden;
}
.group-allowed-tag .ga-tag-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.group-allowed-tag .ga-tag-remove {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 0.7rem; padding: 0 2px; margin-left: 2px;
}
.group-allowed-tag .ga-tag-remove:hover { color: var(--danger, #e05555); }
/* Groups settings tab tabs */
.groups-tab-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--accent-dim);
  margin-bottom: 12px;
}
.groups-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  padding: 6px 16px;
  font-size: 0.85rem;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.groups-tab-btn:hover { color: var(--text); }
.groups-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
/* Drag handle and drag states */
.group-drag-handle {
  cursor: grab;
  color: var(--text-muted);
  font-size: 1rem;
  padding: 0 6px 0 0;
  user-select: none;
  flex-shrink: 0;
}
.group-mgmt-row.dragging { opacity: 0.4; }
.group-mgmt-row.drag-over { outline: 2px solid var(--accent); border-radius: var(--radius-sm); }
/* Discord link section in group dialog */
.group-discord-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--accent-dim);
}
.group-discord-section h4 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 8px;
  font-family: var(--label-font);
}
.group-discord-status {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.group-discord-linked {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}
.group-discord-linked .discord-icon {
  width: 20px;
  height: 20px;
  background: #5865F2;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
}
.group-discord-note {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 6px;
  font-style: italic;
}

/* ── Groups Management Tab (Server Settings) ──────── */
#stab-groups h2 {
  margin-bottom: 12px;
}

.group-mgmt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 12px;
}

.group-color-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1);
}

.group-mgmt-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  flex: 1;
}

.group-mgmt-info {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.group-mgmt-row button {
  padding: 6px 14px;
  font-size: 0.82rem;
  border-radius: 6px;
  border: 1px solid var(--accent-dim);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.group-mgmt-row button:hover {
  background: rgba(127,255,212,0.08);
  border-color: var(--accent);
  color: var(--accent);
}
.group-mgmt-row .btn-delete {
  border-color: rgba(255,77,106,0.3);
  color: rgba(255,77,106,0.7);
}
.group-mgmt-row .btn-delete:hover {
  background: rgba(255,77,106,0.1);
  border-color: #ff4d6a;
  color: #ff4d6a;
}

/* Channels assigned to a group */
.group-mgmt-channels {
  margin-top: 4px;
  margin-bottom: 4px;
  padding-left: 44px;
}
.group-mgmt-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.group-mgmt-channel-item:hover {
  background: rgba(127,255,212,0.04);
}
.group-mgmt-unassign {
  background: none !important;
  border: none !important;
  color: var(--text-muted) !important;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
}
.group-mgmt-unassign:hover {
  opacity: 1;
  color: #ff4d6a !important;
}

/* Assign channel dropdown row */
.group-mgmt-assign-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-left: 0;
}
.group-mgmt-assign-row select {
  flex: 1;
  padding: 5px 8px;
  font-size: 0.82rem;
  background: var(--surface-1);
  color: var(--text);
  border: 1px solid var(--accent-dim);
  border-radius: 6px;
  cursor: pointer;
}
.group-mgmt-assign-row select:focus {
  outline: none;
  border-color: var(--accent);
}
.group-mgmt-assign-row button {
  padding: 5px 10px !important;
  font-size: 0.8rem !important;
}

/* ═══════════════════════════════════════════════════════
   Feature Overhaul — Snowflake, Status, Notifications,
   Voice Enhancements, Connections
   ═══════════════════════════════════════════════════════ */

/* ── Snowflake ID ────────────────────────────────── */
.snowflake-display-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.snowflake-code {
  font-family: monospace;
  font-size: 0.9rem;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.5px;
  user-select: all;
}
.btn-copy-snowflake {
  background: none;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  transition: background 0.15s;
}
.btn-copy-snowflake:hover { background: rgba(127,255,212,0.1); }
.btn-copy-snowflake .icon { width: 14px; height: 14px; }

.profile-popup-snowflake {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: monospace;
  margin-top: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.profile-popup-snowflake:hover { opacity: 1; }
.profile-popup-snowflake .icon { width: 12px; height: 12px; }

.profile-popup-last-online {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Linked Accounts on Profile ──────────────────── */
.profile-popup-linked {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.profile-linked-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.profile-linked-badge .icon { width: 14px; height: 14px; }

/* ── Status System ───────────────────────────────── */

/* Status dots (used on avatars) */
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.online     { background: #4ade80; }
.status-dot.idle       { background: #facc15; }
.status-dot.dnd        { background: #f87171; }
.status-dot.invisible  { background: #6b7280; }
.status-dot.offline    { background: #6b7280; }

/* Member avatar status dots */
.member-avatar[data-status="online"]::after   { background: #4ade80; opacity: 1; }
.member-avatar[data-status="idle"]::after     { background: #facc15; opacity: 1; }
.member-avatar[data-status="dnd"]::after      { background: #f87171; opacity: 1; }
.member-avatar[data-status="invisible"]::after,
.member-avatar[data-status="offline"]::after  { background: #6b7280; opacity: 0.7; }

.member-custom-status {
  font-size: 0.7rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
  line-height: 1;
  margin-top: 2px;
}

/* Footer status area */
.footer-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  padding: 4px 4px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
  overflow: hidden;
}
.footer-user-info:hover { background: rgba(127,255,212,0.07); }
#sidebar-footer .user-avatar-sm,
#dm-sidebar-footer .user-avatar-sm { position: relative; }
.footer-status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--surface-1);
  background: #4ade80;
}
.footer-status-dot.online    { background: #4ade80; }
.footer-status-dot.idle      { background: #facc15; }
.footer-status-dot.dnd       { background: #f87171; }
.footer-status-dot.invisible { background: #6b7280; }
.footer-name-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.footer-custom-status {
  font-size: 0.7rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
  line-height: 1.1;
}

/* Status Picker */
.status-picker {
  position: fixed;
  bottom: 60px;
  left: 80px;
  width: 220px;
  background: var(--surface-1);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 900;
  padding: 6px;
}
.status-picker-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text);
  transition: background 0.12s;
}
.status-picker-option:hover { background: rgba(127,255,212,0.07); }
.status-picker-option.active { background: rgba(127,255,212,0.12); }
.status-picker-sep {
  height: 1px;
  background: var(--card-border);
  margin: 4px 8px;
}
.status-picker-custom {
  padding: 6px;
}
.status-picker-custom input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.82rem;
  padding: 6px 10px;
}
.status-picker-custom input:focus { outline: none; border-color: var(--accent); }

/* ── Notification System ─────────────────────────── */

/* Unread dot on channel items */
.channel-item.unread .ch-icon { opacity: 1; }
.channel-item.unread { color: var(--text); font-weight: 600; }
.channel-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text);
  margin-left: auto;
  flex-shrink: 0;
}
.channel-mention-badge {
  background: #f87171;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 5px;
  margin-left: auto;
  flex-shrink: 0;
  min-width: 16px;
  text-align: center;
}

/* Server icon notification dot */
.server-icon-wrap { position: relative; }
.server-notif-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f87171;
  border: 2px solid var(--bg);
}
.server-mention-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: #f87171;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 8px;
  padding: 0 4px;
  min-width: 14px;
  text-align: center;
  border: 2px solid var(--bg);
}

/* Notification bell */
#btn-notifications {
  position: relative;
}
.notif-bell-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f87171;
}

/* ── Inbox Panel ──────────────────────────────────── */
.inbox-panel {
  position: fixed;
  top: 48px;
  right: 240px;
  width: 480px;
  max-height: 600px;
  background: var(--bg, #1a1a2e);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  z-index: 950;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.inbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 0;
}
.inbox-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
.inbox-title h3 { margin: 0; font-size: inherit; }
.inbox-icon::before { content: '\2709'; font-size: 1.2rem; }

/* Inbox tabs */
.inbox-tabs {
  display: flex;
  gap: 0;
  padding: 10px 18px 0;
  border-bottom: 1px solid var(--card-border);
}
.inbox-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 8px 16px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  position: relative;
}
.inbox-tab:hover { color: var(--text); }
.inbox-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.inbox-tab .tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f87171;
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
}

/* Inbox content */
.inbox-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  max-height: 480px;
}

/* Inbox channel section */
.inbox-channel-section {
  margin-bottom: 4px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.inbox-channel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.12s;
  border-radius: var(--radius-sm);
}
.inbox-channel-header:hover { background: rgba(127,255,212,0.04); }
.inbox-channel-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.inbox-channel-avatar img { width: 100%; height: 100%; object-fit: cover; }
.inbox-channel-info { flex: 1; min-width: 0; }
.inbox-channel-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.inbox-channel-name .inbox-badge {
  background: #f87171;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
}
.inbox-channel-breadcrumb {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-channel-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.inbox-channel-actions button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.85rem;
}
.inbox-channel-actions button:hover { background: rgba(127,255,212,0.08); color: var(--text); }
.inbox-expand-arrow {
  color: var(--text-muted);
  font-size: 0.7rem;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.inbox-channel-section.expanded .inbox-expand-arrow { transform: rotate(90deg); }

/* Inbox messages */
.inbox-messages {
  display: none;
  padding: 0 8px 8px;
  background: var(--surface-2);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.inbox-channel-section.expanded .inbox-messages { display: block; }
.inbox-msg {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}
.inbox-msg:hover { background: rgba(127,255,212,0.03); }
.inbox-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-1);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  overflow: hidden;
}
.inbox-msg-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.inbox-msg-body { flex: 1; min-width: 0; }
.inbox-msg-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.78rem;
}
.inbox-msg-username { font-weight: 600; color: var(--text); }
.inbox-msg-time { color: var(--text-muted); font-size: 0.68rem; }
.inbox-msg-content {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.35;
  word-break: break-word;
  margin-top: 2px;
}
.inbox-msg-attachment {
  margin-top: 4px;
  max-width: 200px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.inbox-msg-attachment img { width: 100%; display: block; border-radius: var(--radius-sm); }

/* Date separator in inbox */
.inbox-date-sep {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 8px 0 4px;
  font-weight: 500;
}

/* Inbox empty state */
.inbox-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}
.inbox-empty-icon::before {
  content: '\2714';
  font-size: 2.5rem;
  opacity: 0.3;
  display: block;
  margin-bottom: 12px;
}
.inbox-empty p { margin: 4px 0; font-size: 0.9rem; }
.inbox-empty-sub { font-size: 0.78rem !important; color: var(--text-muted); }

/* ── Voice Event Messages ────────────────────────── */
.system-message {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.78rem;
  padding: 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.system-message .icon { width: 14px; height: 14px; }

/* ── Per-User Volume Popover ─────────────────────── */
.user-volume-popover {
  position: absolute;
  background: var(--surface-1);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  padding: 12px 16px;
  z-index: 900;
  min-width: 180px;
}
.user-volume-popover label {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}
.user-volume-popover input[type="range"] {
  width: 100%;
}
.user-volume-popover .vol-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: right;
  margin-top: 2px;
}

.voice-mod-btn {
  display: block;
  width: 100%;
  background: var(--surface-3);
  border: none;
  color: var(--text);
  font-size: 0.75rem;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  margin-bottom: 2px;
  transition: background 0.1s;
}
.voice-mod-btn:hover { background: var(--accent-dim); }
.voice-mod-btn.danger { color: #f87171; }
.voice-mod-btn.danger:hover { background: rgba(248,113,113,0.15); }

/* ── Connections Grid (Settings) ─────────────────── */
.connections-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.connection-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}
.connection-card .icon { width: 22px; height: 22px; flex-shrink: 0; }
.connection-card-info { flex: 1; min-width: 60px; }
.connection-card-platform {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.connection-card-username {
  font-size: 0.78rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.connection-card input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.82rem;
  padding: 5px 8px;
  width: 120px;
  flex-shrink: 1;
  min-width: 80px;
}
.connection-card input:focus { outline: none; border-color: var(--accent); }
.connection-card .btn-link {
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.connection-card .btn-link:hover { opacity: 0.9; }
.connection-card .btn-unlink {
  background: none;
  border: 1px solid #f87171;
  color: #f87171;
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-size: 0.78rem;
  cursor: pointer;
}
.connection-card .btn-unlink:hover { background: rgba(248,113,113,0.1); }

/* ── Toast Notifications ─────────────────────────── */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface-2);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-md);
  color: var(--accent);
  padding: 10px 24px;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: var(--accent-glow);
  opacity: 0;
  pointer-events: none;
  z-index: 10000;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Update-ready toast (persistent, with restart button) */
.toast.toast-update {
  display: flex;
  align-items: center;
  gap: 12px;
}
.toast-restart-btn {
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  padding: 5px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: opacity 0.15s;
}
.toast-restart-btn:hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════════
   NEW FEATURES STYLES
   ═══════════════════════════════════════════════════ */

/* ── Topbar actions ─────────────────────────────────── */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.topbar-actions .topbar-btn {
  font-size: 0.85rem;
  padding: 4px 6px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.topbar-actions .topbar-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* ── Quick Switcher ─────────────────────────────────── */
#dialog-quick-switcher {
  width: min(500px, 90vw);
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
#quick-switcher-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  background: var(--surface-1);
  border: none;
  border-bottom: 1px solid var(--surface-2);
  color: var(--text);
  outline: none;
}
#quick-switcher-results {
  max-height: 300px;
  overflow-y: auto;
}
.qs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.1s;
}
.qs-item:hover, .qs-item.selected { background: var(--surface-2); }
.qs-item-icon { font-size: 1.1rem; width: 24px; text-align: center; }
.qs-item-name { flex: 1; color: var(--text); font-size: 0.85rem; }
.qs-item-hint { color: var(--text-muted); font-size: 0.72rem; }

/* ── Popover Dropdown (shared base) ────────────────── */
.popover-dropdown {
  position: fixed;
  z-index: 960;
  width: 340px;
  max-height: 520px;
  background: var(--bg, #1a1a2e);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.popover-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.popover-header h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.popover-header-icon { width: 20px; height: 20px; opacity: 0.7; }
.popover-scroll-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  max-height: 380px;
}
.popover-separator {
  height: 1px;
  background: var(--card-border);
  margin: 4px 8px;
}
.popover-chevron::after {
  content: '\203A';
  font-size: 1.2rem;
  color: var(--text-muted);
  font-weight: 300;
}

/* Popover empty state */
.popover-empty {
  text-align: center;
  padding: 32px 24px;
  color: var(--text-muted);
}
.popover-empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  background: var(--surface-2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.popover-empty-icon::after { content: '\2639'; font-size: 2.5rem; opacity: 0.4; }
.popover-empty p { font-size: 0.85rem; line-height: 1.4; margin: 4px 0; }
.popover-protip {
  margin-top: 16px !important;
  padding-top: 16px;
  border-top: 1px solid var(--card-border);
  font-size: 0.78rem !important;
  color: var(--text-muted);
}
.popover-protip strong { color: var(--accent); }

/* ── Pinned Messages Popover ──────────────────────── */
.pinned-msg {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  margin-bottom: 6px;
  cursor: pointer;
  transition: background 0.12s;
}
.pinned-msg:hover { background: rgba(127,255,212,0.06); }
.pinned-msg-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.pinned-msg-header strong { color: var(--text); }
.pinned-msg-content { font-size: 0.82rem; color: var(--text); word-break: break-word; }
.pinned-msg-unpin {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 3px;
}
.pinned-msg-unpin:hover { color: var(--danger); background: rgba(248,113,113,0.1); }

/* ── Notification Prefs Popover ───────────────────── */
#notif-prefs-popover { width: 280px; padding: 6px 0; }
.notif-prefs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.notif-prefs-row:hover { background: rgba(127,255,212,0.05); }
#notif-prefs-popover .notif-prefs-options { padding: 4px 0; }
#notif-prefs-popover .notif-pref-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.12s;
}
#notif-prefs-popover .notif-pref-option:hover { background: rgba(127,255,212,0.05); }
.notif-pref-text { flex: 1; }
.notif-pref-text strong { color: var(--text); font-size: 0.88rem; font-weight: 500; }
.notif-pref-text small { color: var(--text-muted); font-size: 0.75rem; }
.notif-pref-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.notif-pref-option.active .notif-pref-radio {
  border-color: var(--accent);
  background: var(--accent);
}
.notif-pref-option.active .notif-pref-radio::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 8px; height: 8px;
  background: var(--bg, #1a1a2e);
  border-radius: 50%;
}

/* ── Voice Quick Settings Popover ─────────────────── */
.voice-popover { width: 280px; padding: 6px 0; }
.voice-popover-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.88rem;
  cursor: pointer;
  text-align: left;
}
.voice-popover-row:hover { background: rgba(127,255,212,0.05); }
.voice-popover-row-text { flex: 1; }
.voice-popover-row-text strong { display: block; font-weight: 500; font-size: 0.88rem; }
.voice-popover-row-text small { color: var(--text-muted); font-size: 0.75rem; }
.voice-popover-submenu {
  padding: 2px 8px 6px;
  background: rgba(0,0,0,0.15);
}
.voice-popover-submenu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
}
.voice-popover-submenu-item:hover { background: rgba(127,255,212,0.06); }
.voice-popover-submenu-item input[type="radio"] { accent-color: var(--accent); }
.voice-popover-slider-row {
  padding: 10px 16px;
}
.voice-popover-slider-row strong { display: block; font-size: 0.85rem; font-weight: 500; color: var(--text); margin-bottom: 8px; }
.voice-popover-slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface-2);
  border-radius: 3px;
  outline: none;
}
.voice-popover-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.voice-popover-settings {
  color: var(--text);
  font-weight: 500;
}
.voice-popover-gear::after {
  content: '\2699';
  font-size: 1.1rem;
  color: var(--text-muted);
}

/* ── Thread Side Panel ──────────────────────────────── */
.thread-panel {
  width: 360px;
  min-width: 280px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--bg);
  height: 100%;
  overflow: hidden;
}
.thread-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.thread-panel-header h3 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thread-panel-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.thread-parent {
  padding: 10px 12px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.thread-panel-divider {
  height: 1px;
  background: var(--border);
}
.thread-reply-count {
  padding: 6px 12px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.thread-messages-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  min-height: 0;
}
.thread-msg {
  display: flex;
  gap: 8px;
  padding: 6px 0;
}
.thread-msg-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); flex-shrink: 0; }
.thread-msg-body { flex: 1; min-width: 0; }
.thread-msg-name { font-size: 0.72rem; font-weight: 600; color: var(--accent); }
.thread-msg-text { font-size: 0.82rem; color: var(--text); word-break: break-word; }
.thread-msg-time { font-size: 0.65rem; color: var(--text-muted); margin-left: 6px; }
.thread-input-bar {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.thread-input-bar textarea {
  flex: 1;
  resize: none;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 6px 8px;
  font-size: 0.82rem;
  outline: none;
}

/* Thread badge on messages */
.msg-thread-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 8px;
  background: rgba(var(--accent-rgb, 0,255,180), 0.08);
  border: 1px solid rgba(var(--accent-rgb, 0,255,180), 0.15);
  border-radius: 10px;
  font-size: 0.7rem;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.15s;
}
.msg-thread-badge:hover {
  background: rgba(var(--accent-rgb, 0,255,180), 0.15);
}
.msg-thread-badge svg { width: 12px; height: 12px; }

/* ── Poll ───────────────────────────────────────────── */
.poll-card {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin: 4px 0;
  max-width: 400px;
}
.poll-question { font-weight: 600; font-size: 0.85rem; margin-bottom: 8px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.poll-icon { color: var(--accent); flex-shrink: 0; }

/* ── Verified Badge (Blue Check) ─────────────────── */
.verified-badge {
  display: inline; vertical-align: middle; margin-left: 0; flex-shrink: 0;
}
.verified-badge svg { display: inline; width: 12px; height: 12px; vertical-align: -1px; }
.poll-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 4px;
  position: relative;
  overflow: hidden;
}
.poll-option:hover { background: rgba(255,255,255,0.05); }
.poll-option-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--accent);
  opacity: 0.15;
  transition: width 0.3s;
  border-radius: var(--radius-sm);
}
.poll-option-label { flex: 1; font-size: 0.8rem; color: var(--text); z-index: 1; }
.poll-option-count { font-size: 0.72rem; color: var(--text-muted); z-index: 1; min-width: 20px; text-align: right; }
.poll-option.voted { border: 1px solid var(--accent); }
.poll-option.voted .poll-option-bar { opacity: 0.25; }
.poll-footer { font-size: 0.65rem; color: var(--text-muted); margin-top: 6px; }
#poll-options-list input {
  width: 100%;
  margin-bottom: 4px;
  padding: 4px 8px;
  font-size: 0.8rem;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  outline: none;
}

/* ── Forum Voting ───────────────────────────────────── */
.forum-vote-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-right: 10px;
}
.vote-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--text-muted);
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}
.vote-btn:hover { color: var(--accent); }
.vote-btn.active-up { color: var(--accent); }
.vote-btn.active-down { color: var(--danger); }
.vote-score { font-size: 0.75rem; font-weight: 700; color: var(--text); }

/* ── Member Context Menu ────────────────────────────── */
#member-context-menu {
  position: fixed;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 0;
  z-index: 9999;
  min-width: 140px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
#member-context-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.8rem;
}
#member-context-menu button:hover { background: var(--surface-2); }
#member-context-menu button.ctx-danger:hover { background: var(--danger); color: #fff; }
#member-context-menu { min-width: 180px; }

/* Context menu shared elements */
.ctx-separator { height: 1px; background: var(--card-border); margin: 4px 8px; }
.ctx-has-submenu { display: flex !important; align-items: center; justify-content: space-between; }
.ctx-chevron::after { content: '\203A'; font-size: 1.1rem; color: var(--text-muted); }
.ctx-submenu {
  padding: 2px 6px;
  background: rgba(0,0,0,0.12);
  max-height: 180px;
  overflow-y: auto;
}
.ctx-submenu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: var(--text);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.ctx-submenu-item:hover:not(:disabled) { background: rgba(127,255,212,0.08); }
.ctx-submenu-item:disabled, .ctx-submenu-disabled { opacity: 0.5; cursor: default; pointer-events: none; }
.ctx-submenu-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.ctx-submenu-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ── Server Extended Settings ───────────────────────── */
.dialog-lg {
  width: min(700px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
}
.settings-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--accent-dim);
  padding: 0 16px;
  overflow-x: auto;
}
.settings-tab {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.78rem;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
}
.settings-tab:hover { color: var(--text); }
.settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.settings-panel { padding: 16px; }
.settings-panel:not(.active) { display: none; }

/* emote list */
.emote-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--surface-2);
}
.emote-item img { width: 28px; height: 28px; object-fit: contain; }
.emote-item-name { flex: 1; font-size: 0.8rem; color: var(--text); }
.emote-item-del {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.7rem;
}
.emote-item-del:hover { color: var(--danger); }

/* ban list */
.ban-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--surface-2);
}
.ban-item-name { flex: 1; font-size: 0.8rem; color: var(--text); }
.ban-item-reason { font-size: 0.7rem; color: var(--text-muted); flex: 1; }
.ban-item-unban {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.72rem;
}

/* webhook list */
.webhook-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--surface-2);
}
.webhook-item-name { flex: 1; font-size: 0.8rem; color: var(--text); font-weight: 600; }
.webhook-item-channel { font-size: 0.7rem; color: var(--text-muted); }
.webhook-item-url {
  font-size: 0.65rem;
  color: var(--accent-dim);
  cursor: pointer;
  word-break: break-all;
}
.webhook-item-del {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
}
.webhook-item-del:hover { color: var(--danger); }

/* XP */
.xp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.xp-rank { width: 24px; text-align: center; font-size: 0.8rem; font-weight: 700; color: var(--accent); }
.xp-bar-wrap { flex: 1; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.xp-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s; }
.xp-info { font-size: 0.7rem; color: var(--text-muted); min-width: 60px; text-align: right; }

/* audit log */
.audit-entry {
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--surface-2);
  font-size: 0.78rem;
}
.audit-actor { font-weight: 600; color: var(--accent); min-width: 80px; }
.audit-action { color: var(--text); flex: 1; }
.audit-time { color: var(--text-muted); font-size: 0.68rem; min-width: 80px; text-align: right; }

/* ── Markdown styles ────────────────────────────────── */
.msg-content code {
  background: var(--msg-code-bg, var(--surface-2));
  padding: 1px 4px;
  border-radius: 3px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85em;
}
.msg-content pre {
  background: var(--msg-code-bg, var(--surface-2));
  padding: 8px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin: 4px 0;
}
.msg-content pre code {
  background: none;
  padding: 0;
}
.msg-content blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 8px;
  margin: 4px 0;
  color: var(--text-muted);
}
.msg-content strong { font-weight: 700; }
.msg-content em { font-style: italic; }
.msg-content s { text-decoration: line-through; color: var(--text-muted); }
.msg-content a { color: var(--msg-link-color, var(--accent)); text-decoration: none; }
.msg-content a:hover { text-decoration: underline; }
.msg-content ul, .msg-content ol { margin: 4px 0; padding-left: 20px; }
.msg-content h1, .msg-content h2, .msg-content h3 {
  margin: 4px 0;
  font-weight: 700;
}
.msg-content h1 { font-size: 1.3em; }
.msg-content h2 { font-size: 1.1em; }
.msg-content h3 { font-size: 1em; }

/* ── Favorite star ──────────────────────────────────── */
.server-fav-star {
  position: absolute;
  top: -2px;
  right: -2px;
  font-size: 0.5rem;
  color: gold;
  pointer-events: none;
}

/* ── Archived channels ──────────────────────────────── */
.channel-archived { opacity: 0.5; font-style: italic; }

/* ── btn helpers ────────────────────────────────────── */
.btn-sm { font-size: 0.72rem !important; padding: 3px 10px !important; }
.btn-outline {
  background: none;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.15s;
}
.btn-outline:hover { background: var(--accent); color: var(--bg); }

/* ═══════════════════════════════════════════════════════
   Phase 2 Feature Styles — Blog, Streaming, Discovery,
   Members Page, Reports, Notification Prefs, Self-Roles
   ═══════════════════════════════════════════════════════ */

/* ── Blog Channel ─────────────────────────────────── */
.blog-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px;
  overflow-y: auto;
  max-width: 800px;
}
.blog-post-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: row;
  min-height: 140px;
}
.blog-post-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.blog-card-cover {
  width: 200px;
  min-height: 140px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-3);
}
.blog-card-body { padding: 16px 20px; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.blog-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}
.blog-card-preview {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 12px;
  line-height: 1.5;
  max-height: 4.5em;
  overflow: hidden;
  flex: 1;
}
.blog-card-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: auto;
}
.blog-card-author { font-weight: 600; color: var(--text); }
@media (max-width: 600px) {
  .blog-post-card { flex-direction: column; }
  .blog-card-cover { width: 100%; min-height: 120px; }
}

/* Blog Detail */
.blog-detail-cover {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-3);
}
.blog-detail-header { padding: 16px; }
.blog-detail-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.blog-detail-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.blog-detail-content {
  padding: 0 16px 16px;
  font-size: 0.95rem;
  line-height: 1.7;
  overflow-y: auto;
  flex: 1;
  color: var(--text);
}
.blog-detail-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 12px 0;
}
.blog-detail-content p { margin: 8px 0; }
.blog-comments-section {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
}
.blog-comments-section h4 { margin: 0 0 8px; font-size: 0.85rem; }
.blog-comment {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.blog-comment-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: 6px;
}
.blog-comment-text { margin-top: 4px; }
.blog-comment-input-bar {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-top: 12px;
}
.blog-comment-input-bar textarea {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  padding: 10px 14px;
  resize: none;
  outline: none;
  transition: border-color 0.2s;
  min-height: 44px;
}
.blog-comment-input-bar textarea:focus {
  border-color: var(--accent);
}
.blog-comment-input-bar textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}
.blog-comment-input-bar .btn-confirm {
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 0.84rem;
  flex-shrink: 0;
}
.blog-delete-btn { font-size: 0.7rem !important; }

/* ── Streaming Channel ────────────────────────────── */
#streaming-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}
#stream-video-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  min-height: 0;
  position: relative;
}
#stream-chat-sidebar {
  width: 300px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--bg);
}
#stream-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  font-size: 0.82rem;
}
#stream-chat-input {
  resize: none;
  font-size: 0.8rem;
}

/* ── Server Discovery (Full Page — Guilded style) ─── */
.discovery-page-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.discovery-sidebar {
  width: 180px;
  flex-shrink: 0;
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: 16px 0;
  overflow-y: auto;
}
.discovery-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 18px;
  margin-bottom: 8px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  padding-bottom: 12px;
}
.discovery-back-btn:hover {
  color: var(--accent);
  background: rgba(127,255,212,0.05);
}
.discovery-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-family: var(--ui-font);
  color: var(--text-muted);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: color 0.15s, background 0.15s;
}
.discovery-sidebar-item:hover { color: var(--text); background: var(--surface-1); }
.discovery-sidebar-item.active { color: var(--text); background: var(--surface-2); font-weight: 600; }
.discovery-sidebar-item .icon { width: 16px; height: 16px; }

.discovery-main {
  flex: 1;
  overflow-y: auto;
  background: var(--bg2);
}

/* Hero / search banner */
.discovery-hero {
  text-align: center;
  padding: 48px 24px 36px;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
.discovery-hero h2 {
  font-family: var(--ui-font);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
}
.discovery-hero p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 20px;
}
.discovery-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 440px;
  margin: 0 auto;
  background: var(--surface-1);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  padding: 0 14px;
  transition: border-color 0.2s;
}
.discovery-search-bar:focus-within { border-color: var(--accent); }
.discovery-search-bar .icon { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.discovery-search-bar input {
  flex: 1;
  border: none;
  background: none;
  padding: 10px 0;
  font-size: 0.88rem;
  color: var(--text);
  outline: none;
}
.discovery-search-bar input::placeholder { color: var(--text-muted); }

/* Section heading */
.discovery-section {
  padding: 24px 28px 0;
}
.discovery-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.discovery-section-header h3 {
  font-family: var(--ui-font);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Grid */
.discovery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  padding: 0 28px 28px;
}

/* Server cards */
.discovery-server-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
  cursor: pointer;
}
.discovery-server-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.discovery-card-banner {
  height: 100px;
  background-size: cover;
  background-position: center;
}
.discovery-card-body { padding: 14px; position: relative; }
.discovery-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: absolute;
  top: -22px;
  border: 3px solid var(--surface-2);
  object-fit: cover;
}
.discovery-card-icon-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: absolute;
  top: -22px;
  border: 3px solid var(--surface-2);
  background: var(--accent);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
}
.discovery-card-name {
  margin: 22px 0 4px;
  font-size: 0.9rem;
  font-weight: 700;
}
.discovery-card-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0 0 10px;
  line-height: 1.4;
  max-height: 2.8em;
  overflow: hidden;
}
.discovery-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.discovery-card-footer .icon { width: 14px; height: 14px; vertical-align: -2px; }
.nsfw-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  background: #ff4d6a;
  color: #fff;
  vertical-align: middle;
  margin-left: 5px;
}
.discovery-load-more {
  text-align: center;
  padding: 16px 28px 28px;
}

/* ── Self-Assignable Roles ────────────────────────── */
.self-roles-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.self-role-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.self-role-item:hover { background: var(--surface-3); }
.self-role-item.has-role { border-color: var(--accent); background: rgba(127, 255, 212, 0.04); }
.self-role-icon {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; overflow: hidden;
}
.self-role-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.self-role-info { flex: 1; min-width: 0; }
.self-role-name { font-weight: 600; font-size: 0.9rem; display: block; }
.self-role-members { font-size: 0.72rem; color: var(--text-muted); }
.self-role-toggle {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border); display: flex; align-items: center;
  justify-content: center; transition: all 0.15s;
}
.self-role-item.has-role .self-role-toggle {
  border-color: var(--accent); background: var(--accent);
}
.self-role-item.has-role .self-role-toggle::after {
  content: '✓'; font-size: 0.7rem; color: var(--bg); font-weight: 700;
}

/* ── Members Page ─────────────────────────────────── */
.members-page-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.members-page-item:hover { background: var(--surface-2); }
.mp-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.mp-avatar-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  color: var(--text);
  font-weight: 700;
  font-size: 0.9rem;
}
.mp-info { display: flex; flex-direction: column; }
.mp-name { font-weight: 600; font-size: 0.85rem; }
.mp-meta { font-size: 0.72rem; color: var(--text-muted); }

/* ── Report User ──────────────────────────────────── */
.report-item {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  background: var(--surface-2);
}
.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.report-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.report-pending { background: #facc15; color: #000; }
.report-resolved { background: #4ade80; color: #000; }
.report-dismissed { background: var(--surface-3); color: var(--text-muted); }
.report-body {
  font-size: 0.82rem;
  margin-bottom: 4px;
}
.report-category {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 0.68rem;
  background: var(--surface-3);
  color: var(--text-muted);
  margin-left: 6px;
}
.report-reason {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 4px 0;
  padding: 6px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}
.report-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.report-note {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 4px;
}

/* ── Notification Preferences ─────────────────────── */
.notif-prefs-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notif-pref-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s;
  font-size: 0.85rem;
}
.notif-pref-option:hover { border-color: var(--accent); }
.notif-pref-option input[type="radio"] { accent-color: var(--accent); }

/* ── Gradient Role Preview ────────────────────────── */
#role-gradient-wrap label {
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
#role-gradient-controls {
  padding: 6px 0;
}

/* ── Dialog Sizes ─────────────────────────────────── */
.dialog-sm { width: min(360px, 90vw); }

/* ── Topbar icon buttons ──────────────────────────── */
.topbar-btn .icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.topbar-btn-icon .icon {
  width: 16px;
  height: 16px;
}

/* ── Sidebar Utility Buttons ─────────────────────── */
.sidebar-utility-btns {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  border-top: 1px solid var(--accent-dim);
}
.sidebar-util-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 0;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.68rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.sidebar-util-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.sidebar-util-icon { width: 14px; height: 14px; display: inline-flex; }
.sidebar-util-icon .icon { width: 14px; height: 14px; }

/* ── Pop-out mode ─────────────────────────────────── */
body.popout-mode #server-rail,
body.popout-mode #sidebar,
body.popout-mode #dm-sidebar,
body.popout-mode #members-panel { display: none !important; }
body.popout-mode #main-content { width: 100% !important; }

/* ── Dialog Header ───────────────────────────────── */
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--accent-dim);
}
.dialog-header h3 {
  font-family: var(--ui-font);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

/* ── Dialog Close Button ─────────────────────────── */
.dialog-close {
  background: none;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 1rem;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.dialog-close:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* ── Dialog Sizes (additions) ────────────────────── */
.dialog-md { width: min(540px, 92vw); }

/* ── Dialog Body & Scroll Body ───────────────────── */
.dialog-body {
  padding: 0;
}
.dialog-scroll-body {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px 0;
}

/* ── Dialog Footer ───────────────────────────────── */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--accent-dim);
}

/* ── Dialog Form Elements (global) ───────────────── */
dialog select,
dialog textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.6rem 0.8rem;
  font-family: var(--ui-font);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}
dialog select:focus,
dialog textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--accent-glow);
}
dialog textarea { resize: vertical; min-height: 80px; }
dialog select option { background: var(--surface-1); color: var(--text); }

/* ── Dialog generic input (non-field) ────────────── */
dialog input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]) {
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}
dialog input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):focus {
  border-color: var(--accent);
  box-shadow: var(--accent-glow);
}

/* ── Dialog Checkbox Styling ─────────────────────── */
dialog input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: background 0.15s, border-color 0.15s;
}
dialog input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
dialog input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--bg);
  font-weight: bold;
}

/* ── Dialog Button Outlines ──────────────────────── */
dialog .btn-outline {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--ui-font);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}
dialog .btn-outline:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* ═══════════════════════════════════════════════════
   Full-Page Server Settings (Guilded / Discord style)
   ═══════════════════════════════════════════════════ */
.settings-page {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.settings-page.hidden { display: none; }

/* Header bar */
.settings-page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--accent-dim);
  background: var(--bg2);
  flex-shrink: 0;
}
.settings-page-header h2 {
  font-family: var(--ui-font);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.04em;
}

/* Back button */
.settings-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  padding: 6px 12px;
  cursor: pointer;
  font-family: var(--ui-font);
  font-size: 0.85rem;
  transition: all 0.2s;
}
.settings-back-btn:hover { color: var(--text); border-color: var(--accent); }
.settings-back-arrow { font-size: 1rem; }

/* Body — sidebar + content */
.settings-page-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Sidebar Nav ── */
.settings-nav {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--accent-dim);
  padding: 16px 0;
  overflow-y: auto;
}
.settings-nav-section { padding: 0 12px; }
.settings-nav-label {
  display: block;
  font-size: 0.62rem;
  font-family: var(--label-font);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  padding: 8px 12px 4px;
}
.settings-nav-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--ui-font);
  font-size: 0.85rem;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 2px;
}
.settings-nav-item:hover { background: var(--surface-2); color: var(--text); }
.settings-nav-item.active { background: var(--accent-dim); color: var(--accent); }
.settings-nav-divider {
  height: 1px;
  background: var(--accent-dim);
  margin: 8px 12px;
}
.settings-nav-danger .settings-nav-item { color: #ff6b8a; }
.settings-nav-danger .settings-nav-item:hover { background: rgba(255,107,138,0.1); }
.settings-nav-danger .settings-nav-item.active { background: rgba(255,107,138,0.15); color: #ff6b8a; }

/* ── Content Panel ── */
.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px 40px;
}
.settings-content > .settings-panel { max-width: 680px; }
.settings-content > .settings-panel.sp-roles-panel { max-width: none; padding: 0; }
.settings-content:has(.sp-roles-panel.active) { padding: 0; overflow: hidden; }
.settings-content > #sp-appearance { max-width: none; }
.settings-content:has(#sp-appearance.active) { padding: 0; overflow: hidden; }
.settings-panel { display: none; }
.settings-panel.active { display: block; }

.settings-panel h3 {
  font-family: var(--ui-font);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 20px;
}
.settings-panel h4 {
  font-family: var(--ui-font);
  color: var(--text);
}
.sp-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.sp-panel-header h3 { margin: 0; }

/* ── Applications panel ── */
.sp-apps-filter-btn {
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  cursor: pointer;
  border: 1px solid var(--accent-dim);
  background: transparent;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sp-apps-filter-btn.active { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.sp-apps-filter-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent); }

.sp-application-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent-dim);
  background: var(--surface-3);
  margin-bottom: 8px;
}
.sp-application-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
}
.sp-application-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sp-application-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sp-application-header-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sp-application-name { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.sp-application-date { font-size: 0.72rem; color: var(--text-muted); }
.sp-application-message {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 6px 0 0;
  padding: 6px 8px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--accent-dim);
  white-space: pre-wrap;
  word-break: break-word;
}
.sp-application-answers { margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.sp-application-qa {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius-sm);
  border-left: 2px solid var(--accent-dim);
}
.sp-application-q { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.sp-application-a { font-size: 0.84rem; color: var(--text); word-break: break-word; }
.sp-application-review-info {
  font-size: 0.72rem; color: var(--text-muted); margin-top: 6px; font-style: italic;
}
.sp-application-notes-wrap { margin-top: 8px; }
.sp-application-notes {
  width: 100%; padding: 6px 10px; background: var(--surface-0);
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-size: 0.8rem; font-family: inherit;
  resize: vertical; outline: none; min-height: 28px;
  transition: border-color .15s; box-sizing: border-box;
}
.sp-application-notes:focus { border-color: var(--accent); }
.sp-application-notes::placeholder { color: var(--text-muted); font-style: italic; }
.sp-application-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.sp-application-badge {
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 600;
  flex-shrink: 0;
}
.sp-application-badge--approved { background: rgba(67,181,129,0.15); color: #43b581; }
.sp-application-badge--denied   { background: rgba(240,71,71,0.15);  color: #f04747; }

/* Field styling */
.field-group { margin-bottom: 16px; }
.field-label {
  display: block;
  font-size: 0.7rem;
  font-family: var(--label-font);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.settings-panel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]),
.settings-panel select,
.settings-panel textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 14px;
  font-family: var(--ui-font);
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.2s;
}
.settings-panel input:focus,
.settings-panel select:focus,
.settings-panel textarea:focus {
  border-color: var(--accent);
}
.settings-panel select option { background: var(--surface-1); color: var(--text); }
.settings-panel textarea { resize: vertical; min-height: 80px; }

.settings-panel input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.settings-panel input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.settings-panel input[type="checkbox"]:checked::after {
  content: '\2713';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--bg);
  font-weight: bold;
}

/* Panel action bar */
.settings-panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--accent-dim);
}

/* Upload row (reuse) */
.settings-panel .upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.settings-panel .icon-preview {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 2px solid var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--text-muted);
  overflow: hidden;
}
.settings-panel .icon-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.settings-panel .banner-preview {
  width: 220px;
  height: 64px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.settings-panel .banner-preview img { width: 100%; height: 100%; object-fit: cover; }
.settings-panel .upload-btn {
  padding: 6px 14px;
  background: var(--btn-bg);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s;
}
.settings-panel .upload-btn:hover { color: var(--accent); border-color: var(--accent); }
.settings-panel .upload-file-name { font-size: 0.72rem; color: var(--text-muted); }

/* Styled file upload */
.styled-file-upload {
  display: flex;
  align-items: center;
  gap: 10px;
}
.styled-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.styled-file-btn {
  cursor: pointer;
  font-size: 0.82rem;
  padding: 7px 16px;
  white-space: nowrap;
}
.styled-file-name {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Bot token display */
.bot-token-display {
  background: var(--surface-1);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  overflow-x: auto;
}
.bot-token-code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.82rem;
  color: var(--accent);
  word-break: break-all;
  user-select: all;
}

/* btn-sm */
.btn-sm {
  padding: 5px 14px !important;
  font-size: 0.78rem !important;
  background: var(--surface-3) !important;
  color: var(--text) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}
.btn-sm:hover { background: var(--surface-2) !important; }

/* ── Creation Dialog (Guilded-style) ────────────────── */
.creation-dialog {
  width: min(640px, 95vw);
  padding: 0;
}

.creation-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--accent-dim);
}
.creation-dialog-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  text-align: center;
}

.creation-back-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
}
.creation-back-btn:hover { color: var(--text); }

.creation-step { padding: 28px 32px; overflow-y: auto; }

.creation-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-bottom: 24px;
}

/* Choice cards grid */
.creation-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 660px;
  margin: 0 auto;
}
.creation-choice-card {
  background: var(--surface-2);
  border: 1.5px solid var(--accent-dim);
  border-radius: var(--radius-md);
  padding: 28px 20px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--ui-font);
}
.creation-choice-card:hover {
  border-color: var(--accent);
  box-shadow: var(--accent-glow);
  background: var(--surface-3);
}
.creation-choice-icon { font-size: 2rem; }
.creation-choice-label {
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
}
.creation-choice-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ── Server creation wizard steps ──────────────── */
.creation-step-center {
  max-width: 440px;
  margin: 0 auto;
  text-align: center;
}
.creation-step-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
}
.creation-step-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0 0 20px;
  line-height: 1.4;
}
.creation-template-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  padding: 12px 0 6px;
}
.creation-template-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.creation-template-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  text-align: left;
}
.creation-template-btn:hover { background: var(--surface-3); border-color: var(--text-muted); }
.creation-template-icon { font-size: 1.4rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
.creation-template-icon svg { width: 22px; height: 22px; color: var(--accent); }
.creation-template-name { flex: 1; }
.creation-template-arrow { color: var(--text-muted); font-size: 1.2rem; }
.creation-join-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--card-border);
  text-align: center;
}
.creation-join-section p { font-size: 0.88rem; color: var(--text-muted); margin: 0 0 8px; }
.creation-join-btn {
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  color: var(--text);
  padding: 8px 0;
  width: 100%;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
}
.creation-join-btn:hover { background: var(--surface-3); }
.creation-skip-text {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 16px;
}
.creation-skip-text a { color: var(--accent); text-decoration: none; }
.creation-skip-text a:hover { text-decoration: underline; }
.creation-back-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.88rem;
  cursor: pointer;
  padding: 8px 0;
}
.creation-back-link:hover { color: var(--text); }

/* Split layout: form + preview */
.creation-split {
  display: flex;
  gap: 0;
  padding: 20px 24px;
  overflow-y: auto;
}
.creation-form {
  flex: 1;
  padding: 0 24px;
}
.creation-form .dialog-field { margin-bottom: 12px; }
.creation-preview {
  flex: 0 0 180px;
  border-left: 1px solid var(--accent-dim);
  padding-left: 20px;
}
.creation-preview-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-family: var(--label-font);
}

/* Preview card */
.creation-preview-card {
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  padding: 16px;
  font-size: 0.8rem;
}
.creation-preview-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--accent-dim);
}
.creation-preview-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--text);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.creation-preview-name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.9rem;
}
.creation-preview-section-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 6px;
  margin-top: 8px;
  font-family: var(--label-font);
}
.creation-preview-channel {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 3px 0;
}
.creation-preview-members { margin-top: 12px; }
.creation-preview-member {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text);
  padding: 3px 0;
}
.creation-preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}
.creation-preview-dot.online { background: #4caf50; }

/* Icon upload area */
.creation-icon-upload {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 2px dashed var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s;
}
.creation-icon-upload:hover { border-color: var(--accent); }
.creation-icon-letter {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-muted);
}
.creation-icon-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  background: var(--surface-1);
  border: 1px solid var(--accent-dim);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
}

/* Label styling */
.creation-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-family: var(--label-font);
}

/* Actions */
.creation-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.creation-primary-btn {
  width: 100%;
  padding: 10px 20px !important;
  font-size: 0.9rem !important;
  font-weight: 600;
  text-align: center;
}
.creation-text-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 4px 12px;
  font-family: var(--ui-font);
  transition: color 0.2s;
}
.creation-text-btn:hover { color: var(--text); }

/* Invite preview box restyle */
.invite-preview-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Responsive: stack on small screens */
@media (max-width: 580px) {
  .creation-split { flex-direction: column; padding: 20px 24px; }
  .creation-form { padding-right: 0; padding-bottom: 20px; }
  .creation-preview { border-left: none; border-top: 1px solid var(--accent-dim); padding-left: 0; padding-top: 20px; flex: 0 0 auto; }
  .creation-choice-grid { grid-template-columns: 1fr; }
}

/* ── Bot Badge ──────────────────────────────────────── */
.bot-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
  font-family: var(--label-font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Flow List Items ────────────────────────────────── */
.flow-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.flow-item-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.flow-item-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-item-trigger {
  font-size: 0.7rem;
  background: var(--accent-dim);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
}
.flow-item-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* ── Bot List Items ─────────────────────────────────── */
.bot-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.bot-item-info { flex: 1; min-width: 0; }
.bot-item-name { font-weight: 600; color: var(--text); }
.bot-item-username { font-size: 0.75rem; color: var(--text-muted); }
.bot-item-token {
  font-family: monospace;
  font-size: 0.75rem;
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 3px;
  color: var(--text-muted);
  user-select: all;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bot-item-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* ── Flow Editor Dialog ─────────────────────────────── */
.flow-section { margin-bottom: 16px; }
.flow-section-title {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-family: var(--label-font);
}
.flow-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.flow-row select, .flow-row input, .flow-row textarea { flex: 1; }
.flow-row .btn-remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.flow-row .btn-remove:hover { color: #ff6b8a; border-color: #ff6b8a; }

/* ── Toggle Switch ──────────────────────────────────── */
.flow-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--accent-dim);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
  border: none;
  flex-shrink: 0;
}
.flow-toggle.active { background: var(--accent); }
.flow-toggle::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
}
.flow-toggle.active::after { transform: translateX(16px); }

/* ── Flow template hint ─────────────────────────────── */
.flow-template-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 4px;
  font-family: var(--ui-font);
}
.flow-template-hint code {
  background: var(--surface-2);
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 0.68rem;
}

/* ── Image Editor Dialog ──────────────────────────────── */
.image-editor-dialog {
  max-width: 620px;
  width: 95vw;
}
.image-editor-dialog::backdrop { background: rgba(0,0,0,0.7); }

.ie-body {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  min-height: 0;
}

.ie-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#ie-canvas {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  touch-action: none;
}

.ie-gif-warning {
  font-size: 0.75rem;
  color: #f59e0b;
  background: rgba(245,158,11,0.1);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

.ie-sidebar {
  width: 150px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ie-preview-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

#ie-preview {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.ie-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ie-mode-toggle {
  display: flex;
  gap: 4px;
}
.ie-mode-toggle .btn-sm {
  flex: 1;
  font-size: 0.72rem;
  padding: 5px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}
.ie-mode-toggle .btn-sm.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.ie-bg-swatches {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.ie-swatch {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s;
  padding: 0;
}
.ie-swatch:hover { border-color: var(--text-muted); }
.ie-swatch.active { border-color: var(--accent); }

.ie-swatch-transparent {
  background:
    linear-gradient(45deg, #444 25%, transparent 25%),
    linear-gradient(-45deg, #444 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #444 75%),
    linear-gradient(-45deg, transparent 75%, #444 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
  background-color: #666;
}

#ie-bg-custom {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  background: none;
}
#ie-bg-custom::-webkit-color-swatch-wrapper { padding: 1px; }
#ie-bg-custom::-webkit-color-swatch { border: none; border-radius: 2px; }
#ie-bg-custom.active { border-color: var(--accent); }

@media (max-width: 500px) {
  .ie-body { flex-direction: column; align-items: center; }
  .ie-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
  #ie-preview { width: 80px; height: auto; }
}

/* ── Emoji Picker Panel ───────────────────────────────── */
#emoji-picker-panel {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  background: var(--surface-1);
  border: 1.5px solid var(--accent-dim);
  border-radius: var(--radius-lg);
  box-shadow: var(--accent-glow), 0 8px 32px rgba(0,0,0,0.5);
  width: 380px;
  max-width: 95vw;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#emoji-picker-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px 0;
  flex-shrink: 0;
}

#emoji-picker-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
}

.emoji-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.emoji-tab:hover { color: var(--text); }
.emoji-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

#btn-close-emoji-picker {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: color 0.15s;
}
#btn-close-emoji-picker::after { content: '✕'; }
#btn-close-emoji-picker:hover { color: var(--text); }

#emoji-search-bar {
  padding: 6px 10px;
  border-bottom: 1px solid var(--accent-dim);
  flex-shrink: 0;
}

#emoji-search-input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 6px 10px;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s;
}
#emoji-search-input:focus { border-color: var(--accent); }

#emoji-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}

#emoji-grid.emote-grid {
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.emoji-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  font-size: 1.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s, transform 0.1s;
}
.emoji-item:hover { background: var(--surface-3); transform: scale(1.15); }

.emote-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s;
  overflow: hidden;
}
.emote-item:hover { background: var(--surface-3); }
.emote-item img { width: 32px; height: 32px; object-fit: contain; }
.emote-item span {
  font-size: 0.58rem;
  color: var(--text-muted);
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emoji-category-label {
  grid-column: 1 / -1;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 6px 2px 2px;
}

#emoji-picker-empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.emoji-btn {
  width: 22px !important;
  height: 22px !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  opacity: 0.6;
  transition: opacity 0.15s !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.emoji-btn svg { width: 18px; height: 18px; }
.emoji-btn:hover { opacity: 1; }

/* Emote in messages */
.msg-emote {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  display: inline;
  object-fit: contain;
}

/* ── Server Full-Page Section Views ───────────────── */
.members-fullpage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.members-fullpage-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.members-fullpage-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}
.members-fullpage-search {
  width: 200px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
}
.members-fullpage-controls select,
#smp-role-filter,
#smp-sort {
  padding: 6px 28px 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 6px;
  outline: none;
  min-width: 90px;
}
.members-fullpage-controls select:hover,
#smp-role-filter:hover,
#smp-sort:hover {
  border-color: var(--accent);
}
.members-fullpage-controls select:focus,
#smp-role-filter:focus,
#smp-sort:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(110,110,245,.15);
}
.members-fullpage-controls select option {
  background: var(--surface-1);
  color: var(--text);
}
.members-fullpage-table-header {
  display: grid;
  grid-template-columns: 32px 1fr 100px 100px 90px 180px 70px;
  padding: 8px 24px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 8px;
  align-items: center;
}
.members-fullpage-list {
  flex: 1;
  overflow-y: auto;
}
.mfp-member-row {
  display: grid;
  grid-template-columns: 32px 1fr 100px 100px 90px 180px 70px;
  align-items: center;
  padding: 8px 24px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
  gap: 8px;
}
.mfp-member-row:hover { background: var(--surface-2); }
.mfp-member-row { cursor: default; }
.mfp-roles-manage { position: relative; display: flex; align-items: center; gap: 6px; }
.mfp-roles-display { display: flex; flex-wrap: wrap; gap: 3px; }
.mfp-roles-edit-btn {
  background: none; border: 1px solid var(--border); border-radius: 4px; padding: 3px 5px;
  color: var(--text-muted); cursor: pointer; opacity: 0; transition: opacity .15s;
  display: flex; align-items: center;
}
.mfp-member-row:hover .mfp-roles-edit-btn { opacity: 1; }
.mfp-roles-edit-btn:hover { color: var(--accent); border-color: var(--accent); }
.mfp-roles-dropdown {
  position: absolute; top: 100%; right: 0; z-index: 50;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px; min-width: 220px; max-height: 300px; overflow-y: auto;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.mfp-roles-dropdown-title {
  padding: 4px 8px 8px; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.mfp-role-opt {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  font-size: .85rem; cursor: pointer; transition: background .12s;
  border-radius: 8px; margin: 2px 0;
}
.mfp-role-opt:hover { background: var(--surface-2); }
.mfp-role-opt input[type="checkbox"] { display: none; }
.mfp-role-opt .mfp-role-check {
  width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0;
  border: 2px solid var(--border); display: flex; align-items: center;
  justify-content: center; transition: all .12s; margin-left: auto;
}
.mfp-role-opt input[type="checkbox"]:checked ~ .mfp-role-check {
  border-color: var(--accent); background: var(--accent);
}
.mfp-role-opt input[type="checkbox"]:checked ~ .mfp-role-check::after {
  content: '✓'; font-size: .65rem; color: var(--bg); font-weight: 700;
}
.mfp-role-icon-sm {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .55rem; font-weight: 700; overflow: hidden;
}
.mfp-role-icon-sm img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mfp-col-user { display: flex; align-items: center; gap: 10px; }
.mfp-avatar-wrap { position: relative; flex-shrink: 0; }
.mfp-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.mfp-avatar-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mfp-status-dot {
  position: absolute; bottom: -1px; right: -1px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2.5px solid var(--surface-1); box-sizing: border-box;
}
.mfp-status-online { background: #43b581; }
.mfp-status-offline { background: #747f8d; }
.mfp-user-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mfp-name-line { display: flex; align-items: center; gap: 6px; }
.mfp-username { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.mfp-realname { font-size: 0.72rem; color: var(--text-muted); }
.mfp-owner-badge {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  background: rgba(250,166,26,0.15); color: #faa61a; padding: 1px 6px; border-radius: 3px;
}
.mfp-col-check { display: flex; align-items: center; justify-content: center; }
.mfp-col-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 4px; cursor: pointer;
  border: 2px solid var(--text-muted); background: transparent;
  position: relative; transition: all .15s; flex-shrink: 0;
}
.mfp-col-check input[type="checkbox"]:checked {
  border-color: #5865f2; background: #5865f2;
}
.mfp-col-check input[type="checkbox"]:checked::after {
  content: ''; position: absolute; top: 2px; left: 5px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mfp-col-check input[type="checkbox"]:hover { border-color: #5865f2; }
.mfp-col-joined, .mfp-col-created, .mfp-col-method, .mfp-col-signals {
  font-size: 0.8rem; color: var(--text-muted);
}
.smp-signal { font-size: 0.85rem; cursor: default; }
.smp-bulk-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 24px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-size: 0.82rem; color: var(--text-muted); flex-shrink: 0;
}
.mfp-role-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-right: 4px;
  border: 1px solid currentColor;
  opacity: 0.8;
}
/* ── Access Panel ─────────────────────────────────── */
.sp-access-section { margin-bottom: 28px; }
.sp-access-heading { font-size: 0.95rem; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.sp-access-desc { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 14px; }
.sp-access-cards { display: flex; gap: 12px; }
.sp-access-card {
  flex: 1; padding: 20px 16px; border: 2px solid var(--border); border-radius: 12px;
  cursor: pointer; transition: all .15s; text-align: center; background: var(--surface-1);
}
.sp-access-card:hover { border-color: var(--text-muted); background: var(--surface-2); }
.sp-access-card.active { border-color: var(--accent); background: var(--accent-dim, rgba(110,110,245,.08)); }
.sp-access-card-icon { margin-bottom: 10px; color: var(--text-muted); }
.sp-access-card.active .sp-access-card-icon { color: var(--accent); }
.sp-access-card-label { font-size: 0.9rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.sp-access-card-desc { font-size: 0.72rem; color: var(--text-muted); line-height: 1.4; }
.sp-access-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sp-toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.sp-toggle input { display: none; }
.sp-toggle-slider {
  position: absolute; inset: 0; background: var(--surface-3); border-radius: 11px;
  cursor: pointer; transition: background .2s;
}
.sp-toggle-slider::before {
  content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; left: 3px; top: 3px; transition: transform .2s;
}
.sp-toggle input:checked + .sp-toggle-slider { background: var(--accent); }
.sp-toggle input:checked + .sp-toggle-slider::before { transform: translateX(18px); }
.sp-access-rules-label {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 8px;
}
.sp-access-rule-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--surface-2); border-radius: 8px; margin-bottom: 6px;
}
.sp-access-rule-num { font-size: 0.8rem; color: var(--text-muted); min-width: 20px; }
.sp-access-rule-text { flex: 1; font-size: 0.85rem; color: var(--text); }
.sp-access-rule-delete {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 1.1rem; padding: 2px 6px; border-radius: 4px; transition: all .12s;
}
.sp-access-rule-delete:hover { color: var(--danger, #f44); background: rgba(244,68,68,.1); }
.sp-access-rule-add { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.sp-access-rule-add input {
  flex: 1; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: 0.85rem;
}
.sp-access-example-rules { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-example-rule-chip {
  padding: 6px 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 16px; color: var(--text-muted); font-size: 0.78rem; cursor: pointer;
  transition: all .12s;
}
.sp-example-rule-chip:hover { border-color: var(--accent); color: var(--text); background: var(--surface-3); }

/* Application question builder */
.sp-app-q-row {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--surface-2); border-radius: 8px; margin-bottom: 6px;
}
.sp-app-q-text { flex: 1; font-size: 0.85rem; color: var(--text); }
.sp-app-q-type {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 4px; background: var(--surface-3);
  color: var(--text-muted); white-space: nowrap; flex-shrink: 0;
}
.sp-app-add-wrap { position: relative; margin-top: 8px; }
.sp-app-type-dropdown {
  position: absolute; top: 100%; left: 0; z-index: 50; margin-top: 4px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  padding: 4px; min-width: 200px; box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.sp-app-type-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 8px 12px; background: none; border: none; border-radius: 6px;
  color: var(--text); font-size: 0.85rem; cursor: pointer; transition: background .12s;
}
.sp-app-type-item:hover { background: var(--surface-2); }
.sp-app-type-icon { color: var(--text-muted); font-size: 1rem; }
.sp-app-mc-opt { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sp-app-mc-input {
  flex: 1; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-size: 0.85rem;
}

/* ── Tutorial Overlay ─────────────────────────────── */
.tutorial-overlay {
  position: fixed; inset: 0; z-index: 99999;
  cursor: pointer;
}
.tutorial-spotlight {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.72);
  background: transparent;
  transition: all .4s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  border: 2px solid rgba(99,102,241,0.5);
}
.tutorial-tooltip {
  position: absolute; padding: 22px 24px;
  background: var(--surface-1); border: 1px solid rgba(99,102,241,0.3);
  border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.7), 0 0 20px rgba(99,102,241,0.1);
  cursor: default; transition: all .4s cubic-bezier(.4,0,.2,1);
}
.tutorial-tooltip-step {
  font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); margin-bottom: 6px;
}
.tutorial-tooltip-title {
  font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 8px;
}
.tutorial-tooltip-desc {
  font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 18px;
}
.tutorial-tooltip-footer {
  display: flex; align-items: center; justify-content: space-between;
}
.tutorial-tooltip-dots { display: flex; gap: 5px; }
.tutorial-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--surface-3);
  transition: all .2s;
}
.tutorial-dot.active { background: var(--accent); width: 18px; border-radius: 3px; }
.tutorial-tooltip-btns { display: flex; gap: 8px; }
.tutorial-skip-btn {
  background: none; border: none; color: var(--text-muted); font-size: 0.8rem;
  cursor: pointer; padding: 6px 12px; border-radius: 8px; transition: all .12s;
}
.tutorial-skip-btn:hover { color: var(--text); background: var(--surface-2); }
.tutorial-next-btn {
  background: var(--accent); color: #fff; border: none; font-size: 0.82rem;
  font-weight: 600; padding: 7px 20px; border-radius: 8px; cursor: pointer;
  transition: all .12s;
}
.tutorial-next-btn:hover { filter: brightness(1.1); }

/* ── E2E Decrypt Banner & Password Dialog ────────────── */
.e2e-decrypt-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(90deg, rgba(99,102,241,0.12), rgba(99,102,241,0.06));
  border-bottom: 1px solid rgba(99,102,241,0.2);
  font-size: 0.85rem;
  color: var(--text-muted);
  flex-shrink: 0;
  z-index: 5;
}
.e2e-banner-icon { font-size: 1rem; }
.e2e-banner-text { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.e2e-banner-btn {
  background: none; border: none; color: var(--accent); font-size: 0.85rem;
  cursor: pointer; text-decoration: underline; padding: 0; font-weight: 600;
  transition: color .12s;
}
.e2e-banner-btn:hover { color: #818cf8; }

/* Password dialog overlay */
.e2e-pw-dialog-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.e2e-pw-dialog {
  background: var(--surface-1); border-radius: 12px;
  padding: 28px 32px; width: 380px; max-width: 90vw;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  border: 1px solid var(--border);
}
.e2e-pw-dialog-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.e2e-pw-dialog-header h3 { margin: 0; font-size: 1.1rem; color: var(--text); }
.e2e-pw-icon { font-size: 1.3rem; }
.e2e-pw-dialog-desc {
  font-size: 0.85rem; color: var(--text-muted); margin: 0 0 16px 0; line-height: 1.4;
}
.e2e-pw-dialog-field { margin-bottom: 16px; }
.e2e-pw-dialog-field input {
  width: 100%; padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-0);
  color: var(--text); font-size: 0.92rem; outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}
.e2e-pw-dialog-field input:focus { border-color: var(--accent); }
.e2e-pw-error {
  display: block; margin-top: 6px; font-size: 0.8rem; color: #f04747; min-height: 1.1em;
}
.e2e-pw-dialog-btns { display: flex; justify-content: flex-end; gap: 10px; }
.e2e-pw-cancel {
  background: var(--surface-2); border: none; color: var(--text-muted);
  padding: 8px 18px; border-radius: 8px; cursor: pointer; font-size: 0.88rem;
  transition: all .12s;
}
.e2e-pw-cancel:hover { background: var(--surface-3); color: var(--text); }
.e2e-pw-submit {
  background: var(--accent); border: none; color: #fff; font-weight: 600;
  padding: 8px 22px; border-radius: 8px; cursor: pointer; font-size: 0.88rem;
  transition: all .12s;
}
.e2e-pw-submit:hover { filter: brightness(1.1); }
.e2e-pw-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ── Application Overlay ──────────────────────────── */
.app-apply-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .2s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.app-apply-card {
  background: var(--surface-1); border-radius: 16px;
  padding: 32px; width: 480px; max-width: 95vw; max-height: 85vh;
  overflow-y: auto; box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  border: 1px solid var(--border);
}
.app-apply-header { display: flex; align-items: center; gap: 16px; }
.app-apply-icon {
  width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex-shrink: 0;
}
.app-apply-icon-letter {
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 1.4rem; font-weight: 700;
}
.app-apply-server-info { flex: 1; min-width: 0; }
.app-apply-server-name { margin: 0; font-size: 1.15rem; color: var(--text); }
.app-apply-desc {
  margin: 4px 0 0; font-size: 0.82rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-apply-members {
  font-size: 0.75rem; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
}
.app-apply-members::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #43b581;
}
.app-apply-divider { height: 1px; background: var(--border); margin: 20px 0; }
.app-apply-title { margin: 0 0 6px; font-size: 1.05rem; color: var(--text); }
.app-apply-subtitle { margin: 0 0 20px; font-size: 0.82rem; color: var(--text-muted); line-height: 1.4; }
.app-apply-questions { display: flex; flex-direction: column; gap: 16px; }
.app-apply-field { display: flex; flex-direction: column; gap: 6px; }
.app-apply-label { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.app-apply-input {
  width: 100%; padding: 10px 14px; background: var(--surface-0);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 0.88rem; font-family: inherit;
  outline: none; transition: border-color .15s; box-sizing: border-box;
}
.app-apply-input:focus { border-color: var(--accent); }
.app-apply-textarea { min-height: 80px; resize: vertical; }
.app-apply-mc-group { display: flex; flex-direction: column; gap: 8px; }
.app-apply-mc {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--surface-0); border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer; font-size: 0.88rem; color: var(--text);
  transition: all .15s;
}
.app-apply-mc:hover { border-color: #5865f2; background: rgba(88,101,242,0.06); }
.app-apply-mc:has(input:checked) { border-color: #5865f2; background: rgba(88,101,242,0.1); }
.app-apply-mc input[type="radio"],
.app-apply-mc input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--text-muted); background: transparent;
  position: relative; cursor: pointer; transition: all .15s;
}
.app-apply-mc input[type="checkbox"] { border-radius: 4px; }
.app-apply-mc input[type="radio"]:checked,
.app-apply-mc input[type="checkbox"]:checked {
  border-color: #5865f2; background: #5865f2;
}
.app-apply-mc input[type="radio"]:checked::after {
  content: ''; position: absolute; top: 4px; left: 4px;
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
}
.app-apply-mc input[type="checkbox"]:checked::after {
  content: ''; position: absolute; top: 2px; left: 5px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.app-apply-mc span { flex: 1; }
.app-apply-error { color: #f04747; font-size: 0.8rem; margin: 8px 0 0; min-height: 1em; }
.app-apply-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.app-apply-btn-cancel {
  background: var(--surface-2); border: none; color: var(--text-muted);
  padding: 10px 22px; border-radius: 8px; cursor: pointer; font-size: 0.88rem;
  transition: all .12s;
}
.app-apply-btn-cancel:hover { background: var(--surface-3); color: var(--text); }
.app-apply-btn-submit {
  background: #5865f2; border: none; color: #fff; font-weight: 600;
  padding: 10px 24px; border-radius: 8px; cursor: pointer; font-size: 0.88rem;
  transition: all .12s;
}
.app-apply-btn-submit:hover { background: #4752c4; }
.app-apply-btn-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ── Bans Panel (Discord-style) ───────────────────── */
.sp-bans-desc { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 16px; }
.sp-bans-search-row { display: flex; gap: 8px; margin-bottom: 16px; }
.sp-bans-search {
  flex: 1; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-size: 0.85rem;
}
.sp-bans-list { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; min-height: 200px; }
.sp-bans-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px; text-align: center;
}
.sp-bans-empty-icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.3; }
.sp-bans-empty-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.sp-bans-empty-desc { font-size: 0.82rem; color: var(--text-muted); max-width: 280px; }
.sp-ban-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); transition: background .1s;
}
.sp-ban-row:last-child { border-bottom: none; }
.sp-ban-row:hover { background: var(--surface-2); }
.sp-ban-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.sp-ban-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--text-muted); font-size: 0.85rem; font-weight: 700;
}
.sp-ban-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sp-ban-name { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.sp-ban-reason { font-size: 0.75rem; color: var(--text-muted); }
.sp-ban-revoke {
  background: none; border: 1px solid var(--danger, #f44); color: var(--danger, #f44);
  padding: 4px 12px; border-radius: 6px; font-size: 0.75rem; cursor: pointer; transition: all .12s;
}
.sp-ban-revoke:hover { background: var(--danger, #f44); color: #fff; }

/* ── Audit Log Panel (Discord-style) ──────────────── */
.sp-audit-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.sp-audit-filters { display: flex; gap: 16px; }
.sp-audit-filter-group { display: flex; flex-direction: column; gap: 4px; }
.sp-audit-filter-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.sp-audit-filter-group select {
  padding: 8px 28px 8px 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-size: 0.82rem; cursor: pointer;
  appearance: none; -webkit-appearance: none; min-width: 140px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 10px 6px;
}
.sp-audit-entries { display: flex; flex-direction: column; }
.sp-audit-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--border); transition: background .1s; position: relative;
}
.sp-audit-row:hover { background: var(--surface-2); }
.sp-audit-icon { font-size: 0.85rem; color: var(--text-muted); width: 20px; text-align: center; flex-shrink: 0; }
.sp-audit-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.sp-audit-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--text-muted); font-size: 0.7rem; font-weight: 700;
}
.sp-audit-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-audit-text { font-size: 0.85rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-audit-text strong { font-weight: 700; }
.sp-audit-time { font-size: 0.72rem; color: var(--text-muted); }
.sp-audit-expand { color: var(--text-muted); font-size: 1.2rem; flex-shrink: 0; padding: 0 4px; }
.sp-audit-details {
  width: 100%; padding: 8px 12px; margin-top: 6px;
  background: var(--surface-2); border-radius: 8px; font-size: 0.78rem;
}
.sp-audit-detail-row { display: flex; gap: 8px; padding: 2px 0; }
.sp-audit-detail-key { color: var(--text-muted); min-width: 100px; }
.sp-audit-detail-val { color: var(--text); }
.sp-audit-empty { color: var(--text-muted); padding: 40px; text-align: center; font-size: 0.9rem; }

/* ── Audit Log — Guilded-style ─────────────────────── */
.sal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.sal-filter-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.sal-filter-toggle:hover,
.sal-filter-toggle.active {
  color: var(--accent);
  border-color: var(--accent);
}
.sal-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.sal-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.sal-table-header {
  display: grid;
  grid-template-columns: 220px 1fr 120px;
  padding: 8px 24px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}
.sal-table-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px;
}
.sal-row {
  display: grid;
  grid-template-columns: 220px 1fr 120px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  gap: 12px;
}
.sal-row:last-child { border-bottom: none; }
.sal-col-member {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sal-actor-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.sal-actor-initials {
  background: var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}
.sal-actor-name {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sal-col-action {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  min-width: 0;
}
.sal-action-icon {
  font-size: 1rem;
  color: var(--accent);
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
.sal-action-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sal-action-text em {
  font-style: normal;
  color: var(--text-muted);
}
.sal-col-when {
  color: var(--text-muted);
  font-size: 0.78rem;
  text-align: right;
  white-space: nowrap;
}
.sal-empty {
  color: var(--text-muted);
  padding: 40px;
  text-align: center;
  font-size: 0.9rem;
}

/* Audit filter panel */
.sal-filter-panel {
  width: 220px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  background: var(--surface-2);
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sal-filter-section { display: flex; flex-direction: column; gap: 6px; }
.sal-filter-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.sal-filter-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
  padding: 2px 0;
}
.sal-filter-opt input { accent-color: var(--accent); }
.sal-filter-actions-list,
.sal-filter-members-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 180px;
  overflow-y: auto;
}
.sal-member-search {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 0.8rem;
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
}

/* ── Rules Area ──────────────────────────────────── */
.rules-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
}
.rules-list {
  list-style: none;
  counter-reset: rule-counter;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 680px;
}
.rules-item {
  counter-increment: rule-counter;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.5;
}
.rules-item::before {
  content: counter(rule-counter);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.rules-empty,
.rules-loading {
  color: var(--text-muted);
  padding: 40px;
  text-align: center;
  font-size: 0.9rem;
}

/* Legacy sal-entry */
.sal-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.sal-action {
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
  min-width: 160px;
}

/* ── Missing modal utility classes ────────────────── */
.modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.modal-close:hover { color: var(--text); background: var(--surface-3); }

/* ── Inline Format Toolbar ────────────────────────── */
#text-format-bar {
  position: fixed;
  z-index: 1600;
  background: #1a1c21;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 4px 6px;
  display: flex;
  gap: 2px;
  align-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  pointer-events: auto;
}
#text-format-bar::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1a1c21;
  border-bottom: none;
}
#text-format-bar button {
  background: none;
  border: none;
  color: #c8ccd4;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 0.88rem;
  line-height: 1;
  transition: background 0.1s, color 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
}
#text-format-bar button:hover { background: rgba(255,255,255,0.1); color: #fff; }
#text-format-bar button + button { border-left: 1px solid rgba(255,255,255,0.08); }

/* ── Context Menu ─────────────────────────────────── */
.ctx-menu {
  position: fixed;
  z-index: 1500;
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  padding: 4px;
  min-width: 170px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
  user-select: none;
  overflow: visible;
}
.ctx-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  font-size: 0.82rem;
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  gap: 8px;
}
.ctx-item:hover { background: var(--surface-3); }
.ctx-danger { color: #e74c3c; }
.ctx-danger:hover { background: rgba(231,76,60,0.12); }
.ctx-arrow { font-size: 0.75rem; color: var(--text-muted); }
.ctx-divider { height: 1px; background: var(--accent-dim); margin: 3px 4px; }
.ctx-has-sub { position: relative; }
.ctx-submenu {
  display: none;
  position: absolute;
  top: -4px;
  left: calc(100% + 4px);
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-md);
  padding: 4px;
  min-width: 170px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
  z-index: 1502;
}
.ctx-submenu.visible { display: block; }
.ctx-submenu .ctx-item { font-size: 0.82rem; }

/* ── Share Picker Modal ────────────────────────────── */
.share-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1400;
  align-items: center;
  justify-content: center;
}
.share-picker-overlay[style*="flex"] { display: flex !important; }
.share-picker-modal {
  background: var(--surface-1);
  border: 1.5px solid var(--accent-dim);
  border-radius: var(--radius-lg);
  width: 360px;
  max-width: 95vw;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.65);
}
.share-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  font-weight: 600;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--accent-dim);
  flex-shrink: 0;
}
.share-picker-search {
  margin: 10px 12px 6px;
  flex-shrink: 0;
}
.share-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 8px;
}
.share-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text);
}
.share-picker-item:hover { background: var(--surface-3); }
.share-picker-item img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.share-picker-item-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--text-muted); flex-shrink: 0; }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.btn-primary {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.85; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.modal-body {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

/* ── Quill rich-text editor — dark theme ────────── */
.rich-editor-wrap { display: flex; flex-direction: column; }
.ql-toolbar.ql-snow {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-bottom: none !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  padding: 6px 8px !important;
  flex-shrink: 0;
}
.ql-toolbar.ql-snow .ql-formats { margin-right: 8px; }
.ql-toolbar.ql-snow button,
.ql-toolbar.ql-snow .ql-picker-label {
  color: var(--text-muted) !important;
}
.ql-toolbar.ql-snow button:hover,
.ql-toolbar.ql-snow button.ql-active,
.ql-toolbar.ql-snow .ql-picker-label:hover,
.ql-toolbar.ql-snow .ql-picker-label.ql-active {
  color: var(--accent) !important;
}
.ql-toolbar.ql-snow button svg .ql-stroke { stroke: var(--text-muted) !important; }
.ql-toolbar.ql-snow button:hover svg .ql-stroke,
.ql-toolbar.ql-snow button.ql-active svg .ql-stroke { stroke: var(--accent) !important; }
.ql-toolbar.ql-snow button svg .ql-fill { fill: var(--text-muted) !important; }
.ql-toolbar.ql-snow button:hover svg .ql-fill,
.ql-toolbar.ql-snow button.ql-active svg .ql-fill { fill: var(--accent) !important; }
.ql-container.ql-snow {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  color: var(--text) !important;
  flex: 1;
}
.ql-editor {
  min-height: 160px;
  color: var(--text) !important;
  line-height: 1.6;
  padding: 12px 14px !important;
}
.ql-editor.ql-blank::before {
  color: var(--text-muted) !important;
  font-style: normal !important;
}
.ql-editor h1, .ql-editor h2, .ql-editor h3 { color: var(--text) !important; }
.ql-editor a { color: var(--accent) !important; }
.ql-editor blockquote {
  border-left: 3px solid var(--accent-dim) !important;
  color: var(--text-muted) !important;
  padding-left: 12px !important;
  margin: 8px 0 !important;
}
.ql-editor pre.ql-syntax {
  background: var(--surface-3) !important;
  color: var(--accent) !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
  font-size: 0.82rem !important;
}
.ql-snow .ql-picker { color: var(--text-muted) !important; }
.ql-snow .ql-picker-options {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
.ql-snow .ql-picker-item { color: var(--text) !important; }
.ql-snow .ql-picker-item:hover { color: var(--accent) !important; background: var(--surface-3) !important; }
.ql-snow .ql-tooltip {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
.ql-snow .ql-tooltip input[type=text] {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
}
.ql-snow .ql-tooltip a.ql-action,
.ql-snow .ql-tooltip a.ql-remove { color: var(--accent) !important; }

/* Forum post dialog with rich editor */
#dialog-new-post,
#dialog-new-doc,
#dialog-new-blog-post {
  background: var(--surface-1);
  border: 1.5px solid var(--accent-dim);
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  width: 640px;
  max-width: 95vw;
  max-height: 90vh;
  flex-direction: column;
  overflow: hidden;
}
#dialog-new-blog-post {
  width: 860px;
  height: 80vh;
}
#dialog-new-post[open],
#dialog-new-doc[open],
#dialog-new-blog-post[open] {
  display: flex;
}
#dialog-new-post::backdrop,
#dialog-new-doc::backdrop,
#dialog-new-blog-post::backdrop { background: rgba(0,0,0,0.75); }
#dialog-new-post h2,
#dialog-new-doc h2,
#dialog-new-blog-post h2 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
#dialog-new-post .dialog-field,
#dialog-new-doc .dialog-field,
#dialog-new-blog-post .dialog-field {
  padding: 12px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#dialog-new-post .dialog-field label,
#dialog-new-doc .dialog-field label,
#dialog-new-blog-post .dialog-field label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
#new-post-title,
#new-blog-title,
#new-blog-cover {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.9rem;
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
}
#new-post-title:focus,
#new-blog-title:focus,
#new-blog-cover:focus { outline: none; border-color: var(--accent); }
.dialog-rich-field {
  padding: 12px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.dialog-rich-field label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  flex-shrink: 0;
}
.dialog-rich-field .rich-editor-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dialog-rich-field .ql-container { flex: 1; overflow-y: auto; }
#dialog-new-post .dialog-actions,
#dialog-new-doc .dialog-actions,
#dialog-new-blog-post .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.dialog-error { color: #e05c5c; font-size: 0.8rem; padding: 4px 20px 0; min-height: 20px; }

/* ── Forum reply rich editor ──────────────────── */
.forum-reply-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.forum-reply-editor {
  flex: 1;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
.forum-reply-editor .ql-toolbar {
  flex-wrap: wrap;
}
.forum-reply-editor .ql-container {
  min-height: 60px;
  max-height: 200px;
  overflow-y: auto;
}
.forum-reply-bar .forum-reply-send {
  align-self: flex-end;
}

/* ── Docs rich editor ─────────────────────────── */
.doc-editor-content-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0 0 12px;
}
.doc-editor-content-wrap .ql-container { flex: 1; min-height: 300px; }

/* ── Forum reply/post content render ─────────── */
.forum-reply-content.ql-editor,
.forum-detail-content.ql-editor {
  padding: 0 !important;
  min-height: unset !important;
  font-size: 0.9rem;
  color: var(--text);
}
.forum-reply-content.ql-editor p,
.forum-detail-content.ql-editor p { margin: 4px 0; }

/* ── Rules viewer ─────────────────────────────── */
.rules-viewer { pointer-events: none; }

/* ══════════════════════════════════════════════════════
   Custom Themes — settings panel list + actions
   ══════════════════════════════════════════════════════ */
.custom-themes-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.custom-theme-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s;
}
.custom-theme-item:hover { border-color: var(--accent-dim); }
.custom-theme-item.active { border-color: var(--accent); }
.custom-theme-dots {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.custom-theme-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
}
.custom-theme-name {
  flex: 1;
  font-size: .82rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-theme-btns {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.custom-theme-btn {
  background: var(--surface-3);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: .72rem;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.custom-theme-btn:hover { color: var(--accent); border-color: var(--accent-dim); }
.custom-theme-btn.danger:hover { color: #e05555; border-color: rgba(224,85,85,.3); }
.custom-themes-actions {
  display: flex;
  gap: 8px;
}
.custom-themes-actions .btn-secondary { flex: 1; font-size: .78rem; padding: 6px 4px; }
.custom-themes-actions .hub-btn {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: rgba(110,110,245,.35);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.custom-themes-actions .hub-btn:hover {
  background: rgba(110,110,245,.18);
  border-color: rgba(110,110,245,.6);
  box-shadow: 0 0 10px rgba(110,110,245,.3);
}

/* ══════════════════════════════════════════════════════
   Theme Editor Dialog
   ══════════════════════════════════════════════════════ */
.theme-editor-dialog {
  width: min(1200px, 96vw);
  max-height: 92vh;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  color: var(--text);
  padding: 0;
  overflow: hidden;
}
.theme-editor-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 92vh;
}
.theme-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
  gap: 12px;
}
.te-header-left { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.theme-editor-header h2 { font-size: .92rem; font-weight: 700; }
.te-meta { display: flex; gap: 8px; }
.te-name-input {
  flex: 1.2;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  font-size: .82rem;
  font-weight: 600;
}
.te-desc-input {
  flex: 2;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  font-size: .82rem;
  color: var(--text-muted);
}
.theme-editor-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Module nav (left column) ── */
.te-module-nav {
  width: 130px;
  flex-shrink: 0;
  border-right: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  gap: 2px;
  overflow-y: auto;
}
.te-module-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  cursor: pointer;
  color: var(--text-muted);
  font-size: .72rem;
  transition: all .12s;
  text-align: center;
}
.te-module-btn svg { width: 18px; height: 18px; opacity: .6; }
.te-module-btn:hover { color: var(--text); background: var(--accent-dim); }
.te-module-btn.active {
  color: var(--accent);
  background: var(--accent-dim);
  border-left-color: var(--accent);
}
.te-module-btn.active svg { opacity: 1; }

/* ── Properties panel (middle column) ── */
.te-props-panel {
  width: 250px;
  flex-shrink: 0;
  border-right: 1px solid var(--card-border);
  overflow-y: auto;
  padding: 16px 18px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.te-prop-group { display: flex; flex-direction: column; gap: 8px; }
.te-prop-group-label {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-muted);
  font-family: var(--label-font);
  margin-bottom: 2px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-top: 4px;
}
.te-prop-group:first-child .te-prop-group-label { margin-top: 0; }
.te-prop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
}
.te-prop-row label {
  font-size: .76rem;
  color: var(--label);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.te-prop-desc {
  font-size: .6rem;
  color: var(--text-muted);
  opacity: .7;
  font-weight: 400;
}
.te-prop-row.te-prop-highlighted {
  background: rgba(110,110,245,.12);
  border-left: 2px solid var(--accent);
  padding-left: 6px;
  margin-left: -8px;
  transition: background .3s, border-color .3s;
}
/* ── Color swatch wrapper ── */
.te-color-swatch {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255,255,255,.12); transition: border-color .15s, box-shadow .15s;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.te-color-swatch:hover { border-color: rgba(255,255,255,.3); box-shadow: 0 0 8px rgba(255,255,255,.1); }
.te-color-swatch input[type="color"] {
  position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px);
  border: none; padding: 0; cursor: pointer; opacity: 0;
}
/* ── Angle dial ── */
.te-angle-dial {
  display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
  user-select: none; flex-shrink: 0;
}
.te-angle-svg { width: 36px; height: 36px; }
.te-angle-hand { transform-origin: 20px 20px; transition: transform .1s; }
.te-angle-label { font-size: .6rem; color: var(--text-muted); }
.theme-color-pick {
  width: 30px;
  height: 22px;
  padding: 1px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  cursor: pointer;
  flex-shrink: 0;
}
.theme-color-pick::-webkit-color-swatch-wrapper { padding: 0; }
.theme-color-pick::-webkit-color-swatch { border: none; border-radius: 3px; }
.te-font-select {
  font-size: .72rem;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  flex-shrink: 0;
  max-width: 120px;
}
.te-bg-upload-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.te-bg-upload-btn {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--card-border);
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: .75rem;
  cursor: pointer;
  text-align: center;
  transition: all .12s;
}
.te-bg-upload-btn:hover { border-color: var(--accent); color: var(--accent); }
.te-bg-thumb {
  width: 100%;
  height: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--card-border);
}
.te-bg-clear-btn {
  font-size: .7rem;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.te-bg-clear-btn:hover { color: #e05555; }

/* ── Asset grid (server theme editor) ── */
.te-asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; padding: 8px 0; }
.te-asset-item { position: relative; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); cursor: pointer; transition: border-color .15s; }
.te-asset-item:hover { border-color: var(--accent); }
.te-asset-item img { width: 100%; height: 60px; object-fit: cover; display: block; }
.te-asset-info { padding: 3px 6px; display: flex; gap: 4px; align-items: center; }
.te-asset-id { font-size: .6rem; color: var(--accent); font-weight: 700; }
.te-asset-name { font-size: .6rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.te-asset-delete { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: rgba(0,0,0,.6); border: none; color: #fff; font-size: .7rem; cursor: pointer; display: none; line-height: 1; }
.te-asset-item:hover .te-asset-delete { display: flex; align-items: center; justify-content: center; }

/* ── Preview panel (right column) ── */
.te-preview-panel {
  flex: 1;
  padding: 14px 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.te-bg-image-preview {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .12;
  pointer-events: none;
}

/* ── Color mode toggle (solid / gradient / image) ── */
.te-mode-group {
  display: inline-flex;
  gap: 2px;
  flex-shrink: 0;
}
.te-mode-btn {
  width: 20px; height: 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  background: var(--surface-2);
  color: rgba(255,255,255,.35);
  font-size: .7rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; transition: all .15s;
}
.te-mode-btn:hover { color: var(--text); border-color: rgba(255,255,255,.25); }
.te-mode-btn.active {
  background: var(--accent); color: #000;
  border-color: var(--accent);
}

.te-gradient-row {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.te-grad-c1, .te-grad-c2 {
  width: 26px; height: 22px; padding: 1px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  cursor: pointer;
  flex-shrink: 0;
}
.te-grad-c1::-webkit-color-swatch-wrapper,
.te-grad-c2::-webkit-color-swatch-wrapper { padding: 0; }
.te-grad-c1::-webkit-color-swatch,
.te-grad-c2::-webkit-color-swatch { border: none; border-radius: 3px; }

/* Legacy labels (keep for backward compat) */
.theme-color-section-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-family: var(--label-font);
}

.theme-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--card-border);
  flex-shrink: 0;
  gap: 8px;
}

/* ── Inline Server Theme Editor ── */
#sp-appearance.active {
  display: flex; flex-direction: column; height: 100%;
  padding: 20px 24px; overflow: hidden;
}
.sp-te-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 10px; flex-shrink: 0;
}
.sp-te-body {
  display: flex;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex: 1;
  min-height: 0;
  background: var(--surface-2);
}
.sp-te-body > .te-module-nav {
  flex-shrink: 0; width: 140px;
  border-right: 1px solid var(--card-border);
  overflow-y: auto;
}
.sp-te-body > .te-props-panel {
  flex: 1; min-width: 220px;
  border-right: 1px solid var(--card-border);
  overflow-y: auto;
}
.sp-te-body > .te-preview-panel {
  flex: 1.6; min-width: 320px;
  display: flex; flex-direction: column;
}
.sp-te-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 10px; flex-shrink: 0; flex-wrap: wrap;
}

/* ── View tab strip ── */
.tp-header-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.tp-header-label {
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
}
.tp-view-tabs {
  display: flex;
  gap: 3px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 1px;
}
.tp-view-tabs::-webkit-scrollbar { display: none; }
.tp-view-tab {
  padding: 3px 9px;
  border-radius: 5px;
  font-size: .68rem;
  font-weight: 500;
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.tp-view-tab:hover { color: var(--text); background: var(--accent-dim); }
.tp-view-tab.active {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: var(--accent);
}

/* ── Clickable zone overlays ── */
/* Old-style zones via _zone() helper */
.tp-zone {
  position: relative;
  cursor: pointer;
  border-radius: 3px;
  outline: 1.5px solid transparent;
  outline-offset: 1px;
  transition: outline-color .12s;
}
.tp-zone:hover:not(:has(.tp-zone:hover, [data-te-zone]:hover)) { outline-color: rgba(110,110,245,.5); }
.tp-zone.tp-zone-active { outline-color: #6e6ef5; }
.tp-zone-badge {
  position: absolute;
  top: 2px; right: 3px;
  font-size: .52rem;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(110,110,245,.85);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s;
  z-index: 10;
  white-space: nowrap;
  letter-spacing: .03em;
}
.tp-zone:hover:not(:has(.tp-zone:hover, [data-te-zone]:hover)) > .tp-zone-badge,
.tp-zone.tp-zone-active > .tp-zone-badge { opacity: 1; }

/* New-style zones — raw [data-te-zone] attr without .tp-zone class */
[data-te-zone]:not(.tp-zone) {
  position: relative;
  cursor: pointer;
  outline: 1.5px solid transparent;
  outline-offset: -1px;
  transition: outline-color .12s;
}
[data-te-zone]:not(.tp-zone):hover:not(:has(.tp-zone:hover, [data-te-zone]:hover)) { outline-color: rgba(110,110,245,.5); }
[data-te-zone].tp-zone-active:not(.tp-zone) { outline-color: #6e6ef5; }
/* Badge via CSS attr() — no extra HTML needed */
[data-te-zone][data-te-label]:not(.tp-zone)::after {
  content: attr(data-te-label);
  position: absolute;
  top: 3px; right: 4px;
  font-size: .52rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(110,110,245,.85);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s;
  z-index: 10;
  white-space: nowrap;
  letter-spacing: .03em;
}
[data-te-zone][data-te-label]:not(.tp-zone):hover:not(:has(.tp-zone:hover, [data-te-zone]:hover))::after,
[data-te-zone][data-te-label].tp-zone-active:not(.tp-zone)::after { opacity: 1; }

/* ── Zone hint ── */
.tp-zone-hint {
  font-size: .64rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 5px;
  opacity: .6;
  flex-shrink: 0;
}

/* ── Theme Preview Mockup ── */
.theme-preview-panel {
  flex: 1;
  display: flex;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  background: var(--tp-bg, #080808);
  min-height: 0;
  font-size: .72rem;
}
.tp-sidebar {
  width: 40px;
  background: var(--tp-surface3, #0e0e0e);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 6px;
}
.tp-server-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tp-surface2, #181818);
}
.tp-server-icon.accent { background: var(--tp-accent, #c8c8c8); opacity: .8; }
.tp-channels {
  width: 120px;
  flex-shrink: 0;
  background: var(--tp-surface2, #111);
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tp-server-name {
  font-size: .72rem;
  font-weight: 600;
  color: var(--tp-text, #f0f0f0);
  padding: 0 4px 6px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 4px;
}
.tp-channel {
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--tp-muted, #555);
  cursor: pointer;
}
.tp-channel.active {
  background: var(--tp-accent-dim, rgba(200,200,200,.08));
  color: var(--tp-text, #f0f0f0);
}
.tp-main {
  flex: 1;
  background: var(--tp-bg, #080808);
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 8px;
}
.tp-msg {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.tp-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tp-surface2, #181818);
  flex-shrink: 0;
}
.tp-avatar.accent { background: var(--tp-accent, #c8c8c8); opacity: .7; }
.tp-msg-body { display: flex; flex-direction: column; gap: 2px; }
.tp-msg-name { font-size: .68rem; color: var(--tp-muted, #888); }
.tp-msg-name.accent { color: var(--tp-accent, #c8c8c8); }
.tp-msg-text { font-size: .72rem; color: var(--tp-text, #f0f0f0); line-height: 1.3; }
.tp-input-row { margin-top: auto; }
.tp-input-box {
  background: var(--tp-input, #0a0a0a);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  padding: 5px 8px;
  color: var(--tp-muted, #555);
  font-size: .72rem;
}

/* ══════════════════════════════════════════════════════
   Community Theme Hub Dialog
   ══════════════════════════════════════════════════════ */
.theme-hub-dialog {
  width: min(900px, 95vw);
  max-height: 90vh;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  color: var(--text);
  padding: 0;
  overflow: hidden;
}
.theme-hub-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 90vh;
}
.theme-hub-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
}
.theme-hub-header h2 { font-size: 1.05rem; font-weight: 700; }
.theme-hub-subtitle { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
.theme-hub-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.theme-hub-toolbar .creation-input { flex: 1; min-width: 160px; }
.theme-hub-filters { display: flex; gap: 4px; }
.theme-filter-btn {
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  font-size: .78rem;
  cursor: pointer;
  transition: all .15s;
}
.theme-filter-btn:hover { color: var(--text); border-color: var(--accent-dim); }
.theme-filter-btn.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-dim); }
.theme-hub-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  align-content: start;
}
.theme-hub-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  padding: 48px 0;
  font-size: .88rem;
}

/* ── Theme Hub Card ── */
.theme-hub-card {
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, box-shadow .15s;
}
.theme-hub-card:hover {
  border-color: var(--accent-dim);
  box-shadow: var(--card-shadow);
}
.theme-card-preview {
  height: 52px;
  display: flex;
  gap: 2px;
  padding: 8px;
  background: var(--surface-3);
}
.theme-card-swatch {
  flex: 1;
  border-radius: 3px;
}
.theme-card-body {
  padding: 10px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.theme-card-name {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.theme-card-author { font-size: .72rem; color: var(--text-muted); }
.theme-card-desc {
  font-size: .75rem;
  color: var(--label);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
}
.theme-card-stats {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.theme-card-stat { font-size: .7rem; color: var(--text-muted); }
.theme-card-actions {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--card-border);
}
.theme-card-apply {
  flex: 1;
  padding: 5px 0;
  background: var(--accent-dim);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  border-radius: var(--radius-sm);
  font-size: .76rem;
  cursor: pointer;
  transition: all .15s;
}
.theme-card-apply:hover { background: var(--accent); color: var(--bg); }
.theme-card-star {
  padding: 5px 10px;
  background: var(--surface-3);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-size: .76rem;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.theme-card-star:hover { color: #f0c030; border-color: rgba(240,192,48,.3); }
.theme-card-star.starred { color: #f0c030; border-color: rgba(240,192,48,.4); background: rgba(240,192,48,.08); }
.theme-card-delete {
  padding: 5px 8px;
  background: var(--surface-3);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-size: .76rem;
  cursor: pointer;
  transition: all .15s;
}
.theme-card-delete:hover { color: #e05555; border-color: rgba(224,85,85,.3); }

/* Server Dropdown Menu */
.server-dropdown {
  position: absolute; top: 48px; left: 8px; right: 8px; z-index: 80;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); padding: 6px;
}
.sdd-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  background: none; border: none; border-radius: 6px; color: var(--text); font-size: 0.84rem;
  font-family: inherit; cursor: pointer; transition: background .1s;
}
.sdd-item:hover { background: var(--surface-2); }
.sdd-item.disabled { opacity: 0.35; pointer-events: none; }
.sdd-item svg { flex-shrink: 0; }
.sdd-sep { height: 1px; background: var(--border); margin: 4px 0; }
.sdd-item.sdd-danger { color: #f04747; }
.sdd-item.sdd-danger:hover { background: rgba(240,71,71,0.12); }
.sidebar-header-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px;
  border-radius: 4px; display: flex; align-items: center; transition: color .15s;
}
.sidebar-header-btn:hover { color: var(--text); }
#sidebar-header { position: relative; }
#server-dropdown-arrow.open { transform: rotate(180deg); }

/* Invite Friends Dialog */
.invite-friend-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px;
  border-radius: 6px; transition: background .1s;
}
.invite-friend-row:hover { background: var(--surface-2); }
.invite-friend-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface-3); display: flex; align-items: center;
  justify-content: center; font-size: 0.7rem; font-weight: 700;
  color: var(--text-muted); overflow: hidden;
}
.invite-friend-avatar img { width: 100%; height: 100%; object-fit: cover; }
.invite-friend-info { flex: 1; min-width: 0; }
.invite-friend-name { font-size: 0.88rem; font-weight: 600; color: var(--text); display: block; }
.invite-friend-username { font-size: 0.72rem; color: var(--text-muted); }
.invite-friend-btn {
  padding: 5px 14px; font-size: 0.78rem; font-weight: 600; border-radius: 4px;
  border: 1px solid var(--accent); background: none; color: var(--accent);
  cursor: pointer; transition: all .15s; flex-shrink: 0;
}
.invite-friend-btn:hover { background: var(--accent); color: var(--bg); }
.invite-friend-btn.sent { border-color: var(--text-muted); color: var(--text-muted); pointer-events: none; }