/* AeThex Connect Mockup Styles - Exact Match */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Mono', monospace;
  background: #0a0a0a;
  color: #e0e0e0;
  overflow: hidden;
  height: 100vh;
}

/* Scanline effect */
.connect-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 1000;
}

/* Main Layout */
.connect-container {
  display: flex;
  height: 100vh;
  position: relative;
}

/* Server Sidebar */
.server-list {
  width: 80px;
  min-width: 80px;
  background: #0d0d0d;
  border-right: 1px solid #1a1a1a;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 12px;
}

.server-icon {
  width: 56px;
  height: 56px;
  background: #1a1a1a;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2em;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  color: #e0e0e0;
}

.server-icon:hover {
  border-radius: 12px;
  transform: translateY(-2px);
}

.server-icon.active {
  border-radius: 12px;
}

.server-icon::before {
  content: '';
  position: absolute;
  left: -12px;
  width: 4px;
  height: 0;
  transition: height 0.3s;
  border-radius: 0 4px 4px 0;
}

.server-icon.active::before {
  height: 40px;
}

.server-icon.foundation {
  background: linear-gradient(135deg, #ff0000 0%, #990000 100%);
}

.server-icon.foundation.active::before {
  background: #ff0000;
}

.server-icon.corporation {
  background: linear-gradient(135deg, #0066ff 0%, #003380 100%);
}

.server-icon.corporation.active::before {
  background: #0066ff;
}

.server-icon.labs {
  background: linear-gradient(135deg, #ffa500 0%, #ff8c00 100%);
}

.server-icon.labs.active::before {
  background: #ffa500;
}

.server-icon.community {
  background: #1a1a1a;
  color: #666;
}

.server-divider {
  width: 40px;
  height: 2px;
  background: #1a1a1a;
  margin: 4px 0;
}

/* Channel Sidebar */
.channel-sidebar {
  width: 280px;
  min-width: 280px;
  background: #0f0f0f;
  border-right: 1px solid #1a1a1a;
  display: flex;
  flex-direction: column;
}

.server-header {
  padding: 16px;
  border-bottom: 1px solid #1a1a1a;
  font-weight: 700;
  font-size: 1.1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.server-badge {
  font-size: 0.7em;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.server-badge.foundation {
  background: rgba(255, 0, 0, 0.2);
  color: #ff0000;
  border: 1px solid #ff0000;
}

.server-badge.corporation {
  background: rgba(0, 102, 255, 0.2);
  color: #0066ff;
  border: 1px solid #0066ff;
}

.server-badge.labs {
  background: rgba(255, 165, 0, 0.2);
  color: #ffa500;
  border: 1px solid #ffa500;
}

.channel-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.channel-category {
  padding: 16px 16px 8px 16px;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #666;
  font-weight: 700;
}

.channel-item {
  padding: 8px 16px;
  margin: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95em;
}

.channel-item:hover {
  background: #1a1a1a;
}

.channel-item.active {
  background: #1a1a1a;
}

.channel-icon {
  color: #666;
}

.channel-name {
  flex: 1;
}

.channel-badge {
  font-size: 0.75em;
  background: #ff0000;
  color: #fff;
  padding: 2px 6px;
  border-radius: 10px;
}

/* User Presence Panel */
.user-presence {
  padding: 12px 16px;
  border-top: 1px solid #1a1a1a;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9em;
}

.user-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #ff0000, #0066ff, #ffa500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.user-info {
  flex: 1;
}

.user-name {
  font-weight: 700;
  margin-bottom: 2px;
}

.user-status {
  font-size: 0.85em;
  color: #666;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00ff00;
  box-shadow: 0 0 8px #00ff00;
}

/* Chat Area */
.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #0a0a0a;
  min-width: 0;
}

.chat-header {
  padding: 16px 20px;
  border-bottom: 1px solid #1a1a1a;
  display: flex;
  align-items: center;
  gap: 12px;
}

.channel-name-header {
  flex: 1;
  font-weight: 700;
  font-size: 1.1em;
}

.chat-tools {
  display: flex;
  gap: 16px;
  font-size: 0.9em;
  color: #666;
}

.chat-tool {
  cursor: pointer;
  transition: color 0.2s;
}

.chat-tool:hover {
  color: #0066ff;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.message {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  padding: 12px;
  border-radius: 4px;
  transition: background 0.2s;
}

.message:hover {
  background: #0f0f0f;
}

.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9em;
  flex-shrink: 0;
}

.message-content {
  flex: 1;
  min-width: 0;
}

.message-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.message-author {
  font-weight: 700;
}

.message-time {
  font-size: 0.75em;
  color: #666;
}

.message-badge {
  font-size: 0.65em;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.message-badge.foundation {
  background: rgba(255, 0, 0, 0.2);
  color: #ff0000;
}

.message-badge.corporation {
  background: rgba(0, 102, 255, 0.2);
  color: #0066ff;
}

.message-badge.labs {
  background: rgba(255, 165, 0, 0.2);
  color: #ffa500;
}

.message-text {
  line-height: 1.6;
  color: #ccc;
  word-wrap: break-word;
}

.message-system {
  background: #0f0f0f;
  border-left: 3px solid;
  padding: 12px;
  margin-bottom: 16px;
  font-size: 0.9em;
}

.message-system.foundation {
  border-color: #ff0000;
}

.message-system.corporation {
  border-color: #0066ff;
}

.message-system.labs {
  border-color: #ffa500;
}

.system-label {
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  font-weight: 700;
}

.system-label.foundation { color: #ff0000; }
.system-label.corporation { color: #0066ff; }
.system-label.labs { color: #ffa500; }

/* Message Input */
.message-input-container {
  padding: 20px;
  border-top: 1px solid #1a1a1a;
}

.message-input {
  background: #0f0f0f;
  border: 1px solid #1a1a1a;
  border-radius: 8px;
  padding: 12px 16px;
  width: 100%;
  color: #e0e0e0;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.95em;
  transition: border-color 0.3s;
}

.message-input:focus {
  outline: none;
  border-color: #0066ff;
}

.message-input::placeholder {
  color: #666;
}

/* Member Sidebar */
.member-sidebar {
  width: 280px;
  min-width: 280px;
  background: #0f0f0f;
  border-left: 1px solid #1a1a1a;
  display: flex;
  flex-direction: column;
}

.member-header {
  padding: 16px;
  border-bottom: 1px solid #1a1a1a;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #666;
}

.member-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}

.member-section {
  margin-bottom: 16px;
}

.member-section-title {
  padding: 8px 16px;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #666;
  font-weight: 700;
}

.member-item {
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.member-item:hover {
  background: #1a1a1a;
}

.member-avatar-small {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  font-weight: 700;
  position: relative;
}

.online-indicator {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #0f0f0f;
}

.online-indicator.online { background: #00ff00; }
.online-indicator.in-game { background: #0066ff; }
.online-indicator.labs { background: #ffa500; }

.member-name {
  flex: 1;
  font-size: 0.9em;
}

.member-activity {
  font-size: 0.75em;
  color: #666;
}

/* ==================== NEW DISCORD-LIKE COMPONENTS ==================== */

/* Server List Enhancements */
.notification-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: #ed4245;
  color: white;
  font-size: 0.65em;
  padding: 2px 5px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  font-weight: 700;
  border: 2px solid #0d0d0d;
}

.update-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #3ba55d;
  border-radius: 50%;
  border: 2px solid #0d0d0d;
}

.server-tooltip {
  position: absolute;
  left: 70px;
  background: #18191c;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.85em;
  white-space: nowrap;
  z-index: 1001;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.server-tooltip::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #18191c;
}

/* User Settings Bar */
.user-settings-bar {
  padding: 8px;
  background: #0d0d0d;
  border-top: 1px solid #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-info-section {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  position: relative;
}

.user-info-section:hover {
  background: #1a1a1a;
}

.user-avatar-container {
  position: relative;
}

.user-avatar-small {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8em;
}

.status-indicator {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #0d0d0d;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-display-name {
  font-size: 0.85em;
  font-weight: 600;
}

.user-tag {
  font-size: 0.7em;
  color: #666;
}

.status-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  background: #18191c;
  border-radius: 4px;
  padding: 8px 0;
  min-width: 180px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  z-index: 100;
}

.status-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.85em;
}

.status-option:hover {
  background: #1a1a1a;
}

.status-divider {
  height: 1px;
  background: #2f3136;
  margin: 4px 8px;
}

.user-controls {
  display: flex;
  gap: 4px;
}

.control-button {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  position: relative;
}

.control-button:hover {
  background: #1a1a1a;
}

.control-button.active {
  color: #ed4245;
}

.slash-overlay {
  position: absolute;
  width: 100%;
  height: 2px;
  background: #ed4245;
  transform: rotate(-45deg);
}

/* Voice Channel */
.voice-channel-container {
  margin: 4px 8px;
}

.voice-channel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
}

.voice-channel-header:hover {
  background: #1a1a1a;
}

.voice-channel-name {
  flex: 1;
}

.voice-user-count {
  font-size: 0.8em;
  color: #666;
}

.expand-icon {
  font-size: 0.7em;
  color: #666;
}

.voice-users-list {
  margin-left: 24px;
}

.voice-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.85em;
}

.voice-user:hover {
  background: #1a1a1a;
}

.voice-user.speaking {
  background: rgba(59, 165, 93, 0.1);
}

.voice-user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  font-weight: 700;
  position: relative;
}

.speaking-ring {
  position: absolute;
  inset: -3px;
  border: 2px solid #3ba55d;
  border-radius: 50%;
  animation: pulse-ring 1s infinite;
}

@keyframes pulse-ring {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.voice-user-name {
  flex: 1;
}

.voice-user-icons {
  display: flex;
  gap: 4px;
  font-size: 0.8em;
}

.voice-connected-panel {
  background: #1a1a1a;
  border-radius: 4px;
  margin: 8px;
  padding: 12px;
}

.voice-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.connected-text {
  color: #3ba55d;
  font-size: 0.9em;
  font-weight: 600;
}

.voice-ping {
  font-size: 0.8em;
  color: #666;
}

.voice-controls {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.voice-control-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: #2f3136;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1em;
}

.voice-control-btn:hover {
  background: #40444b;
}

/* Emoji Picker */
.emoji-picker {
  position: absolute;
  bottom: 100%;
  right: 0;
  width: 350px;
  background: #18191c;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  z-index: 100;
  overflow: hidden;
}

.emoji-picker-header {
  padding: 12px;
  border-bottom: 1px solid #2f3136;
}

.emoji-search {
  width: 100%;
  padding: 8px 12px;
  background: #0f0f0f;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
  font-family: inherit;
}

.emoji-categories {
  display: flex;
  padding: 8px;
  gap: 4px;
  border-bottom: 1px solid #2f3136;
  overflow-x: auto;
}

.emoji-category-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.1em;
}

.emoji-category-btn:hover {
  background: #2f3136;
}

.emoji-category-btn.active {
  background: #2f3136;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 12px;
  max-height: 250px;
  overflow-y: auto;
}

.emoji-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.3em;
}

.emoji-btn:hover {
  background: #2f3136;
}

.emoji-picker-footer {
  padding: 8px 12px;
  border-top: 1px solid #2f3136;
  font-size: 0.8em;
  color: #666;
}

/* Message Actions */
.message-actions {
  position: absolute;
  top: -20px;
  right: 16px;
  display: flex;
  gap: 8px;
  background: #18191c;
  border-radius: 4px;
  padding: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.2s;
}

.message:hover .message-actions {
  opacity: 1;
}

.quick-reactions {
  display: flex;
  gap: 2px;
}

.reaction-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
}

.reaction-btn:hover {
  background: #2f3136;
}

.action-buttons {
  display: flex;
  gap: 2px;
  border-left: 1px solid #2f3136;
  padding-left: 8px;
  margin-left: 8px;
}

.action-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
}

.action-btn:hover {
  background: #2f3136;
}

.more-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: #18191c;
  border-radius: 4px;
  padding: 8px 0;
  min-width: 180px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  z-index: 100;
}

.menu-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.85em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-item:hover {
  background: #2f3136;
}

.menu-item.danger {
  color: #ed4245;
}

.menu-divider {
  height: 1px;
  background: #2f3136;
  margin: 4px 8px;
}

/* Typing Indicator */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  font-size: 0.85em;
  color: #666;
}

.typing-dots {
  display: flex;
  gap: 3px;
}

.typing-dots .dot {
  width: 6px;
  height: 6px;
  background: #666;
  border-radius: 50%;
  animation: typing-bounce 1.4s infinite ease-in-out;
}

.typing-dots .dot:nth-child(1) { animation-delay: 0s; }
.typing-dots .dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dots .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

/* User Profile Card */
.user-profile-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 340px;
  background: #18191c;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  z-index: 1000;
}

.profile-banner {
  height: 60px;
}

.profile-avatar-section {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 16px;
  margin-top: -40px;
}

.profile-avatar-wrapper {
  position: relative;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 6px solid #18191c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  font-weight: 700;
}

.profile-status-indicator {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #18191c;
}

.profile-badges {
  display: flex;
  gap: 4px;
}

.profile-badge {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  font-weight: 700;
}

.profile-info {
  padding: 16px;
}

.profile-name {
  font-size: 1.3em;
  font-weight: 700;
  margin-bottom: 4px;
}

.profile-tag {
  color: #666;
  font-size: 0.9em;
}

.profile-custom-status {
  margin-top: 8px;
  padding: 8px;
  background: #0f0f0f;
  border-radius: 4px;
  font-size: 0.85em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-divider {
  height: 1px;
  background: #2f3136;
  margin: 0 16px;
}

.profile-section {
  padding: 12px 16px;
}

.section-title {
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #b9bbbe;
  font-weight: 700;
  margin-bottom: 8px;
}

.activity-card {
  display: flex;
  gap: 12px;
  padding: 8px;
  background: #0f0f0f;
  border-radius: 4px;
}

.activity-icon {
  font-size: 1.5em;
}

.activity-info {
  flex: 1;
}

.activity-name {
  font-weight: 600;
  font-size: 0.9em;
}

.activity-details,
.activity-elapsed {
  font-size: 0.8em;
  color: #666;
}

.about-text,
.member-since {
  font-size: 0.85em;
  color: #b9bbbe;
  line-height: 1.4;
}

.roles-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.role-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid;
  border-radius: 4px;
  font-size: 0.8em;
}

.role-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.note-input {
  width: 100%;
  padding: 8px;
  background: #0f0f0f;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
  font-family: inherit;
  font-size: 0.85em;
  resize: none;
}

.profile-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #2f3136;
}

.profile-btn {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 4px;
  background: #2f3136;
  color: #e0e0e0;
  font-family: inherit;
  cursor: pointer;
  font-size: 0.85em;
}

.profile-btn:hover {
  background: #40444b;
}

.profile-btn.primary {
  background: #5865f2;
}

.profile-btn.primary:hover {
  background: #4752c4;
}

/* Search Panel */
.search-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  height: 100vh;
  background: #18191c;
  border-left: 1px solid #2f3136;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.search-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid #2f3136;
}

.search-form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f0f0f;
  padding: 8px 12px;
  border-radius: 4px;
}

.search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: #e0e0e0;
  font-family: inherit;
  font-size: 0.9em;
}

.search-input::placeholder {
  color: #666;
}

.clear-btn,
.close-search {
  border: none;
  background: transparent;
  color: #666;
  cursor: pointer;
  font-size: 1em;
}

.close-search:hover {
  color: #e0e0e0;
}

.search-filters {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  overflow-x: auto;
  border-bottom: 1px solid #2f3136;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: none;
  background: #2f3136;
  border-radius: 16px;
  color: #b9bbbe;
  font-family: inherit;
  font-size: 0.8em;
  cursor: pointer;
  white-space: nowrap;
}

.filter-btn:hover,
.filter-btn.active {
  background: #5865f2;
  color: #fff;
}

.search-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.search-suggestions h4,
.search-results h4 {
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #666;
  margin-bottom: 12px;
}

.recent-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
}

.recent-search:hover {
  background: #2f3136;
}

.search-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.search-options .option {
  font-size: 0.8em;
  padding: 4px 8px;
  background: #2f3136;
  border-radius: 4px;
}

.search-options code {
  color: #5865f2;
}

.search-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #2f3136;
  border-top-color: #5865f2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.search-result {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 4px;
  cursor: pointer;
}

.search-result:hover {
  background: #2f3136;
}

.result-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9em;
  flex-shrink: 0;
}

.result-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
}

.result-content {
  flex: 1;
  min-width: 0;
}

.result-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 0.85em;
}

.result-author {
  font-weight: 600;
}

.result-channel,
.result-time {
  color: #666;
}

.result-text {
  font-size: 0.85em;
  color: #b9bbbe;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-filename {
  font-weight: 600;
  font-size: 0.9em;
}

.result-meta {
  font-size: 0.8em;
  color: #666;
}

/* Thread Panel */
.thread-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  height: 100vh;
  background: #0f0f0f;
  border-left: 1px solid #2f3136;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.thread-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #2f3136;
}

.thread-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-weight: 600;
}

.thread-meta {
  display: flex;
  gap: 8px;
  font-size: 0.8em;
  color: #666;
}

.thread-close {
  border: none;
  background: transparent;
  color: #666;
  cursor: pointer;
  font-size: 1.2em;
}

.thread-close:hover {
  color: #e0e0e0;
}

.thread-parent {
  padding: 16px;
  border-bottom: 1px solid #2f3136;
}

.parent-message {
  display: flex;
  gap: 12px;
}

.thread-line {
  width: 2px;
  height: 20px;
  background: #2f3136;
  margin-left: 20px;
  margin-top: 8px;
}

.thread-replies {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.thread-reply {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.message-avatar.small {
  width: 32px;
  height: 32px;
  font-size: 0.8em;
}

.thread-input-container {
  display: flex;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid #2f3136;
}

.thread-input {
  flex: 1;
  padding: 12px;
  background: #1a1a1a;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
  font-family: inherit;
}

.thread-send {
  padding: 12px 16px;
  background: #5865f2;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
}

.thread-send:hover {
  background: #4752c4;
}

/* Server Settings Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.server-settings-modal {
  width: 90%;
  max-width: 900px;
  height: 80vh;
  background: #18191c;
  border-radius: 8px;
  display: flex;
  overflow: hidden;
}

.settings-sidebar {
  width: 240px;
  background: #0f0f0f;
  border-right: 1px solid #2f3136;
  display: flex;
  flex-direction: column;
}

.settings-server-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #2f3136;
}

.settings-server-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2em;
}

.settings-server-name {
  font-weight: 600;
  font-size: 0.95em;
}

.settings-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  margin-bottom: 2px;
}

.settings-nav-item:hover {
  background: #2f3136;
}

.settings-nav-item.active {
  background: #2f3136;
  color: #fff;
}

.settings-nav-item.danger {
  color: #ed4245;
}

.settings-divider {
  height: 1px;
  background: #2f3136;
  margin: 8px 0;
}

.nav-icon {
  font-size: 1em;
}

.settings-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #2f3136;
}

.settings-header h2 {
  font-size: 1.2em;
}

.settings-close {
  border: none;
  background: transparent;
  color: #666;
  cursor: pointer;
  font-size: 1.5em;
}

.settings-close:hover {
  color: #e0e0e0;
}

.settings-overview {
  padding: 24px;
  overflow-y: auto;
}

.setting-group {
  margin-bottom: 24px;
}

.setting-group label {
  display: block;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #b9bbbe;
  font-weight: 700;
  margin-bottom: 8px;
}

.setting-input,
.setting-textarea,
.setting-select {
  width: 100%;
  padding: 12px;
  background: #0f0f0f;
  border: 1px solid #2f3136;
  border-radius: 4px;
  color: #e0e0e0;
  font-family: inherit;
  font-size: 0.95em;
}

.setting-input:focus,
.setting-textarea:focus,
.setting-select:focus {
  outline: none;
  border-color: #5865f2;
}

.icon-upload {
  display: flex;
  align-items: center;
  gap: 16px;
}

.current-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.5em;
}

.upload-btn {
  padding: 10px 16px;
  background: #5865f2;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  font-family: inherit;
}

.upload-btn:hover {
  background: #4752c4;
}

.boost-info {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255,115,250,0.1), rgba(85,62,223,0.1));
  border-radius: 8px;
  border: 1px solid rgba(255,115,250,0.3);
}

.boost-level {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.boost-count {
  color: #666;
  font-size: 0.9em;
}

.settings-roles {
  padding: 24px;
  overflow-y: auto;
}

.roles-header {
  margin-bottom: 16px;
}

.create-role-btn {
  padding: 10px 16px;
  background: #5865f2;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  font-family: inherit;
}

.create-role-btn:hover {
  background: #4752c4;
}

.role-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 4px;
  cursor: pointer;
}

.role-item:hover {
  background: #2f3136;
}

.role-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.role-name {
  flex: 1;
  font-weight: 500;
}

.role-members {
  font-size: 0.85em;
  color: #666;
}

.settings-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666;
}

.placeholder-icon {
  font-size: 3em;
  margin-bottom: 16px;
}

/* ==================== DMs VIEW ==================== */
.dms-view {
  display: flex;
  flex: 1;
  height: 100%;
}

.dms-sidebar {
  width: 240px;
  background: #0f0f0f;
  border-right: 1px solid #2f3136;
  display: flex;
  flex-direction: column;
}

.dms-search {
  padding: 12px;
}

.dms-search-input {
  width: 100%;
  padding: 8px 12px;
  background: #0a0a0a;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
  font-family: inherit;
  font-size: 0.85em;
}

.dms-section {
  padding: 8px;
}

.dms-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #666;
}

.add-dm-btn {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 1.2em;
}

.add-dm-btn:hover {
  color: #e0e0e0;
}

.dms-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
}

.dms-nav-item:hover {
  background: #1a1a1a;
}

.dm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}

.dm-item:hover {
  background: #1a1a1a;
}

.dm-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85em;
  position: relative;
}

.dm-status {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #0f0f0f;
}

.dm-info {
  flex: 1;
  min-width: 0;
}

.dm-name {
  font-size: 0.9em;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.group-count {
  font-size: 0.75em;
  color: #666;
}

.dm-preview {
  font-size: 0.75em;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-unread {
  background: #ed4245;
  color: white;
  font-size: 0.7em;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 700;
}

.dm-close {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  opacity: 0;
  font-size: 0.8em;
}

.dm-item:hover .dm-close {
  opacity: 1;
}

/* Friends Panel */
.friends-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #0a0a0a;
}

.friends-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid #2f3136;
}

.friends-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.friends-tabs {
  display: flex;
  gap: 8px;
}

.friends-tab {
  padding: 4px 12px;
  background: none;
  border: none;
  border-radius: 4px;
  color: #b9bbbe;
  font-family: inherit;
  font-size: 0.85em;
  cursor: pointer;
}

.friends-tab:hover {
  background: #2f3136;
  color: #e0e0e0;
}

.friends-tab.active {
  background: #2f3136;
  color: #e0e0e0;
}

.friends-tab.action {
  background: #3ba55d;
  color: white;
}

.tab-count {
  background: #ed4245;
  color: white;
  font-size: 0.7em;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 4px;
}

.friends-search {
  padding: 16px;
}

.friends-search input {
  width: 100%;
  padding: 10px 12px;
  background: #0f0f0f;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
  font-family: inherit;
}

.friends-count {
  padding: 0 16px 8px;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #666;
}

.friends-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px;
}

.friend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 4px;
  cursor: pointer;
  border-top: 1px solid #2f3136;
}

.friend-item:hover {
  background: #1a1a1a;
}

.friend-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  position: relative;
}

.friend-status {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid #0a0a0a;
}

.friend-info {
  flex: 1;
}

.friend-name {
  font-weight: 500;
}

.friend-activity,
.friend-tag {
  font-size: 0.8em;
  color: #666;
}

.friend-actions {
  display: flex;
  gap: 8px;
}

.friend-action {
  width: 36px;
  height: 36px;
  border: none;
  background: #2f3136;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1em;
}

.friend-action:hover {
  background: #40444b;
}

.friend-action.accept {
  background: #3ba55d;
}

.friend-action.decline {
  background: #ed4245;
}

/* Add Friend Panel */
.add-friend-panel {
  padding: 32px;
}

.add-friend-panel h2 {
  margin-bottom: 8px;
}

.add-friend-panel p {
  color: #666;
  margin-bottom: 24px;
}

.add-friend-input {
  display: flex;
  gap: 12px;
}

.friend-input {
  flex: 1;
  padding: 12px 16px;
  background: #0f0f0f;
  border: 1px solid #2f3136;
  border-radius: 4px;
  color: #e0e0e0;
  font-family: inherit;
}

.send-request-btn {
  padding: 12px 24px;
  background: #5865f2;
  border: none;
  border-radius: 4px;
  color: white;
  font-family: inherit;
  cursor: pointer;
}

.send-request-btn:hover {
  background: #4752c4;
}

/* Activity Panel */
.activity-panel {
  width: 340px;
  background: #0f0f0f;
  border-left: 1px solid #2f3136;
  padding: 16px;
}

.activity-panel h3 {
  margin-bottom: 16px;
}

.activity-placeholder {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.activity-hint {
  font-size: 0.85em;
  margin-top: 8px;
}

/* ==================== USER SETTINGS MODAL ==================== */
.user-settings-modal {
  width: 90%;
  max-width: 1000px;
  height: 85vh;
  background: #18191c;
  border-radius: 8px;
  display: flex;
  overflow: hidden;
}

.settings-section-title {
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #666;
  padding: 8px 12px;
  font-weight: 700;
}

.account-card {
  background: #0f0f0f;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}

.account-banner {
  height: 100px;
}

.account-info {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  margin-top: -40px;
}

.account-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 6px solid #0f0f0f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  font-weight: 700;
}

.account-details {
  flex: 1;
}

.account-details h3 {
  font-size: 1.3em;
}

.account-tag {
  color: #666;
}

.edit-profile-btn {
  padding: 8px 16px;
  background: #5865f2;
  border: none;
  border-radius: 4px;
  color: white;
  font-family: inherit;
  cursor: pointer;
}

.account-fields {
  background: #0f0f0f;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

.account-field {
  padding: 12px 0;
  border-bottom: 1px solid #2f3136;
}

.account-field:last-child {
  border-bottom: none;
}

.account-field label {
  display: block;
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #666;
  margin-bottom: 4px;
}

.field-value {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.field-edit {
  background: none;
  border: none;
  color: #5865f2;
  cursor: pointer;
  font-family: inherit;
}

.two-factor {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #0f0f0f;
  border-radius: 8px;
  margin-top: 12px;
}

.two-factor-info {
  flex: 1;
}

.two-factor-info h5 {
  margin-bottom: 4px;
}

.two-factor-info p {
  font-size: 0.85em;
  color: #666;
}

.settings-btn {
  padding: 8px 16px;
  background: #2f3136;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
  font-family: inherit;
  cursor: pointer;
}

.settings-btn:hover {
  background: #40444b;
}

.settings-btn.primary {
  background: #5865f2;
}

.settings-btn.primary:hover {
  background: #4752c4;
}

.danger-zone h4 {
  color: #ed4245;
}

.danger-buttons {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.settings-btn.danger-outline {
  background: transparent;
  border: 1px solid #ed4245;
  color: #ed4245;
}

.settings-btn.danger {
  background: #ed4245;
  color: white;
}

/* Theme options */
.theme-options {
  display: flex;
  gap: 12px;
}

.theme-option {
  cursor: pointer;
}

.theme-preview {
  display: block;
  padding: 12px 24px;
  border-radius: 4px;
  border: 2px solid transparent;
}

.theme-preview.dark {
  background: #0a0a0a;
  color: #e0e0e0;
}

.theme-preview.light {
  background: #ffffff;
  color: #000;
}

.theme-option input:checked + .theme-preview {
  border-color: #5865f2;
}

.font-slider,
.volume-slider {
  width: 100%;
  margin-top: 8px;
}

.toggle-setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #2f3136;
}

.keybinds-header {
  margin-bottom: 16px;
}

.keybind-list {
  background: #0f0f0f;
  border-radius: 8px;
}

.keybind-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid #2f3136;
}

.keybind-item:last-child {
  border-bottom: none;
}

.keybind-action {
  flex: 1;
}

.keybind-key {
  padding: 4px 12px;
  background: #2f3136;
  border-radius: 4px;
  font-size: 0.85em;
}

.keybind-edit,
.keybind-delete {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1em;
}

/* ==================== CONTEXT MENU ==================== */
.context-menu {
  background: #18191c;
  border-radius: 4px;
  padding: 8px 0;
  min-width: 188px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.9em;
}

.context-menu-item:hover {
  background: #5865f2;
  color: white;
}

.context-menu-item.danger:hover {
  background: #ed4245;
}

.context-menu-icon {
  width: 18px;
  text-align: center;
}

.context-menu-label {
  flex: 1;
}

.context-menu-arrow {
  font-size: 0.7em;
  color: #666;
}

.context-menu-divider {
  height: 1px;
  background: #2f3136;
  margin: 4px 8px;
}

/* ==================== PINNED MESSAGES ==================== */
.pinned-panel {
  position: fixed;
  top: 50px;
  right: 50px;
  width: 420px;
  max-height: 80vh;
  background: #18191c;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  z-index: 1000;
}

.pinned-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid #2f3136;
}

.pinned-icon {
  font-size: 1.2em;
}

.pinned-title {
  font-weight: 600;
  flex: 1;
}

.pinned-channel {
  font-size: 0.85em;
  color: #666;
}

.pinned-close {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 1.2em;
}

.pinned-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.pinned-empty {
  text-align: center;
  padding: 40px;
  color: #666;
}

.empty-icon {
  font-size: 3em;
  display: block;
  margin-bottom: 12px;
}

.pinned-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pinned-message {
  background: #0f0f0f;
  border-radius: 4px;
  padding: 12px;
}

.pinned-message-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.pinned-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  font-weight: 700;
}

.pinned-author-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pinned-author {
  font-weight: 600;
  font-size: 0.9em;
}

.pinned-badge {
  font-size: 0.7em;
  padding: 2px 6px;
  border-radius: 3px;
}

.pinned-badge.founder,
.pinned-badge.foundation {
  background: rgba(255, 0, 0, 0.2);
  color: #ff0000;
}

.pinned-badge.labs {
  background: rgba(255, 165, 0, 0.2);
  color: #ffa500;
}

.pinned-time {
  font-size: 0.75em;
  color: #666;
}

.pinned-message-text {
  font-size: 0.9em;
  line-height: 1.4;
  margin-bottom: 8px;
}

.pinned-message-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pinned-by {
  font-size: 0.75em;
  color: #666;
}

.jump-to-btn {
  padding: 4px 12px;
  background: #5865f2;
  border: none;
  border-radius: 3px;
  color: white;
  font-size: 0.8em;
  cursor: pointer;
}

.pinned-footer {
  padding: 12px 16px;
  border-top: 1px solid #2f3136;
}

.protip {
  font-size: 0.8em;
  color: #666;
}

/* ==================== FILE UPLOAD ==================== */
.file-upload-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  background: #18191c;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  z-index: 1000;
}

.file-upload-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #2f3136;
}

.upload-close {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 1.2em;
}

.file-drop-zone {
  margin: 16px;
  padding: 40px;
  border: 2px dashed #2f3136;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.file-drop-zone:hover,
.file-drop-zone.dragging {
  border-color: #5865f2;
  background: rgba(88, 101, 242, 0.1);
}

.drop-zone-content {
  color: #666;
}

.drop-icon {
  font-size: 3em;
  display: block;
  margin-bottom: 12px;
}

.drop-hint {
  font-size: 0.8em;
  display: block;
  margin-top: 8px;
}

.file-list {
  max-height: 200px;
  overflow-y: auto;
  padding: 0 16px;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #0f0f0f;
  border-radius: 4px;
  margin-bottom: 8px;
}

.file-preview {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
}

.file-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  background: #2f3136;
  border-radius: 4px;
}

.file-info {
  flex: 1;
}

.file-name {
  font-size: 0.9em;
  word-break: break-all;
}

.file-size {
  font-size: 0.75em;
  color: #666;
}

.file-remove {
  background: none;
  border: none;
  color: #ed4245;
  cursor: pointer;
  font-size: 1em;
}

.upload-options {
  padding: 0 16px;
}

.spoiler-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9em;
  cursor: pointer;
}

.upload-comment {
  padding: 16px;
}

.upload-comment textarea {
  width: 100%;
  padding: 12px;
  background: #0f0f0f;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
  font-family: inherit;
  resize: none;
}

.upload-warning {
  padding: 8px 16px;
  color: #faa61a;
  font-size: 0.85em;
}

.upload-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-top: 1px solid #2f3136;
}

.upload-summary {
  font-size: 0.85em;
  color: #666;
}

.upload-actions {
  display: flex;
  gap: 12px;
}

.upload-cancel {
  padding: 8px 16px;
  background: none;
  border: none;
  color: #e0e0e0;
  cursor: pointer;
  font-family: inherit;
}

.upload-submit {
  padding: 8px 24px;
  background: #5865f2;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  font-family: inherit;
}

.upload-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==================== CREATE CHANNEL MODAL ==================== */
.create-channel-modal {
  width: 460px;
  background: #18191c;
  border-radius: 8px;
  overflow: hidden;
}

.modal-header {
  padding: 16px;
  border-bottom: 1px solid #2f3136;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-header h2 {
  flex: 1;
}

.category-name {
  font-size: 0.85em;
  color: #666;
}

.modal-close {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 1.2em;
}

.modal-content {
  padding: 16px;
  max-height: 60vh;
  overflow-y: auto;
}

.section-label {
  display: block;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #b9bbbe;
  font-weight: 700;
  margin-bottom: 8px;
}

.channel-types {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.channel-type-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #0f0f0f;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
}

.channel-type-option:hover {
  background: #1a1a1a;
}

.channel-type-option.selected {
  border-color: #5865f2;
}

.channel-type-option input {
  display: none;
}

.type-icon {
  font-size: 1.5em;
  width: 32px;
  text-align: center;
}

.type-info {
  flex: 1;
}

.type-label {
  display: block;
  font-weight: 500;
}

.type-description {
  font-size: 0.8em;
  color: #666;
}

.channel-name-section {
  margin-bottom: 20px;
}

.channel-name-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #0f0f0f;
  border-radius: 4px;
}

.channel-prefix {
  font-size: 1.2em;
  color: #666;
}

.channel-name-input input {
  flex: 1;
  background: none;
  border: none;
  color: #e0e0e0;
  font-family: inherit;
  font-size: 1em;
}

.privacy-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #0f0f0f;
  border-radius: 4px;
  cursor: pointer;
}

.privacy-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.privacy-icon {
  font-size: 1.5em;
}

.privacy-label {
  display: block;
  font-weight: 500;
}

.privacy-description {
  font-size: 0.8em;
  color: #666;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px;
  background: #0f0f0f;
}

.modal-cancel {
  padding: 10px 20px;
  background: none;
  border: none;
  color: #e0e0e0;
  cursor: pointer;
  font-family: inherit;
}

.modal-submit {
  padding: 10px 24px;
  background: #5865f2;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  font-family: inherit;
}

.modal-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==================== INVITE MODAL ==================== */
.invite-modal {
  width: 440px;
  background: #18191c;
  border-radius: 8px;
  overflow: hidden;
}

.invite-header {
  padding: 16px;
  border-bottom: 1px solid #2f3136;
  position: relative;
}

.invite-header h2 {
  font-size: 1.1em;
}

.invite-channel {
  font-size: 0.85em;
  color: #666;
}

.invite-content {
  padding: 16px;
}

.invite-search {
  margin-bottom: 16px;
}

.friend-search-input {
  width: 100%;
  padding: 10px 12px;
  background: #0f0f0f;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
  font-family: inherit;
}

.invite-friends-list {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.invite-friend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 4px;
}

.invite-friend-item:hover {
  background: #2f3136;
}

.invite-friend-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.invite-friend-name {
  flex: 1;
}

.invite-btn {
  padding: 6px 16px;
  background: #3ba55d;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85em;
}

.invite-link-section {
  padding-top: 12px;
  border-top: 1px solid #2f3136;
}

.invite-link-section label {
  display: block;
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #666;
  margin-bottom: 8px;
}

.invite-link-row {
  display: flex;
  gap: 8px;
}

.invite-link-input {
  flex: 1;
  padding: 10px 12px;
  background: #0f0f0f;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
  font-family: inherit;
}

.copy-link-btn {
  padding: 10px 20px;
  background: #5865f2;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  font-family: inherit;
}

.copy-link-btn.copied {
  background: #3ba55d;
}

.link-expires {
  font-size: 0.8em;
  color: #666;
  margin-top: 8px;
}

.edit-link-btn {
  background: none;
  border: none;
  color: #5865f2;
  cursor: pointer;
  font-family: inherit;
}

.invite-advanced {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #2f3136;
}

.advanced-option {
  margin-bottom: 12px;
}

.advanced-option label {
  display: block;
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #666;
  margin-bottom: 4px;
}

.advanced-select {
  width: 100%;
  padding: 10px 12px;
  background: #0f0f0f;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
  font-family: inherit;
}

.temporary-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  font-size: 0.9em;
}

.generate-new-btn {
  width: 100%;
  padding: 10px;
  background: #2f3136;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
  cursor: pointer;
  font-family: inherit;
}

.invite-footer {
  padding: 12px 16px;
  background: #0f0f0f;
}

.invite-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85em;
  color: #666;
}

/* ==================== NOTIFICATIONS PANEL ==================== */
.notifications-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  height: 100vh;
  background: #18191c;
  border-left: 1px solid #2f3136;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.notifications-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid #2f3136;
}

.notifications-header h3 {
  flex: 1;
}

.notifications-actions {
  display: flex;
  gap: 8px;
}

.mark-read-btn,
.clear-btn {
  padding: 6px 12px;
  background: #2f3136;
  border: none;
  border-radius: 4px;
  color: #b9bbbe;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8em;
}

.notifications-close {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 1.2em;
}

.notifications-filters {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  border-bottom: 1px solid #2f3136;
}

.notifications-list {
  flex: 1;
  overflow-y: auto;
}

.notifications-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #666;
}

.notification-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
  border-bottom: 1px solid #2f3136;
  position: relative;
}

.notification-item:hover {
  background: #1a1a1a;
}

.notification-item.unread {
  background: rgba(88, 101, 242, 0.1);
}

.notification-icon-container {
  position: relative;
}

.notification-avatar,
.notification-server-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.notification-type-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background: #18191c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-header-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  font-size: 0.85em;
}

.notification-server {
  font-weight: 600;
}

.notification-separator {
  color: #666;
}

.notification-channel {
  color: #666;
}

.notification-author {
  font-weight: 600;
}

.notification-message {
  font-size: 0.9em;
  color: #b9bbbe;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-time {
  font-size: 0.75em;
  color: #666;
  margin-top: 4px;
}

.unread-dot {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 8px;
  height: 8px;
  background: #5865f2;
  border-radius: 50%;
}

/* ==================== MARKDOWN STYLES ==================== */
.code-block {
  background: #0f0f0f;
  border-radius: 4px;
  padding: 12px;
  margin: 8px 0;
  overflow-x: auto;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.85em;
}

.inline-code {
  background: #0f0f0f;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.9em;
}

.spoiler {
  background: #1a1a1a;
  color: transparent;
  border-radius: 3px;
  padding: 0 4px;
  cursor: pointer;
  transition: color 0.2s;
}

.spoiler.revealed,
.spoiler:hover {
  color: inherit;
}

.mention {
  background: rgba(88, 101, 242, 0.3);
  color: #5865f2;
  padding: 0 4px;
  border-radius: 3px;
  cursor: pointer;
}

.mention:hover {
  background: #5865f2;
  color: white;
}

.channel-mention {
  background: rgba(88, 101, 242, 0.3);
  color: #5865f2;
  padding: 0 4px;
  border-radius: 3px;
  cursor: pointer;
}

.role-mention {
  padding: 0 4px;
  border-radius: 3px;
}

.message-link {
  color: #5865f2;
  text-decoration: none;
}

.message-link:hover {
  text-decoration: underline;
}

.block-quote {
  border-left: 4px solid #4f545c;
  padding-left: 12px;
  margin: 8px 0;
  color: #b9bbbe;
}

/* ==================== REPLY PREVIEW ==================== */
.reply-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #0f0f0f;
  border-radius: 4px 4px 0 0;
}

.reply-line {
  width: 4px;
  height: 20px;
  background: #5865f2;
  border-radius: 2px;
}

.reply-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85em;
  min-width: 0;
}

.replying-to {
  color: #666;
}

.reply-author {
  font-weight: 600;
}

.reply-text {
  color: #b9bbbe;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reply-cancel {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
}

.message-reply-context {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  padding-left: 48px;
  font-size: 0.85em;
}

.reply-connector {
  display: flex;
  align-items: flex-end;
  height: 16px;
  width: 32px;
}

.reply-line-vertical {
  width: 2px;
  height: 100%;
  background: #4f545c;
  margin-left: 16px;
}

.reply-line-horizontal {
  width: 16px;
  height: 2px;
  background: #4f545c;
}

.reply-avatar-mini {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6em;
  font-weight: 700;
}

.reply-author-mini {
  font-weight: 600;
  cursor: pointer;
}

.reply-author-mini:hover {
  text-decoration: underline;
}

.reply-text-mini {
  color: #b9bbbe;
  cursor: pointer;
}

.reply-text-mini:hover {
  color: #e0e0e0;
}

/* ==================== VIDEO CALL ==================== */
.video-call-container {
  position: fixed;
  inset: 0;
  background: #0a0a0a;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.video-call-container.fullscreen {
  z-index: 10000;
}

.video-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
  overflow: hidden;
}

.video-focused {
  flex: 1;
  background: #18191c;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.screen-share-view {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.screen-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f0f0f;
}

.screen-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: #666;
}

.screen-icon {
  font-size: 4em;
}

.streamer-pip {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.7);
  border-radius: 4px;
}

.pip-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  font-weight: 700;
}

.pip-name {
  font-size: 0.85em;
}

.video-feed,
.video-audio-only {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-avatar-large {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4em;
  font-weight: 700;
}

.video-name-overlay {
  position: absolute;
  bottom: 16px;
  left: 16px;
  padding: 8px 16px;
  background: rgba(0,0,0,0.7);
  border-radius: 4px;
}

.audio-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3em;
  font-weight: 700;
  transition: box-shadow 0.2s;
}

.audio-avatar.speaking {
  box-shadow: 0 0 0 4px #3ba55d;
}

.audio-name {
  font-size: 1.2em;
  font-weight: 600;
}

.audio-muted {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: rgba(0,0,0,0.7);
  border-radius: 4px;
}

.video-grid {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  max-height: 200px;
}

.video-tile {
  width: 180px;
  height: 120px;
  background: #18191c;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s;
}

.video-tile:hover {
  transform: scale(1.05);
}

.video-tile.speaking {
  box-shadow: 0 0 0 2px #3ba55d;
}

.tile-video,
.tile-audio {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.tile-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tile-name {
  font-size: 0.8em;
}

.tile-icons {
  display: flex;
  gap: 4px;
  font-size: 0.8em;
}

.video-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #18191c;
}

.controls-left,
.controls-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.controls-center {
  display: flex;
  align-items: center;
  gap: 8px;
}

.call-info {
  display: flex;
  flex-direction: column;
}

.call-channel {
  font-weight: 600;
  color: #3ba55d;
}

.call-duration {
  font-size: 0.8em;
  color: #666;
}

.control-btn {
  width: 48px;
  height: 48px;
  border: none;
  background: #2f3136;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2em;
  transition: background 0.2s;
}

.control-btn:hover {
  background: #40444b;
}

.control-btn.active {
  background: #3ba55d;
}

.control-btn.active.sharing {
  background: #5865f2;
}

.control-btn.leave {
  background: #ed4245;
}

.control-btn.leave:hover {
  background: #c53030;
}

/* ==================== ACTIVITY STATUS ==================== */
.activity-status {
  background: #0f0f0f;
  border-radius: 8px;
  padding: 12px;
}

.activity-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #b9bbbe;
}

.activity-type-icon {
  font-size: 1.2em;
}

.activity-content {
  display: flex;
  gap: 12px;
}

.activity-image {
  position: relative;
}

.activity-image img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
}

.activity-image-small {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid #18191c;
}

.activity-details {
  flex: 1;
}

.activity-name {
  font-weight: 600;
  margin-bottom: 2px;
}

.activity-detail,
.activity-state,
.activity-time {
  font-size: 0.85em;
  color: #b9bbbe;
}

.activity-buttons {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.activity-btn {
  flex: 1;
  padding: 8px;
  background: #2f3136;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85em;
}

.activity-btn:hover {
  background: #40444b;
}

.activity-status-small {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8em;
  color: #b9bbbe;
}

.activity-status-mini {
  font-size: 0.75em;
  color: #666;
}

/* Rich Presence */
.rich-presence,
.spotify-activity {
  background: #0f0f0f;
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
}

.rp-header,
.spotify-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #b9bbbe;
}

.spotify-header {
  color: #1db954;
}

.rp-content,
.spotify-content {
  display: flex;
  gap: 12px;
}

.rp-image,
.spotify-album {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2f3136;
}

.rp-image img,
.spotify-album img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rp-placeholder,
.spotify-placeholder {
  font-size: 2em;
}

.rp-info,
.spotify-info {
  flex: 1;
}

.rp-name,
.spotify-song {
  font-weight: 600;
  margin-bottom: 2px;
}

.rp-details,
.rp-state,
.rp-elapsed,
.spotify-artist,
.spotify-album-name {
  font-size: 0.85em;
  color: #b9bbbe;
}

.spotify-progress {
  margin-top: 12px;
}

.progress-bar {
  height: 4px;
  background: #4f545c;
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #1db954;
  transition: width 1s linear;
}

.progress-times {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 0.75em;
  color: #666;
}

/* ==================== SERVER BANNER ==================== */
.server-banner {
  background: #0f0f0f;
  border-radius: 8px;
  overflow: hidden;
}

.banner-image {
  height: 140px;
  position: relative;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgba(0,0,0,0.8));
  display: flex;
  align-items: flex-end;
  padding: 16px;
}

.banner-title {
  font-size: 1.4em;
  margin-bottom: 4px;
}

.banner-description {
  font-size: 0.85em;
  color: #b9bbbe;
}

.server-info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #18191c;
}

.server-stats {
  display: flex;
  gap: 16px;
}

.stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.stat-indicator.online {
  background: #3ba55d;
}

.stat-value {
  font-weight: 600;
}

.stat-label {
  color: #666;
  font-size: 0.85em;
}

.boost-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: linear-gradient(135deg, rgba(255,115,250,0.2), rgba(85,62,223,0.2));
  border-radius: 4px;
}

.boost-icon {
  color: #ff73fa;
}

.boost-level {
  font-weight: 600;
  color: #ff73fa;
}

.boost-count {
  color: #b9bbbe;
  font-size: 0.85em;
}

.boost-perks {
  padding: 16px;
  border-top: 1px solid #2f3136;
}

.perks-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  margin-bottom: 12px;
}

.perks-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.perk-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85em;
}

.perk-check {
  color: #3ba55d;
}

.vanity-url {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid #2f3136;
}

.vanity-label {
  color: #666;
}

.vanity-link {
  color: #5865f2;
}

.server-banner-mini {
  position: relative;
  height: 60px;
  overflow: hidden;
}

.banner-gradient {
  position: absolute;
  inset: 0;
}

.server-name-mini {
  position: absolute;
  bottom: 8px;
  left: 12px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.boost-progress {
  padding: 12px;
  background: #0f0f0f;
  border-radius: 8px;
}

.boost-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.85em;
}

.current-level {
  font-weight: 600;
}

.next-level {
  color: #666;
}

.boost-bar {
  height: 8px;
  background: #2f3136;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.boost-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff73fa, #553edf);
  transition: width 0.3s;
}

.boost-progress .boost-count {
  font-size: 0.8em;
  color: #666;
}

.boost-progress.max-level .boost-bar {
  background: linear-gradient(90deg, #ff73fa, #553edf);
}

.boost-progress.max-level .boost-label {
  color: #ff73fa;
  font-weight: 600;
}

/* ==================== CATEGORY ADD BUTTON ==================== */
.channel-category {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-add-btn {
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: #b9bbbe;
  font-size: 1.2em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
  padding: 0;
  line-height: 1;
}

.category-add-btn:hover {
  background: #40444b;
  color: #fff;
}

/* ==================== GIF PICKER ==================== */
.gif-picker {
  position: absolute;
  bottom: 60px;
  right: 80px;
  width: 420px;
  height: 450px;
  background: #18191c;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 100;
}

.gif-picker-header {
  padding: 12px;
  border-bottom: 1px solid #2f3136;
}

.gif-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0a0a0a;
  border-radius: 4px;
  padding: 8px 12px;
}

.gif-search .search-icon {
  color: #666;
}

.gif-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: #e0e0e0;
  font-size: 0.95em;
  outline: none;
}

.gif-search .clear-search {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 0;
}

.gif-categories {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid #2f3136;
  overflow-x: auto;
}

.gif-category-btn {
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #b9bbbe;
  cursor: pointer;
  font-size: 1.1em;
  transition: background 0.2s;
}

.gif-category-btn:hover {
  background: #2f3136;
}

.gif-category-btn.active {
  background: #5865f2;
  color: #fff;
}

.gif-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 12px;
  overflow-y: auto;
}

.gif-item {
  aspect-ratio: 1;
  background: #0f0f0f;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s;
}

.gif-item:hover {
  transform: scale(1.05);
}

.gif-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5em;
}

.gif-overlay {
  position: absolute;
  top: 4px;
  right: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.gif-item:hover .gif-overlay {
  opacity: 1;
}

.gif-favorite {
  background: rgba(0,0,0,0.6);
  border: none;
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  font-size: 0.9em;
}

.gif-favorite.active {
  color: #faa61a;
}

.gif-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #666;
  font-size: 2em;
}

.gif-footer {
  padding: 8px 12px;
  border-top: 1px solid #2f3136;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75em;
}

.gif-powered {
  color: #666;
}

.gif-tenor {
  color: #fff;
  font-weight: 700;
}

/* ==================== STICKER PICKER ==================== */
.sticker-picker {
  position: absolute;
  bottom: 60px;
  right: 80px;
  width: 420px;
  height: 450px;
  background: #18191c;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 100;
}

.sticker-picker-header {
  padding: 12px;
  border-bottom: 1px solid #2f3136;
}

.sticker-tabs {
  display: flex;
  padding: 0 12px;
  border-bottom: 1px solid #2f3136;
}

.sticker-tab {
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: #b9bbbe;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.sticker-tab:hover {
  color: #fff;
}

.sticker-tab.active {
  color: #fff;
  border-bottom-color: #5865f2;
}

.sticker-packs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid #2f3136;
  overflow-x: auto;
}

.sticker-pack-btn {
  width: 40px;
  height: 40px;
  background: #0f0f0f;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.2em;
  transition: background 0.2s;
}

.sticker-pack-btn:hover {
  background: #2f3136;
}

.sticker-pack-btn.active {
  background: #5865f2;
}

.sticker-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px;
  overflow-y: auto;
}

.sticker-item {
  aspect-ratio: 1;
  background: #0f0f0f;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5em;
  transition: transform 0.2s, background 0.2s;
}

.sticker-item:hover {
  transform: scale(1.1);
  background: #2f3136;
}

.sticker-locked {
  opacity: 0.5;
  position: relative;
}

.sticker-locked::after {
  content: '🔒';
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 0.4em;
}

/* ==================== SOUNDBOARD ==================== */
.soundboard {
  position: absolute;
  bottom: 60px;
  left: 240px;
  width: 380px;
  background: #18191c;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  overflow: hidden;
  z-index: 100;
}

.soundboard-header {
  padding: 12px;
  border-bottom: 1px solid #2f3136;
}

.soundboard-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0a0a0a;
  border-radius: 4px;
  padding: 8px 12px;
}

.soundboard-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: #e0e0e0;
  outline: none;
}

.soundboard-categories {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid #2f3136;
  overflow-x: auto;
}

.soundboard-cat-btn {
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #b9bbbe;
  cursor: pointer;
  font-size: 0.85em;
  white-space: nowrap;
  transition: background 0.2s;
}

.soundboard-cat-btn:hover {
  background: #2f3136;
}

.soundboard-cat-btn.active {
  background: #5865f2;
  color: #fff;
}

.soundboard-volume {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #2f3136;
}

.soundboard-volume input[type="range"] {
  flex: 1;
  accent-color: #5865f2;
}

.sound-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
  max-height: 300px;
  overflow-y: auto;
}

.sound-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px;
  background: #0f0f0f;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

.sound-btn:hover {
  background: #2f3136;
  transform: scale(1.05);
}

.sound-btn.playing {
  background: #5865f2;
  animation: pulse 0.5s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.sound-emoji {
  font-size: 1.5em;
}

.sound-name {
  font-size: 0.75em;
  color: #b9bbbe;
}

.sound-duration {
  font-size: 0.65em;
  color: #666;
}

.sound-favorite {
  position: absolute;
  top: 4px;
  right: 4px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.sound-btn:hover .sound-favorite {
  opacity: 1;
}

/* ==================== POLL CREATOR ==================== */
.poll-creator {
  background: #18191c;
  border-radius: 8px;
  padding: 16px;
  margin: 8px 0;
}

.poll-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.poll-icon {
  font-size: 1.5em;
}

.poll-title {
  font-weight: 600;
}

.poll-question-input {
  width: 100%;
  padding: 12px;
  background: #0a0a0a;
  border: 1px solid #2f3136;
  border-radius: 4px;
  color: #e0e0e0;
  font-size: 1em;
  margin-bottom: 12px;
}

.poll-question-input:focus {
  outline: none;
  border-color: #5865f2;
}

.poll-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.poll-option-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.poll-option-input input {
  flex: 1;
  padding: 10px 12px;
  background: #0a0a0a;
  border: 1px solid #2f3136;
  border-radius: 4px;
  color: #e0e0e0;
}

.poll-option-input input:focus {
  outline: none;
  border-color: #5865f2;
}

.poll-option-remove {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  border-radius: 4px;
}

.poll-option-remove:hover {
  background: #2f3136;
  color: #ed4245;
}

.poll-add-option {
  padding: 10px;
  background: transparent;
  border: 1px dashed #2f3136;
  border-radius: 4px;
  color: #b9bbbe;
  cursor: pointer;
  width: 100%;
  margin-bottom: 16px;
}

.poll-add-option:hover {
  border-color: #5865f2;
  color: #5865f2;
}

.poll-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px;
  background: #0f0f0f;
  border-radius: 4px;
}

.poll-setting {
  display: flex;
  align-items: center;
  gap: 8px;
}

.poll-setting label {
  color: #b9bbbe;
  font-size: 0.9em;
}

.poll-duration select {
  padding: 6px 10px;
  background: #2f3136;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
}

.poll-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.poll-cancel,
.poll-create {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.poll-cancel {
  background: transparent;
  color: #b9bbbe;
}

.poll-cancel:hover {
  color: #fff;
}

.poll-create {
  background: #5865f2;
  color: #fff;
}

.poll-create:hover {
  background: #4752c4;
}

/* ==================== QUICK SWITCHER ==================== */
.quick-switcher-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 100px;
  z-index: 1000;
}

.quick-switcher {
  width: 560px;
  background: #18191c;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  overflow: hidden;
}

.quick-switcher-input {
  width: 100%;
  padding: 20px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #2f3136;
  color: #e0e0e0;
  font-size: 1.2em;
  outline: none;
}

.quick-switcher-filters {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid #2f3136;
}

.filter-btn {
  padding: 4px 10px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #b9bbbe;
  font-size: 0.85em;
  cursor: pointer;
}

.filter-btn:hover {
  background: #2f3136;
}

.filter-btn.active {
  background: #5865f2;
  color: #fff;
}

.quick-switcher-results {
  max-height: 400px;
  overflow-y: auto;
}

.qs-section-label {
  padding: 8px 16px;
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  color: #666;
}

.qs-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.qs-item:hover,
.qs-item.selected {
  background: #2f3136;
}

.qs-item-icon {
  width: 36px;
  height: 36px;
  background: #0f0f0f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.qs-item-icon.channel {
  border-radius: 4px;
  background: transparent;
  font-size: 1.2em;
}

.qs-item-info {
  flex: 1;
}

.qs-item-name {
  font-weight: 500;
}

.qs-item-detail {
  font-size: 0.8em;
  color: #666;
}

.qs-item-hint {
  font-size: 0.75em;
  color: #666;
}

.quick-switcher-footer {
  padding: 8px 16px;
  border-top: 1px solid #2f3136;
  display: flex;
  gap: 16px;
  font-size: 0.75em;
  color: #666;
}

.qs-hint {
  display: flex;
  align-items: center;
  gap: 4px;
}

.qs-key {
  padding: 2px 6px;
  background: #0f0f0f;
  border-radius: 3px;
  font-family: monospace;
}

/* ==================== NITRO PANEL ==================== */
.nitro-panel {
  background: linear-gradient(135deg, #5865f2 0%, #eb459e 100%);
  border-radius: 8px;
  overflow: hidden;
}

.nitro-header {
  padding: 32px;
  text-align: center;
}

.nitro-logo {
  font-size: 3em;
  margin-bottom: 16px;
}

.nitro-title {
  font-size: 1.8em;
  font-weight: 700;
  margin-bottom: 8px;
}

.nitro-subtitle {
  color: rgba(255,255,255,0.8);
}

.nitro-plans {
  display: flex;
  gap: 16px;
  padding: 0 32px 32px;
}

.nitro-plan {
  flex: 1;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}

.nitro-plan.featured {
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.3);
}

.plan-name {
  font-size: 1.2em;
  font-weight: 700;
  margin-bottom: 8px;
}

.plan-price {
  font-size: 2em;
  font-weight: 700;
  margin-bottom: 4px;
}

.plan-period {
  font-size: 0.85em;
  color: rgba(255,255,255,0.7);
  margin-bottom: 16px;
}

.plan-features {
  text-align: left;
  margin-bottom: 24px;
}

.plan-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.9em;
}

.plan-feature .check {
  color: #3ba55d;
}

.plan-btn {
  width: 100%;
  padding: 12px;
  background: #fff;
  border: none;
  border-radius: 4px;
  color: #5865f2;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
}

.plan-btn:hover {
  transform: scale(1.02);
}

.nitro-perks {
  background: #18191c;
  padding: 32px;
}

.perks-title {
  font-size: 1.2em;
  font-weight: 600;
  margin-bottom: 16px;
}

.perk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.perk-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: #0f0f0f;
  border-radius: 8px;
}

.perk-icon {
  font-size: 1.5em;
}

.perk-text h4 {
  margin-bottom: 4px;
}

.perk-text p {
  font-size: 0.85em;
  color: #b9bbbe;
}

/* ==================== SERVER DISCOVERY ==================== */
.server-discovery {
  flex: 1;
  background: #18191c;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.discovery-header {
  padding: 24px;
  background: linear-gradient(135deg, #5865f2, #eb459e);
}

.discovery-title {
  font-size: 1.8em;
  font-weight: 700;
  margin-bottom: 8px;
}

.discovery-subtitle {
  color: rgba(255,255,255,0.8);
  margin-bottom: 16px;
}

.discovery-search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 12px 16px;
}

.discovery-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1em;
  outline: none;
}

.discovery-categories {
  display: flex;
  gap: 8px;
  padding: 16px 24px;
  border-bottom: 1px solid #2f3136;
  overflow-x: auto;
}

.discovery-cat-btn {
  padding: 8px 16px;
  background: #2f3136;
  border: none;
  border-radius: 20px;
  color: #b9bbbe;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.discovery-cat-btn:hover {
  background: #40444b;
}

.discovery-cat-btn.active {
  background: #5865f2;
  color: #fff;
}

.discovery-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.discovery-section {
  margin-bottom: 32px;
}

.discovery-section-title {
  font-size: 1.2em;
  font-weight: 600;
  margin-bottom: 16px;
}

.discovery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.discovery-server-card {
  background: #0f0f0f;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}

.discovery-server-card:hover {
  transform: translateY(-4px);
}

.server-card-banner {
  height: 100px;
  background: linear-gradient(135deg, #5865f2, #eb459e);
  position: relative;
}

.server-card-icon {
  position: absolute;
  bottom: -24px;
  left: 16px;
  width: 48px;
  height: 48px;
  background: #18191c;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  border: 4px solid #0f0f0f;
}

.server-card-body {
  padding: 32px 16px 16px;
}

.server-card-name {
  font-weight: 600;
  margin-bottom: 8px;
}

.server-card-description {
  font-size: 0.85em;
  color: #b9bbbe;
  margin-bottom: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.server-card-meta {
  display: flex;
  gap: 16px;
  font-size: 0.8em;
  color: #666;
}

.server-card-members {
  display: flex;
  align-items: center;
  gap: 4px;
}

.server-card-members .online-dot {
  width: 8px;
  height: 8px;
  background: #3ba55d;
  border-radius: 50%;
}

/* ==================== STAGE CHANNEL ==================== */
.stage-channel {
  flex: 1;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
}

.stage-header {
  padding: 16px;
  background: #18191c;
  border-bottom: 1px solid #2f3136;
}

.stage-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.2em;
  font-weight: 600;
  margin-bottom: 4px;
}

.stage-topic {
  color: #b9bbbe;
  font-size: 0.9em;
}

.stage-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.stage-speakers {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-bottom: 32px;
}

.speaker-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.speaker-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  font-weight: 700;
  position: relative;
}

.speaker-avatar.speaking {
  box-shadow: 0 0 0 4px #3ba55d;
}

.speaker-muted-icon {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: #ed4245;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6em;
}

.speaker-name {
  font-weight: 500;
}

.speaker-role {
  font-size: 0.8em;
  color: #faa61a;
}

.stage-audience {
  background: #18191c;
  border-radius: 8px;
  padding: 16px;
}

.audience-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.audience-title {
  font-weight: 600;
}

.audience-count {
  color: #666;
  font-size: 0.85em;
}

.audience-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.audience-member {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  font-weight: 600;
}

.stage-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: #18191c;
}

.stage-control-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s;
}

.stage-control-btn.primary {
  background: #5865f2;
  color: #fff;
}

.stage-control-btn.primary:hover {
  background: #4752c4;
}

.stage-control-btn.danger {
  background: #ed4245;
  color: #fff;
}

.stage-control-btn.danger:hover {
  background: #c53030;
}

.stage-control-btn.secondary {
  background: #2f3136;
  color: #b9bbbe;
}

.stage-control-btn.secondary:hover {
  background: #40444b;
}

/* ==================== FORUM CHANNEL ==================== */
.forum-channel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #18191c;
}

.forum-header {
  padding: 16px;
  border-bottom: 1px solid #2f3136;
}

.forum-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.2em;
  font-weight: 600;
  margin-bottom: 8px;
}

.forum-description {
  color: #b9bbbe;
  font-size: 0.9em;
  margin-bottom: 16px;
}

.forum-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
}

.forum-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0a0a0a;
  border-radius: 4px;
  padding: 8px 12px;
}

.forum-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: #e0e0e0;
  outline: none;
}

.forum-sort {
  padding: 8px 12px;
  background: #2f3136;
  border: none;
  border-radius: 4px;
  color: #b9bbbe;
  cursor: pointer;
}

.forum-new-post {
  padding: 8px 16px;
  background: #5865f2;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-weight: 500;
}

.forum-new-post:hover {
  background: #4752c4;
}

.forum-tags {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #2f3136;
  overflow-x: auto;
}

.forum-tag {
  padding: 4px 12px;
  background: #2f3136;
  border-radius: 16px;
  font-size: 0.85em;
  color: #b9bbbe;
  cursor: pointer;
  white-space: nowrap;
}

.forum-tag:hover {
  background: #40444b;
}

.forum-tag.active {
  background: #5865f2;
  color: #fff;
}

.forum-posts {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.forum-post {
  background: #0f0f0f;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.forum-post:hover {
  background: #1a1a1a;
}

.forum-post-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.forum-post-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  font-weight: 600;
}

.forum-post-author {
  font-weight: 500;
}

.forum-post-time {
  color: #666;
  font-size: 0.8em;
}

.forum-post-title {
  font-weight: 600;
  margin-bottom: 8px;
}

.forum-post-preview {
  color: #b9bbbe;
  font-size: 0.9em;
  line-height: 1.4;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.forum-post-footer {
  display: flex;
  align-items: center;
  gap: 16px;
}

.forum-post-tags {
  display: flex;
  gap: 6px;
  flex: 1;
}

.forum-post-tag {
  padding: 2px 8px;
  background: #2f3136;
  border-radius: 4px;
  font-size: 0.75em;
  color: #b9bbbe;
}

.forum-post-stats {
  display: flex;
  gap: 12px;
  font-size: 0.8em;
  color: #666;
}

.forum-post-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==================== EVENTS PANEL ==================== */
.events-panel {
  background: #18191c;
  border-radius: 8px;
  overflow: hidden;
}

.events-header {
  padding: 16px;
  border-bottom: 1px solid #2f3136;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.events-title {
  font-weight: 600;
}

.events-create-btn {
  padding: 6px 12px;
  background: #5865f2;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 0.85em;
}

.events-tabs {
  display: flex;
  border-bottom: 1px solid #2f3136;
}

.events-tab {
  flex: 1;
  padding: 12px;
  background: transparent;
  border: none;
  color: #b9bbbe;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.events-tab:hover {
  color: #fff;
}

.events-tab.active {
  color: #fff;
  border-bottom-color: #5865f2;
}

.events-list {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.event-card {
  background: #0f0f0f;
  border-radius: 8px;
  overflow: hidden;
}

.event-card-image {
  height: 80px;
  background: linear-gradient(135deg, #5865f2, #eb459e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
}

.event-card-body {
  padding: 12px;
}

.event-card-date {
  font-size: 0.75em;
  color: #5865f2;
  font-weight: 600;
  margin-bottom: 4px;
}

.event-card-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.event-card-location {
  font-size: 0.85em;
  color: #b9bbbe;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.event-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.event-interested {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85em;
  color: #666;
}

.event-join-btn {
  padding: 6px 12px;
  background: #3ba55d;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 0.85em;
}

.event-join-btn:hover {
  background: #2d8049;
}

.events-empty {
  padding: 32px;
  text-align: center;
  color: #666;
}

.events-empty-icon {
  font-size: 3em;
  margin-bottom: 12px;
}

/* ==================== AUDIT LOG ==================== */
.audit-log {
  width: 700px;
  max-height: 600px;
  background: #18191c;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.audit-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #2f3136;
}

.audit-log-header h2 {
  margin: 0;
  font-size: 1.25em;
}

.audit-log-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: #b9bbbe;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1.2em;
}

.audit-log-close:hover {
  background: #2f3136;
  color: #fff;
}

.audit-log-filters {
  display: flex;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid #2f3136;
  background: #0f0f0f;
}

.audit-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.audit-filter-group label {
  font-size: 0.7em;
  text-transform: uppercase;
  font-weight: 600;
  color: #666;
}

.audit-filter-group input,
.audit-filter-group select {
  padding: 8px 12px;
  background: #2f3136;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
  font-size: 0.9em;
}

.audit-filter-group input:focus {
  outline: none;
  box-shadow: 0 0 0 2px #5865f2;
}

.audit-log-entries {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.audit-entry {
  padding: 12px 20px;
  border-bottom: 1px solid #0f0f0f;
  cursor: pointer;
  transition: background 0.2s;
}

.audit-entry:hover {
  background: #1f2023;
}

.audit-entry.expanded {
  background: #1f2023;
}

.audit-entry-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.audit-action-icon {
  width: 36px;
  height: 36px;
  background: #2f3136;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
}

.audit-entry-content {
  flex: 1;
}

.audit-entry-summary {
  color: #e0e0e0;
  font-size: 0.95em;
}

.audit-entry-summary strong {
  color: #fff;
}

.audit-entry-time {
  font-size: 0.8em;
  color: #666;
  margin-top: 2px;
}

.audit-expand-icon {
  color: #666;
  font-size: 0.8em;
  transition: transform 0.2s;
}

.audit-entry.expanded .audit-expand-icon {
  transform: rotate(90deg);
}

.audit-entry-details {
  margin-top: 12px;
  padding: 12px;
  background: #0a0a0a;
  border-radius: 4px;
  font-size: 0.85em;
}

.audit-detail-row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.audit-detail-row:last-child {
  margin-bottom: 0;
}

.audit-detail-label {
  color: #666;
  min-width: 80px;
}

.audit-detail-value {
  color: #b9bbbe;
}

.audit-log-empty {
  padding: 40px;
  text-align: center;
  color: #666;
}

/* ==================== EMOJI UPLOAD ==================== */
.emoji-upload {
  width: 640px;
  background: #18191c;
  border-radius: 8px;
  overflow: hidden;
}

.emoji-upload-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #2f3136;
}

.emoji-upload-header h2 {
  margin: 0;
  font-size: 1.25em;
}

.emoji-upload-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: #b9bbbe;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1.2em;
}

.emoji-upload-close:hover {
  background: #2f3136;
  color: #fff;
}

.emoji-upload-tabs {
  display: flex;
  border-bottom: 1px solid #2f3136;
}

.emoji-tab {
  flex: 1;
  padding: 12px;
  background: transparent;
  border: none;
  color: #b9bbbe;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.emoji-tab:hover {
  color: #fff;
}

.emoji-tab.active {
  color: #fff;
  border-bottom-color: #5865f2;
}

.emoji-upload-content {
  padding: 20px;
}

.emoji-slots-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #0f0f0f;
  border-radius: 4px;
  margin-bottom: 16px;
}

.slots-bar {
  flex: 1;
  height: 8px;
  background: #2f3136;
  border-radius: 4px;
  margin: 0 16px;
  overflow: hidden;
}

.slots-fill {
  height: 100%;
  background: #5865f2;
  border-radius: 4px;
  transition: width 0.3s;
}

.upload-dropzone {
  border: 2px dashed #2f3136;
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  margin-bottom: 16px;
  transition: all 0.2s;
  cursor: pointer;
}

.upload-dropzone:hover,
.upload-dropzone.dragover {
  border-color: #5865f2;
  background: rgba(88, 101, 242, 0.1);
}

.dropzone-icon {
  font-size: 3em;
  margin-bottom: 12px;
}

.dropzone-text {
  color: #b9bbbe;
  margin-bottom: 4px;
}

.dropzone-hint {
  font-size: 0.8em;
  color: #666;
}

.upload-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #0f0f0f;
  border-radius: 8px;
  margin-bottom: 16px;
}

.preview-image {
  width: 64px;
  height: 64px;
  background: #2f3136;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
}

.preview-info {
  flex: 1;
}

.preview-name-input {
  width: 100%;
  padding: 8px 12px;
  background: #2f3136;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
  margin-bottom: 4px;
}

.preview-name-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px #5865f2;
}

.preview-file-info {
  font-size: 0.8em;
  color: #666;
}

.preview-remove {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  border-radius: 4px;
}

.preview-remove:hover {
  background: #2f3136;
  color: #ed4245;
}

.upload-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.upload-cancel,
.upload-submit {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.upload-cancel {
  background: transparent;
  color: #b9bbbe;
}

.upload-cancel:hover {
  color: #fff;
}

.upload-submit {
  background: #5865f2;
  color: #fff;
}

.upload-submit:hover {
  background: #4752c4;
}

.upload-submit:disabled {
  background: #4752c4;
  opacity: 0.5;
  cursor: not-allowed;
}

.existing-emojis {
  margin-top: 20px;
}

.existing-emojis h4 {
  margin: 0 0 12px 0;
  font-size: 0.9em;
  color: #b9bbbe;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}

.emoji-grid-item {
  aspect-ratio: 1;
  background: #2f3136;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.emoji-grid-item:hover {
  background: #3f4248;
  transform: scale(1.1);
}

.emoji-edit-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.emoji-grid-item:hover .emoji-edit-overlay {
  opacity: 1;
}

/* ==================== SERVER INSIGHTS ==================== */
.server-insights {
  width: 800px;
  max-height: 700px;
  background: #18191c;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.insights-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #2f3136;
}

.insights-header h2 {
  margin: 0;
  font-size: 1.25em;
}

.insights-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: #b9bbbe;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1.2em;
}

.insights-close:hover {
  background: #2f3136;
  color: #fff;
}

.insights-tabs {
  display: flex;
  border-bottom: 1px solid #2f3136;
}

.insights-tab {
  flex: 1;
  padding: 12px;
  background: transparent;
  border: none;
  color: #b9bbbe;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.insights-tab:hover {
  color: #fff;
}

.insights-tab.active {
  color: #fff;
  border-bottom-color: #5865f2;
}

.insights-time-range {
  padding: 12px 20px;
  background: #0f0f0f;
  border-bottom: 1px solid #2f3136;
  display: flex;
  gap: 8px;
}

.time-range-btn {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid #2f3136;
  border-radius: 4px;
  color: #b9bbbe;
  cursor: pointer;
  font-size: 0.85em;
}

.time-range-btn:hover {
  background: #2f3136;
}

.time-range-btn.active {
  background: #5865f2;
  border-color: #5865f2;
  color: #fff;
}

.insights-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.insights-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.insights-stat-card {
  background: #0f0f0f;
  border-radius: 8px;
  padding: 16px;
}

.stat-label {
  font-size: 0.75em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 1.5em;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

.stat-change {
  font-size: 0.85em;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-change.positive {
  color: #3ba55d;
}

.stat-change.negative {
  color: #ed4245;
}

.insights-chart {
  background: #0f0f0f;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.chart-header h3 {
  margin: 0;
  font-size: 1em;
}

.chart-legend {
  display: flex;
  gap: 16px;
  font-size: 0.85em;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.chart-placeholder {
  height: 200px;
  background: linear-gradient(to right, #1f2023 0%, #2f3136 50%, #1f2023 100%);
  border-radius: 4px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 20px;
}

.chart-bar {
  width: 30px;
  background: #5865f2;
  border-radius: 4px 4px 0 0;
  opacity: 0.7;
}

.top-channels,
.top-members {
  margin-top: 20px;
}

.top-channels h3,
.top-members h3 {
  margin: 0 0 12px 0;
  font-size: 1em;
}

.top-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: #0f0f0f;
  border-radius: 4px;
  margin-bottom: 8px;
}

.top-item-rank {
  width: 24px;
  height: 24px;
  background: #2f3136;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  font-weight: 600;
}

.top-item-name {
  flex: 1;
}

.top-item-value {
  color: #b9bbbe;
  font-size: 0.9em;
}

/* ==================== APP DIRECTORY ==================== */
.app-directory {
  width: 900px;
  max-height: 700px;
  background: #18191c;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.app-directory-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #2f3136;
}

.app-directory-header h2 {
  margin: 0;
  font-size: 1.25em;
}

.app-directory-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: #b9bbbe;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1.2em;
}

.app-directory-close:hover {
  background: #2f3136;
  color: #fff;
}

.app-directory-search {
  padding: 12px 20px;
  background: #0f0f0f;
  border-bottom: 1px solid #2f3136;
}

.app-search-input {
  width: 100%;
  padding: 10px 16px;
  background: #2f3136;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
}

.app-search-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px #5865f2;
}

.app-directory-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.app-categories {
  width: 180px;
  background: #0f0f0f;
  border-right: 1px solid #2f3136;
  overflow-y: auto;
}

.app-category {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  color: #b9bbbe;
  transition: all 0.2s;
}

.app-category:hover {
  background: #1f2023;
  color: #fff;
}

.app-category.active {
  background: #2f3136;
  color: #fff;
}

.category-icon {
  font-size: 1.2em;
}

.app-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.app-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.app-card {
  background: #0f0f0f;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.app-card:hover {
  background: #1f2023;
  transform: translateY(-2px);
}

.app-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.app-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #5865f2, #eb459e);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
}

.app-name {
  font-weight: 600;
  margin-bottom: 2px;
}

.app-developer {
  font-size: 0.8em;
  color: #666;
}

.app-description {
  font-size: 0.9em;
  color: #b9bbbe;
  margin-bottom: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.app-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.app-tag {
  padding: 4px 8px;
  background: #2f3136;
  border-radius: 4px;
  font-size: 0.75em;
  color: #b9bbbe;
}

.app-detail-view {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.app-detail-header {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

.app-detail-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #5865f2, #eb459e);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5em;
}

.app-detail-info {
  flex: 1;
}

.app-detail-info h3 {
  margin: 0 0 4px 0;
  font-size: 1.5em;
}

.app-detail-developer {
  color: #666;
  margin-bottom: 12px;
}

.app-detail-actions {
  display: flex;
  gap: 8px;
}

.add-app-btn {
  padding: 10px 20px;
  background: #5865f2;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-weight: 500;
}

.add-app-btn:hover {
  background: #4752c4;
}

.app-back-btn {
  padding: 10px 20px;
  background: #2f3136;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}

.app-back-btn:hover {
  background: #3f4248;
}

.app-detail-description {
  margin-bottom: 24px;
  line-height: 1.6;
  color: #b9bbbe;
}

.app-detail-features {
  background: #0f0f0f;
  border-radius: 8px;
  padding: 16px;
}

.app-detail-features h4 {
  margin: 0 0 12px 0;
  font-size: 1em;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  padding: 8px 0;
  color: #b9bbbe;
  display: flex;
  align-items: center;
  gap: 8px;
}

.feature-list li::before {
  content: "✓";
  color: #3ba55d;
}

/* ==================== SLOW MODE SETTINGS ==================== */
.slowmode-modal {
  width: 480px;
  background: #18191c;
  border-radius: 8px;
  overflow: hidden;
}

.slowmode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #2f3136;
}

.slowmode-header h2 {
  margin: 0;
  font-size: 1.25em;
}

.slowmode-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: #b9bbbe;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1.2em;
}

.slowmode-close:hover {
  background: #2f3136;
  color: #fff;
}

.slowmode-content {
  padding: 20px;
}

.slowmode-channel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #0f0f0f;
  border-radius: 4px;
  margin-bottom: 20px;
}

.slowmode-channel .channel-icon {
  color: #666;
  font-weight: 600;
}

.slowmode-channel .channel-name {
  font-weight: 500;
}

.slowmode-section {
  margin-bottom: 20px;
}

.slowmode-section h3 {
  margin: 0 0 8px 0;
  font-size: 1em;
}

.slowmode-description {
  color: #b9bbbe;
  font-size: 0.9em;
  margin-bottom: 16px;
}

.slowmode-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.preset-btn {
  padding: 8px 14px;
  background: #2f3136;
  border: none;
  border-radius: 4px;
  color: #b9bbbe;
  cursor: pointer;
  font-size: 0.9em;
  transition: all 0.2s;
}

.preset-btn:hover {
  background: #3f4248;
  color: #fff;
}

.preset-btn.active {
  background: #5865f2;
  color: #fff;
}

.custom-input {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.custom-input input {
  flex: 1;
  padding: 10px 14px;
  background: #0a0a0a;
  border: 1px solid #2f3136;
  border-radius: 4px;
  color: #e0e0e0;
}

.custom-input input:focus {
  outline: none;
  border-color: #5865f2;
}

.apply-custom {
  padding: 10px 16px;
  background: #5865f2;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}

.apply-custom:hover {
  background: #4752c4;
}

.slowmode-slider {
  display: flex;
  align-items: center;
  gap: 16px;
}

.slowmode-slider input[type="range"] {
  flex: 1;
  height: 6px;
  background: #2f3136;
  border-radius: 3px;
  appearance: none;
  cursor: pointer;
}

.slowmode-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  background: #5865f2;
  border-radius: 50%;
  cursor: pointer;
}

.slowmode-slider input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #5865f2;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.slider-value {
  min-width: 80px;
  color: #b9bbbe;
  font-size: 0.9em;
  text-align: right;
}

.section-header-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 8px 0;
}

.section-header-toggle:hover h3 {
  color: #fff;
}

.toggle-icon {
  color: #666;
  font-size: 0.8em;
}

.exempt-roles {
  padding: 12px 0;
}

.exempt-description {
  color: #666;
  font-size: 0.85em;
  margin-bottom: 12px;
}

.exempt-role {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
}

.exempt-role input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #5865f2;
}

.exempt-role .role-name {
  font-weight: 500;
}

.slowmode-info {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: #0f0f0f;
  border-radius: 4px;
  font-size: 0.85em;
  color: #b9bbbe;
  line-height: 1.4;
}

.info-icon {
  flex-shrink: 0;
}

.slowmode-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  background: #0f0f0f;
  border-top: 1px solid #2f3136;
}

.slowmode-footer .cancel-btn,
.slowmode-footer .save-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.slowmode-footer .cancel-btn {
  background: transparent;
  color: #b9bbbe;
}

.slowmode-footer .cancel-btn:hover {
  color: #fff;
}

.slowmode-footer .save-btn {
  background: #5865f2;
  color: #fff;
}

.slowmode-footer .save-btn:hover {
  background: #4752c4;
}

/* ==================== CHANNEL SETTINGS ==================== */
.channel-settings-modal {
  display: flex;
  width: 900px;
  height: 600px;
  background: #18191c;
  border-radius: 8px;
  overflow: hidden;
}

.settings-channel-info {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #2f3136;
}

.channel-hash {
  color: #666;
  font-size: 1.2em;
  font-weight: 600;
}

.settings-channel-name {
  font-weight: 600;
}

.channel-overview .setting-group {
  margin-bottom: 24px;
}

.channel-name-input {
  display: flex;
  align-items: center;
  background: #0a0a0a;
  border: 1px solid #2f3136;
  border-radius: 4px;
  overflow: hidden;
}

.channel-name-input .input-prefix {
  padding: 10px 12px;
  background: #2f3136;
  color: #666;
  font-weight: 600;
}

.channel-name-input input {
  flex: 1;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: #e0e0e0;
  outline: none;
}

.setting-textarea {
  width: 100%;
  padding: 12px;
  background: #0a0a0a;
  border: 1px solid #2f3136;
  border-radius: 4px;
  color: #e0e0e0;
  resize: vertical;
  font-family: inherit;
}

.setting-textarea:focus {
  outline: none;
  border-color: #5865f2;
}

.char-count {
  display: block;
  text-align: right;
  font-size: 0.8em;
  color: #666;
  margin-top: 4px;
}

.slowmode-select select {
  padding: 10px 14px;
  background: #2f3136;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
}

.setting-hint {
  font-size: 0.85em;
  color: #666;
  margin-top: 4px;
}

.toggle-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toggle-info label {
  display: block;
  margin-bottom: 4px;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #72767d;
  border-radius: 24px;
  transition: 0.3s;
}

.toggle-slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
  background: #3ba55d;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

.setting-select {
  padding: 10px 14px;
  background: #2f3136;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
  width: 100%;
}

.channel-permissions .permissions-info {
  padding: 12px;
  background: #0f0f0f;
  border-radius: 4px;
  margin-bottom: 20px;
  color: #b9bbbe;
}

.permissions-section {
  margin-bottom: 24px;
}

.permissions-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.permissions-section h3 {
  margin: 0;
  font-size: 1em;
}

.add-override-btn {
  padding: 8px 14px;
  background: #5865f2;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 0.9em;
}

.add-override-btn:hover {
  background: #4752c4;
}

.overrides-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.override-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #0f0f0f;
  border-radius: 4px;
}

.override-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.role-indicator,
.member-indicator {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
}

.role-indicator {
  color: #fff;
}

.member-indicator {
  background: #2f3136;
}

.override-name {
  font-weight: 500;
}

.override-type {
  font-size: 0.75em;
  color: #666;
  text-transform: uppercase;
}

.override-actions {
  display: flex;
  gap: 8px;
}

.edit-override,
.remove-override {
  padding: 6px 12px;
  background: #2f3136;
  border: none;
  border-radius: 4px;
  color: #b9bbbe;
  cursor: pointer;
}

.edit-override:hover {
  background: #3f4248;
  color: #fff;
}

.remove-override:hover {
  background: #ed4245;
  color: #fff;
}

.advanced-perms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.perm-category h4 {
  margin: 0 0 12px 0;
  font-size: 0.85em;
  color: #b9bbbe;
}

.perm-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #0f0f0f;
  border-radius: 4px;
  margin-bottom: 6px;
}

.perm-toggles {
  display: flex;
  gap: 4px;
}

.perm-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  background: #2f3136;
  color: #666;
}

.perm-btn.allow:hover,
.perm-btn.allow.active {
  background: #3ba55d;
  color: #fff;
}

.perm-btn.neutral:hover,
.perm-btn.neutral.active {
  background: #72767d;
  color: #fff;
}

.perm-btn.deny:hover,
.perm-btn.deny.active {
  background: #ed4245;
  color: #fff;
}

.channel-invites,
.channel-integrations {
  padding: 20px 0;
}

.no-invites {
  text-align: center;
  color: #666;
  padding: 40px;
}

.create-invite-btn,
.create-webhook-btn {
  margin-top: 16px;
  padding: 10px 20px;
  background: #5865f2;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}

.integration-section h3 {
  margin: 0 0 8px 0;
}

.integration-desc {
  color: #b9bbbe;
  font-size: 0.9em;
}

.settings-save-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: #18191c;
  border-top: 1px solid #2f3136;
}

.settings-save-bar span {
  color: #b9bbbe;
}

.save-actions {
  display: flex;
  gap: 8px;
}

.reset-btn {
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: #b9bbbe;
  cursor: pointer;
}

.reset-btn:hover {
  text-decoration: underline;
}

/* ==================== CATEGORY EDITOR ==================== */
.category-editor {
  width: 480px;
  background: #18191c;
  border-radius: 8px;
  overflow: hidden;
}

.category-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #2f3136;
}

.category-editor-header h2 {
  margin: 0;
  font-size: 1.25em;
}

.category-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: #b9bbbe;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1.2em;
}

.category-close:hover {
  background: #2f3136;
  color: #fff;
}

.category-editor-content {
  padding: 20px;
}

.category-name-input {
  width: 100%;
  padding: 12px 14px;
  background: #0a0a0a;
  border: 1px solid #2f3136;
  border-radius: 4px;
  color: #e0e0e0;
  font-size: 1em;
  text-transform: uppercase;
}

.category-name-input:focus {
  outline: none;
  border-color: #5865f2;
}

.role-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.role-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #0f0f0f;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.role-checkbox:hover {
  background: #1f2023;
}

.role-checkbox.checked {
  background: rgba(88, 101, 242, 0.2);
}

.role-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: #5865f2;
}

.role-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.category-channels {
  margin-top: 20px;
}

.channel-list-preview {
  margin-top: 8px;
  background: #0f0f0f;
  border-radius: 4px;
  padding: 8px;
}

.channel-preview-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  color: #b9bbbe;
  font-size: 0.9em;
}

.channel-preview-item .channel-icon {
  color: #666;
}

.category-editor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #0f0f0f;
  border-top: 1px solid #2f3136;
}

.delete-category-btn {
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: #ed4245;
  cursor: pointer;
}

.delete-category-btn:hover {
  text-decoration: underline;
}

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

/* ==================== CHANNEL PERMISSIONS MODAL ==================== */
.channel-permissions-modal {
  width: 700px;
  max-height: 80vh;
  background: #18191c;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.permissions-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 20px;
  border-bottom: 1px solid #2f3136;
}

.permissions-title h2 {
  margin: 0 0 4px 0;
  font-size: 1.25em;
}

.permissions-context {
  font-size: 0.9em;
  color: #b9bbbe;
}

.channel-ref {
  color: #666;
  margin-left: 8px;
}

.permissions-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: #b9bbbe;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1.2em;
}

.permissions-close:hover {
  background: #2f3136;
  color: #fff;
}

.permissions-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: #0f0f0f;
  border-bottom: 1px solid #2f3136;
}

.permissions-search {
  flex: 1;
  max-width: 300px;
  padding: 8px 12px;
  background: #2f3136;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
}

.permissions-search:focus {
  outline: none;
  box-shadow: 0 0 0 2px #5865f2;
}

.bulk-actions {
  display: flex;
  gap: 8px;
}

.bulk-actions button {
  padding: 6px 12px;
  background: #2f3136;
  border: none;
  border-radius: 4px;
  color: #b9bbbe;
  cursor: pointer;
  font-size: 0.85em;
}

.bulk-actions button:hover {
  background: #3f4248;
  color: #fff;
}

.permissions-legend {
  display: flex;
  gap: 20px;
  padding: 12px 20px;
  background: #0f0f0f;
  border-bottom: 1px solid #2f3136;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85em;
  color: #b9bbbe;
}

.legend-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
}

.legend-icon.allow {
  background: #3ba55d;
  color: #fff;
}

.legend-icon.neutral {
  background: #72767d;
  color: #fff;
}

.legend-icon.deny {
  background: #ed4245;
  color: #fff;
}

.permissions-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.permission-category {
  margin-bottom: 24px;
}

.permission-category h3 {
  margin: 0 0 12px 0;
  font-size: 0.9em;
  color: #b9bbbe;
  text-transform: uppercase;
}

.permission-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #0f0f0f;
  border-radius: 4px;
  margin-bottom: 6px;
}

.permission-info {
  flex: 1;
}

.permission-label {
  display: block;
  font-weight: 500;
  margin-bottom: 2px;
}

.permission-desc {
  font-size: 0.8em;
  color: #666;
}

.permission-toggles {
  display: flex;
  gap: 4px;
}

.permissions-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  background: #0f0f0f;
  border-top: 1px solid #2f3136;
}

/* ==================== MEMBER LIST PANEL ==================== */
.member-list-panel {
  width: 400px;
  height: 100%;
  background: #18191c;
  border-left: 1px solid #2f3136;
  display: flex;
  flex-direction: column;
}

.member-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #2f3136;
}

.member-list-header h2 {
  margin: 0;
  font-size: 1.1em;
}

.member-list-close {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  color: #b9bbbe;
  cursor: pointer;
  border-radius: 4px;
}

.member-list-close:hover {
  background: #2f3136;
  color: #fff;
}

.member-list-filters {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #2f3136;
}

.member-search {
  flex: 1;
  padding: 8px 12px;
  background: #0a0a0a;
  border: 1px solid #2f3136;
  border-radius: 4px;
  color: #e0e0e0;
}

.member-search:focus {
  outline: none;
  border-color: #5865f2;
}

.role-filter {
  padding: 8px 12px;
  background: #2f3136;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
}

.member-list-content {
  flex: 1;
  overflow-y: auto;
}

.no-members {
  padding: 40px;
  text-align: center;
  color: #666;
}

.member-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}

.member-list-item:hover {
  background: #1f2023;
}

.member-list-item.selected {
  background: #2f3136;
}

.member-avatar-wrapper {
  position: relative;
}

.member-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #5865f2, #eb459e);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.member-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid #18191c;
}

.member-info {
  flex: 1;
  min-width: 0;
}

.member-name-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.member-name {
  font-weight: 500;
}

.member-tag {
  font-size: 0.8em;
  color: #666;
}

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

.member-role-badge {
  padding: 2px 6px;
  border: 1px solid;
  border-radius: 4px;
  font-size: 0.7em;
}

.member-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.member-list-item:hover .member-actions {
  opacity: 1;
}

.member-action-btn {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.member-action-btn:hover {
  background: #3f4248;
}

.role-assignment-menu {
  position: absolute;
  top: 100%;
  right: 16px;
  background: #18191c;
  border: 1px solid #2f3136;
  border-radius: 4px;
  padding: 8px 0;
  z-index: 10;
  min-width: 180px;
}

.role-menu-header {
  padding: 8px 12px;
  font-size: 0.8em;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
}

.role-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

.role-menu-item:hover {
  background: #2f3136;
}

.role-menu-item input {
  width: 16px;
  height: 16px;
  accent-color: #5865f2;
}

.role-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.member-list-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #2f3136;
}

.prune-members-btn {
  flex: 1;
  padding: 8px;
  background: transparent;
  border: 1px solid #2f3136;
  border-radius: 4px;
  color: #b9bbbe;
  cursor: pointer;
}

.prune-members-btn:hover {
  background: #2f3136;
  color: #fff;
}

.invite-members-btn {
  flex: 1;
  padding: 8px;
  background: #5865f2;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}

.invite-members-btn:hover {
  background: #4752c4;
}

/* ==================== BAN LIST ==================== */
.ban-list-modal {
  width: 600px;
  max-height: 600px;
  background: #18191c;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ban-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #2f3136;
}

.ban-list-header h2 {
  margin: 0;
  font-size: 1.25em;
}

.ban-list-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: #b9bbbe;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1.2em;
}

.ban-list-close:hover {
  background: #2f3136;
  color: #fff;
}

.ban-list-search {
  padding: 12px 20px;
  border-bottom: 1px solid #2f3136;
}

.ban-list-search input {
  width: 100%;
  padding: 10px 14px;
  background: #0a0a0a;
  border: 1px solid #2f3136;
  border-radius: 4px;
  color: #e0e0e0;
}

.ban-list-search input:focus {
  outline: none;
  border-color: #5865f2;
}

.ban-list-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px;
}

.ban-count {
  font-size: 0.85em;
  color: #666;
  margin-bottom: 12px;
}

.no-bans {
  text-align: center;
  padding: 40px;
}

.no-bans-icon {
  font-size: 3em;
  display: block;
  margin-bottom: 12px;
}

.no-bans p {
  margin: 0 0 4px 0;
  color: #b9bbbe;
}

.no-bans-hint {
  font-size: 0.85em;
  color: #666;
}

.ban-item {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: #0f0f0f;
  border-radius: 4px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.ban-item:hover {
  background: #1f2023;
}

.ban-item.selected {
  background: #2f3136;
}

.ban-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.ban-avatar {
  width: 36px;
  height: 36px;
  background: #ed4245;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.ban-user-details {
  flex: 1;
}

.ban-username {
  font-weight: 500;
}

.ban-tag {
  color: #666;
  font-size: 0.9em;
}

.ban-reason {
  font-size: 0.85em;
  color: #b9bbbe;
  margin-top: 2px;
}

.ban-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8em;
  color: #666;
}

.ban-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #2f3136;
}

.revoke-ban-btn {
  width: 100%;
  padding: 10px;
  background: #ed4245;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}

.revoke-ban-btn:hover {
  background: #c73e40;
}

.revoke-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}

.revoke-confirm-modal {
  background: #18191c;
  border-radius: 8px;
  padding: 20px;
  width: 400px;
}

.revoke-confirm-modal h3 {
  margin: 0 0 12px 0;
}

.revoke-warning {
  color: #faa61a;
  font-size: 0.9em;
  margin-top: 12px;
}

.revoke-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.confirm-revoke-btn {
  padding: 10px 20px;
  background: #ed4245;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}

.confirm-revoke-btn:hover {
  background: #c73e40;
}

/* ==================== INVITE MANAGER ==================== */
.invite-manager-modal {
  width: 800px;
  max-height: 600px;
  background: #18191c;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.invite-manager-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #2f3136;
}

.invite-manager-header h2 {
  margin: 0;
  font-size: 1.25em;
}

.invite-manager-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: #b9bbbe;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1.2em;
}

.invite-manager-close:hover {
  background: #2f3136;
  color: #fff;
}

.invite-manager-actions {
  padding: 12px 20px;
  border-bottom: 1px solid #2f3136;
}

.invite-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px;
}

.no-invites {
  text-align: center;
  padding: 40px;
  color: #666;
}

.invite-list-header {
  display: grid;
  grid-template-columns: 150px 120px 80px 80px 100px 50px;
  gap: 12px;
  padding: 12px 0;
  font-size: 0.75em;
  text-transform: uppercase;
  color: #666;
  font-weight: 600;
  border-bottom: 1px solid #2f3136;
}

.invite-item {
  display: grid;
  grid-template-columns: 150px 120px 80px 80px 100px 50px;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #0f0f0f;
}

.invite-code {
  display: flex;
  align-items: center;
  gap: 8px;
}

.invite-code code {
  background: #0f0f0f;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'Roboto Mono', monospace;
}

.copy-btn {
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.copy-btn:hover {
  background: #2f3136;
}

.copy-btn.copied {
  color: #3ba55d;
}

.invite-channel {
  color: #b9bbbe;
}

.invite-uses {
  color: #b9bbbe;
}

.invite-expires {
  color: #b9bbbe;
}

.invite-creator {
  color: #666;
}

.delete-invite-btn {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  color: #666;
}

.delete-invite-btn:hover {
  background: #ed4245;
  color: #fff;
}

.invite-manager-footer {
  padding: 12px 20px;
  border-top: 1px solid #2f3136;
}

.invite-hint {
  font-size: 0.85em;
  color: #666;
}

.create-invite-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}

.create-invite-modal {
  background: #18191c;
  border-radius: 8px;
  padding: 20px;
  width: 400px;
}

.create-invite-modal h3 {
  margin: 0 0 20px 0;
}

.create-field {
  margin-bottom: 16px;
}

.create-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85em;
  color: #b9bbbe;
}

.create-field select {
  width: 100%;
  padding: 10px 12px;
  background: #2f3136;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
}

.create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.generate-btn {
  padding: 10px 20px;
  background: #5865f2;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}

.generate-btn:hover {
  background: #4752c4;
}

/* ==================== NOTIFICATION SETTINGS ==================== */
.notification-settings-modal {
  width: 480px;
  background: #18191c;
  border-radius: 8px;
  overflow: hidden;
}

.notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #2f3136;
}

.notif-header h2 {
  margin: 0;
  font-size: 1.25em;
}

.notif-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: #b9bbbe;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1.2em;
}

.notif-close:hover {
  background: #2f3136;
  color: #fff;
}

.notif-target {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: #0f0f0f;
  border-bottom: 1px solid #2f3136;
}

.target-icon {
  font-size: 1.2em;
  color: #666;
}

.target-name {
  font-weight: 600;
}

.notif-content {
  padding: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.notif-section {
  margin-bottom: 24px;
}

.notif-section h3 {
  margin: 0 0 12px 0;
  font-size: 1em;
}

.notif-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notif-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: #0f0f0f;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.notif-option:hover {
  background: #1f2023;
}

.notif-option.selected {
  background: rgba(88, 101, 242, 0.2);
  border: 1px solid #5865f2;
}

.notif-option input {
  margin-top: 2px;
  accent-color: #5865f2;
}

.option-content {
  flex: 1;
}

.option-label {
  display: block;
  font-weight: 500;
  margin-bottom: 2px;
}

.option-desc {
  font-size: 0.85em;
  color: #666;
}

.mute-select {
  width: 100%;
  padding: 10px 14px;
  background: #2f3136;
  border: none;
  border-radius: 4px;
  color: #e0e0e0;
}

.suppress-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.suppress-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.suppress-option input {
  width: 18px;
  height: 18px;
  accent-color: #5865f2;
}

.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toggle-row h3 {
  margin: 0;
}

.toggle-row p {
  margin: 4px 0 0 0;
  font-size: 0.85em;
  color: #666;
}

.channel-overrides {
  padding-top: 20px;
  border-top: 1px solid #2f3136;
}

.override-hint {
  font-size: 0.85em;
  color: #666;
  margin-bottom: 12px;
}

.override-list {
  background: #0f0f0f;
  border-radius: 4px;
  margin-bottom: 12px;
}

.override-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #18191c;
}

.override-item:last-child {
  border-bottom: none;
}

.override-value {
  color: #666;
}

.notif-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  background: #0f0f0f;
  border-top: 1px solid #2f3136;
}

/* ==================== SERVER TEMPLATE ==================== */
.server-template-modal {
  width: 700px;
  max-height: 80vh;
  background: #18191c;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.template-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #2f3136;
}

.template-header h2 {
  margin: 0;
  font-size: 1.25em;
}

.template-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: #b9bbbe;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1.2em;
}

.template-close:hover {
  background: #2f3136;
  color: #fff;
}

.template-tabs {
  display: flex;
  border-bottom: 1px solid #2f3136;
}

.template-tab {
  flex: 1;
  padding: 12px;
  background: transparent;
  border: none;
  color: #b9bbbe;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.template-tab:hover {
  color: #fff;
}

.template-tab.active {
  color: #fff;
  border-bottom-color: #5865f2;
}

.template-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.template-intro {
  color: #b9bbbe;
  margin-bottom: 20px;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.template-card {
  background: #0f0f0f;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
}

.template-card:hover {
  background: #1f2023;
}

.template-card.selected {
  border-color: #5865f2;
  background: rgba(88, 101, 242, 0.1);
}

.template-card .template-icon {
  font-size: 2em;
  margin-bottom: 12px;
}

.template-card .template-info h3 {
  margin: 0 0 4px 0;
  font-size: 1.1em;
}

.template-card .template-info p {
  margin: 0;
  font-size: 0.85em;
  color: #666;
}

.template-preview {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #2f3136;
}

.preview-section {
  display: flex;
  gap: 6px;
  font-size: 0.85em;
}

.preview-label {
  color: #666;
}

.preview-count {
  font-weight: 600;
}

.template-detail {
  margin-top: 20px;
  padding: 16px;
  background: #0f0f0f;
  border-radius: 8px;
}

.template-detail h3 {
  margin: 0 0 16px 0;
}

.detail-section {
  margin-bottom: 16px;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.detail-section h4 {
  margin: 0 0 8px 0;
  font-size: 0.85em;
  color: #b9bbbe;
}

.detail-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.detail-item {
  padding: 4px 10px;
  background: #2f3136;
  border-radius: 4px;
  font-size: 0.85em;
}

.detail-item.role {
  color: #5865f2;
}

.my-templates .no-templates {
  text-align: center;
  padding: 40px;
}

.no-templates-icon {
  font-size: 3em;
  display: block;
  margin-bottom: 12px;
}

.no-templates p {
  margin: 0 0 4px 0;
  color: #b9bbbe;
}

.no-templates span {
  font-size: 0.85em;
  color: #666;
}

.template-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #0f0f0f;
  border-radius: 8px;
  margin-bottom: 12px;
  cursor: pointer;
  border: 2px solid transparent;
}

.template-list-item:hover {
  background: #1f2023;
}

.template-list-item.selected {
  border-color: #5865f2;
}

.template-list-item .template-icon {
  font-size: 2em;
}

.template-list-item .template-info {
  flex: 1;
}

.template-list-item .template-info h3 {
  margin: 0 0 4px 0;
}

.template-list-item .template-info p {
  margin: 0 0 4px 0;
  font-size: 0.85em;
  color: #666;
}

.template-date {
  font-size: 0.8em;
  color: #666;
}

.template-action-btn {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.template-action-btn:hover {
  background: #2f3136;
}

.create-template .create-intro {
  color: #b9bbbe;
  margin-bottom: 20px;
}

.create-form .form-group {
  margin-bottom: 20px;
}

.create-form .form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.create-form input[type="text"],
.create-form textarea {
  width: 100%;
  padding: 12px;
  background: #0a0a0a;
  border: 1px solid #2f3136;
  border-radius: 4px;
  color: #e0e0e0;
  font-family: inherit;
}

.create-form input:focus,
.create-form textarea:focus {
  outline: none;
  border-color: #5865f2;
}

.include-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.include-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.include-option input {
  width: 18px;
  height: 18px;
  accent-color: #5865f2;
}

.template-warning {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: rgba(250, 166, 26, 0.1);
  border: 1px solid #faa61a;
  border-radius: 4px;
  color: #faa61a;
  font-size: 0.9em;
}

.template-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  background: #0f0f0f;
  border-top: 1px solid #2f3136;
}

.apply-btn {
  padding: 10px 20px;
  background: #5865f2;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-weight: 500;
}

.apply-btn:hover {
  background: #4752c4;
}

.apply-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==================== LANDING PAGE ==================== */
.landing-page {
  min-height: 100vh;
  background: #0a0a0a;
  color: #e0e0e0;
}

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 60px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(10px);
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.25em;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}

.brand-icon {
  font-size: 1.5em;
  color: #ff0000;
}

.nav-links {
  display: flex;
  gap: 32px;
}

.nav-links a {
  color: #b9bbbe;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
  color: #fff;
}

.nav-auth {
  display: flex;
  gap: 12px;
}

.nav-login {
  padding: 10px 20px;
  color: #b9bbbe;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-login:hover {
  color: #fff;
}

.nav-register {
  padding: 10px 24px;
  background: #5865f2;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  transition: background 0.2s;
}

.nav-register:hover {
  background: #4752c4;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  padding: 120px 60px 60px;
  gap: 60px;
}

.hero-content {
  flex: 1;
  max-width: 600px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  font-size: 0.85em;
  color: #b9bbbe;
  margin-bottom: 24px;
}

.badge-dot {
  width: 8px;
  height: 8px;
  background: #3ba55d;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.hero-title {
  font-size: 4em;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 24px;
  color: #fff;
}

.gradient-text {
  background: linear-gradient(135deg, #ff0000, #0066ff, #ffa500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.25em;
  color: #b9bbbe;
  line-height: 1.6;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 48px;
}

.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  background: linear-gradient(135deg, #ff0000, #cc0000);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  font-size: 1.1em;
  transition: all 0.2s;
}

.cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255, 0, 0, 0.3);
}

.cta-arrow {
  transition: transform 0.2s;
}

.cta-primary:hover .cta-arrow {
  transform: translateX(4px);
}

.cta-secondary {
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  background: transparent;
  border: 1px solid #333;
  color: #b9bbbe;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.2s;
}

.cta-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #555;
  color: #fff;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 32px;
}

.stat {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 1.5em;
  font-weight: 700;
  color: #fff;
}

.stat-label {
  font-size: 0.85em;
  color: #666;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: #333;
}

.hero-visual {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-preview {
  width: 500px;
  height: 350px;
  background: #18191c;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #2f3136;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.preview-header {
  padding: 12px 16px;
  background: #0f0f0f;
  border-bottom: 1px solid #2f3136;
}

.preview-dots {
  display: flex;
  gap: 8px;
}

.preview-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #333;
}

.preview-dots span:first-child { background: #ff5f56; }
.preview-dots span:nth-child(2) { background: #ffbd2e; }
.preview-dots span:last-child { background: #27c93f; }

.preview-content {
  display: flex;
  height: calc(100% - 40px);
}

.preview-sidebar {
  width: 72px;
  background: #0f0f0f;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.preview-server {
  width: 48px;
  height: 48px;
  background: #2f3136;
  border-radius: 50%;
  transition: border-radius 0.2s;
}

.preview-server.active {
  background: linear-gradient(135deg, #ff0000, #cc0000);
  border-radius: 16px;
}

.preview-channels {
  width: 200px;
  background: #18191c;
  padding: 16px;
}

.preview-channel {
  height: 28px;
  background: #2f3136;
  border-radius: 4px;
  margin-bottom: 8px;
  opacity: 0.5;
}

.preview-channel.active {
  background: rgba(255, 255, 255, 0.1);
  opacity: 1;
}

.preview-chat {
  flex: 1;
  padding: 16px;
}

.preview-message {
  height: 60px;
  background: #0f0f0f;
  border-radius: 4px;
  margin-bottom: 12px;
}

.preview-message.short {
  width: 70%;
}

.features-section {
  padding: 100px 60px;
  background: #0f0f0f;
}

.section-title {
  font-size: 2.5em;
  text-align: center;
  margin-bottom: 16px;
  color: #fff;
}

.section-subtitle {
  text-align: center;
  color: #666;
  font-size: 1.1em;
  margin-bottom: 60px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-card {
  padding: 32px;
  background: #18191c;
  border-radius: 12px;
  border: 1px solid #2f3136;
  transition: all 0.3s;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: #5865f2;
}

.feature-icon {
  font-size: 2.5em;
  margin-bottom: 16px;
  display: block;
}

.feature-card h3 {
  margin: 0 0 8px;
  font-size: 1.25em;
  color: #fff;
}

.feature-card p {
  margin: 0;
  color: #b9bbbe;
  line-height: 1.5;
}

/* ==================== AUTH PAGES ==================== */
.auth-page {
  min-height: 100vh;
  display: flex;
  background: #0a0a0a;
}

.auth-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.auth-header {
  margin-bottom: 40px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-size: 1.25em;
  font-weight: 700;
}

.auth-brand .brand-icon {
  font-size: 1.5em;
  color: #ff0000;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  padding: 40px;
  background: #18191c;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.auth-card h1 {
  margin: 0 0 8px;
  font-size: 1.75em;
  color: #fff;
  text-align: center;
}

.auth-subtitle {
  text-align: center;
  color: #b9bbbe;
  margin-bottom: 24px;
}

.auth-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(237, 66, 69, 0.1);
  border: 1px solid #ed4245;
  border-radius: 4px;
  color: #ed4245;
  margin-bottom: 16px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  color: #b9bbbe;
}

.form-group .required {
  color: #ed4245;
}

.form-group input {
  padding: 12px 14px;
  background: #0a0a0a;
  border: 1px solid #2f3136;
  border-radius: 4px;
  color: #e0e0e0;
  font-size: 1em;
  transition: border-color 0.2s;
}

.form-group input:focus {
  outline: none;
  border-color: #5865f2;
}

.form-group input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.forgot-link {
  font-size: 0.85em;
  color: #00aff4;
  text-decoration: none;
  margin-top: 4px;
}

.forgot-link:hover {
  text-decoration: underline;
}

.auth-submit {
  padding: 14px;
  background: #5865f2;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 8px;
}

.auth-submit:hover {
  background: #4752c4;
}

.auth-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.terms-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9em;
  color: #b9bbbe;
  cursor: pointer;
}

.terms-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: #5865f2;
  margin-top: 2px;
}

.terms-checkbox a {
  color: #00aff4;
  text-decoration: none;
}

.terms-checkbox a:hover {
  text-decoration: underline;
}

.auth-switch {
  text-align: center;
  margin-top: 16px;
  color: #b9bbbe;
  font-size: 0.9em;
}

.auth-switch a {
  color: #00aff4;
  text-decoration: none;
}

.auth-switch a:hover {
  text-decoration: underline;
}

.auth-footer {
  margin-top: 24px;
}

.auth-footer a {
  color: #666;
  text-decoration: none;
  font-size: 0.9em;
}

.auth-footer a:hover {
  color: #b9bbbe;
}

.auth-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a0a0a, #18191c);
  position: relative;
  overflow: hidden;
}

.visual-content {
  text-align: center;
  z-index: 1;
}

.trinity-logo {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 0 auto 32px;
}

.trinity-ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid;
  animation: spin 20s linear infinite;
}

.trinity-ring.foundation {
  width: 100%;
  height: 100%;
  border-color: #ff0000;
}

.trinity-ring.corporation {
  width: 75%;
  height: 75%;
  top: 12.5%;
  left: 12.5%;
  border-color: #0066ff;
  animation-direction: reverse;
  animation-duration: 15s;
}

.trinity-ring.labs {
  width: 50%;
  height: 50%;
  top: 25%;
  left: 25%;
  border-color: #ffa500;
  animation-duration: 10s;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.visual-content h2 {
  font-size: 2em;
  margin: 0 0 8px;
  color: #fff;
}

.visual-content p {
  color: #666;
}

.register-card {
  max-width: 480px;
}

/* ==================== INFO PAGES (About, Features) ==================== */
.info-page {
  min-height: 100vh;
  background: #0a0a0a;
  color: #e0e0e0;
}

.info-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 60px;
  background: rgba(10, 10, 10, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.info-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 60px;
}

.about-hero,
.features-hero {
  text-align: center;
  margin-bottom: 80px;
}

.about-hero h1,
.features-hero h1 {
  font-size: 3em;
  margin: 0 0 16px;
  color: #fff;
}

.hero-desc {
  font-size: 1.25em;
  color: #b9bbbe;
  max-width: 600px;
  margin: 0 auto;
}

.about-section {
  margin-bottom: 80px;
}

.about-section h2 {
  font-size: 2em;
  margin: 0 0 24px;
  color: #fff;
}

.section-intro {
  color: #b9bbbe;
  margin-bottom: 32px;
}

.mission-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.mission-text p {
  margin: 0 0 16px;
  line-height: 1.7;
  color: #b9bbbe;
}

.mission-text strong {
  color: #fff;
}

.mission-values {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.value-card {
  padding: 24px;
  background: #18191c;
  border-radius: 8px;
  border: 1px solid #2f3136;
}

.value-icon {
  font-size: 2em;
  margin-bottom: 12px;
  display: block;
}

.value-card h3 {
  margin: 0 0 8px;
  color: #fff;
}

.value-card p {
  margin: 0;
  color: #666;
  font-size: 0.9em;
}

.trinity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.trinity-card {
  padding: 32px;
  background: #18191c;
  border-radius: 12px;
  border: 2px solid #2f3136;
  text-align: center;
  transition: all 0.3s;
}

.trinity-card.foundation {
  border-color: #ff0000;
}

.trinity-card.corporation {
  border-color: #0066ff;
}

.trinity-card.labs {
  border-color: #ffa500;
}

.trinity-card:hover {
  transform: translateY(-4px);
}

.trinity-icon {
  font-size: 3em;
  margin-bottom: 16px;
}

.trinity-card h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 1.5em;
}

.trinity-card p {
  margin: 0;
  color: #b9bbbe;
}

.timeline {
  position: relative;
  padding-left: 40px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #ff0000, #0066ff, #ffa500);
}

.timeline-item {
  position: relative;
  padding-bottom: 40px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -44px;
  top: 4px;
  width: 12px;
  height: 12px;
  background: #5865f2;
  border-radius: 50%;
  border: 3px solid #0a0a0a;
}

.timeline-year {
  font-size: 0.85em;
  font-weight: 600;
  color: #5865f2;
  margin-bottom: 8px;
}

.timeline-content h3 {
  margin: 0 0 8px;
  color: #fff;
}

.timeline-content p {
  margin: 0;
  color: #b9bbbe;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.team-card {
  padding: 32px;
  background: #18191c;
  border-radius: 8px;
  text-align: center;
}

.team-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  font-weight: 700;
  margin: 0 auto 16px;
  color: #fff;
}

.team-card h3 {
  margin: 0 0 4px;
  color: #fff;
}

.team-card p {
  margin: 0;
  color: #666;
  font-size: 0.9em;
}

.about-cta,
.features-cta {
  text-align: center;
  padding: 60px;
  background: #18191c;
  border-radius: 12px;
  margin-top: 60px;
}

.about-cta h2,
.features-cta h2 {
  margin: 0 0 12px;
  font-size: 2em;
  color: #fff;
}

.about-cta p,
.features-cta p {
  margin: 0 0 32px;
  color: #b9bbbe;
}

.cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.feature-category {
  margin-bottom: 60px;
}

.feature-category h2 {
  font-size: 1.75em;
  margin: 0 0 24px;
  color: #fff;
}

.comparison-section {
  margin-top: 80px;
}

.comparison-section h2 {
  font-size: 2em;
  text-align: center;
  margin: 0 0 40px;
  color: #fff;
}

.comparison-table-container {
  overflow-x: auto;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: #18191c;
  border-radius: 8px;
  overflow: hidden;
}

.comparison-table th,
.comparison-table td {
  padding: 16px 24px;
  text-align: center;
  border-bottom: 1px solid #2f3136;
}

.comparison-table th {
  background: #0f0f0f;
  font-weight: 600;
  color: #b9bbbe;
}

.comparison-table th.highlight {
  color: #5865f2;
}

.comparison-table td {
  color: #666;
}

.comparison-table td.highlight {
  color: #3ba55d;
  font-weight: 600;
}

.comparison-table td:first-child {
  text-align: left;
  font-weight: 500;
  color: #e0e0e0;
}

.info-footer {
  border-top: 1px solid #2f3136;
  padding: 40px 60px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #fff;
}

.footer-brand .brand-icon {
  color: #ff0000;
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-links a {
  color: #b9bbbe;
  text-decoration: none;
  font-size: 0.9em;
}

.footer-links a:hover {
  color: #fff;
}

.footer-copy {
  color: #666;
  font-size: 0.85em;
}

/* Loading screen */
.loading-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  color: #b9bbbe;
  gap: 16px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #2f3136;
  border-top-color: #5865f2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Responsive */
@media (max-width: 1024px) {
  .hero {
    flex-direction: column;
    text-align: center;
    padding-top: 140px;
  }

  .hero-title {
    font-size: 3em;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
  }

  .hero-visual {
    display: none;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mission-content {
    grid-template-columns: 1fr;
  }

  .trinity-grid {
    grid-template-columns: 1fr;
  }

  .auth-visual {
    display: none;
  }
}

@media (max-width: 768px) {
  .landing-nav,
  .info-nav {
    padding: 16px 20px;
  }

  .nav-links {
    display: none;
  }

  .hero {
    padding: 100px 20px 40px;
  }

  .hero-title {
    font-size: 2em;
  }

  .hero-subtitle {
    font-size: 1em;
  }

  .hero-actions {
    flex-direction: column;
  }

  .features-section,
  .info-content {
    padding: 40px 20px;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .auth-container {
    padding: 20px;
  }

  .auth-card {
    padding: 24px;
  }

  .footer-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
}
