/* Auth Page - Mobile First Design */
.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  background-image: 
    radial-gradient(ellipse at top, rgba(0, 255, 136, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

/* Form Group Input Styles - Consistent sizing for all inputs */
.auth-form .form-group {
  margin-bottom: 20px;
}

.auth-form .form-group:last-child {
  margin-bottom: 0;
}

.auth-form .form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auth-form .form-group input.readonly-input {
  background: var(--bg-tertiary);
  opacity: 0.8;
  cursor: not-allowed;
  color: var(--text-muted);
}

.validating {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  display: block;
}

.invalid-token {
  font-size: 12px;
  color: #ff4444;
  margin-top: 4px;
  display: block;
}

.valid-token {
  font-size: 12px;
  color: #00ff88;
  margin-top: 4px;
  display: block;
}

.auth-form .form-group input[type="text"],
.auth-form .form-group input[type="email"],
.auth-form .form-group input[type="password"] {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 15px;
  transition: all 0.2s ease;
  min-height: 50px;
  box-sizing: border-box;
}

.auth-form .form-group input[type="text"]:focus,
.auth-form .form-group input[type="email"]:focus,
.auth-form .form-group input[type="password"]:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.15);
  background: var(--bg-tertiary);
}

.auth-form .form-group input::placeholder {
  color: var(--text-muted);
  font-size: 14px;
}

.auth-form .form-group input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-container {
  width: 100%;
  max-width: 400px;
  padding: 32px 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
  position: relative;
}

.auth-header {
  text-align: center;
  margin-bottom: 28px;
}

.auth-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--accent-primary);
  text-shadow: 0 0 30px var(--accent-glow);
  margin-bottom: 8px;
}

.auth-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.auth-form {
  margin-bottom: 24px;
}

.auth-btn {
  width: 100%;
  margin-top: 8px;
  padding: 16px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 12px;
  min-height: 54px;
}

.auth-btn .loading-text {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-btn .spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-top-color: var(--bg-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.auth-footer {
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 16px;
}

.auth-footer-small {
  text-align: center;
  margin-top: 20px;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.auth-divider span {
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* QR Login Button */
.qr-trigger-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 8px;
}

.qr-trigger-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.qr-trigger-btn:active {
  transform: translateY(0);
}

.qr-trigger-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  border-radius: 14px;
  color: var(--bg-primary);
  flex-shrink: 0;
}

.qr-trigger-text {
  flex: 1;
  text-align: left;
}

.qr-trigger-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.qr-trigger-desc {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
}

.qr-trigger-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* 2FA Styles */
.twofa-login-info {
  text-align: center;
  margin-bottom: 24px;
  padding: 20px;
  background: var(--bg-tertiary);
  border-radius: 16px;
  border: 1px solid var(--border-color);
}

.twofa-login-info p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.code-input {
  width: 100%;
  padding: 20px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 12px;
  text-align: center;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 14px;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.code-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px var(--accent-glow);
  outline: none;
}

.code-input::placeholder {
  letter-spacing: 12px;
  opacity: 0.4;
}

.code-input-group {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 8px 0;
}

.code-input-box {
  width: 44px;
  height: 52px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  font-family: monospace;
  text-transform: uppercase;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  caret-color: var(--accent-primary);
}

.code-input-box:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(88, 101, 242, 0.2));
  background: rgba(88, 101, 242, 0.06);
}

/* QR Login Container */
.qr-mode {
  max-width: 100%;
}

.qr-login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.qr-back-btn {
  position: absolute;
  top: -60px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.qr-back-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.qr-login-header {
  text-align: center;
  margin-bottom: 24px;
}

.qr-login-header .auth-title {
  font-size: 24px;
  margin-bottom: 4px;
}

.qr-login-header .auth-subtitle {
  font-size: 13px;
  color: var(--text-muted);
}

.qr-code-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 28px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  width: 100%;
}

.qr-status-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
  min-height: 48px;
}

.qr-status-indicator.scanned {
  color: var(--accent-primary);
}

.qr-pulse {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-primary);
  animation: qrPulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 20px var(--accent-primary);
}

@keyframes qrPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

.qr-checkmark {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  border-radius: 50%;
  color: var(--bg-primary);
  animation: checkPop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0 4px 24px rgba(0, 255, 136, 0.4);
}

@keyframes checkPop {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  60% { transform: scale(1.3) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.qr-code-wrapper {
  padding: 20px;
  background: var(--bg-secondary);
  border-radius: 20px;
  border: 2px solid var(--border-color);
  position: relative;
}

.qr-code-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-instructions {
  text-align: center;
}

.qr-instructions p {
  margin: 0;
  font-size: 14px;
  color: var(--text-primary);
}

.qr-subtext {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin-top: 4px !important;
}

.qr-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.qr-timer-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
}

.qr-timer-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  border-radius: 3px;
  transition: width 1s linear;
}

.qr-timer-bar.warning .qr-timer-fill {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.qr-timer-bar.danger .qr-timer-fill {
  background: linear-gradient(90deg, #ef4444, #f87171);
  animation: timerPulse 0.5s ease-in-out infinite;
}

@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.qr-timer-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

.qr-user-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 14px;
  border: 1px solid var(--border-color);
  width: 100%;
  animation: slideDown 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes slideDown {
  0% { transform: translateY(-20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.qr-user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.qr-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qr-user-avatar span {
  font-size: 20px;
  font-weight: 600;
  color: var(--bg-primary);
  text-transform: uppercase;
}

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

.qr-user-email {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qr-user-status {
  font-size: 13px;
  color: var(--accent-primary);
  margin-top: 2px;
}

.qr-expired, .qr-approved {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 20px;
  animation: fadeIn 0.3s ease;
}

.qr-expired-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 50%;
  color: var(--danger);
  animation: shakeIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes shakeIn {
  0% { transform: scale(0) rotate(-45deg); }
  60% { transform: scale(1.1) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.qr-approved-circle {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--success), #10b981);
  border-radius: 50%;
  color: var(--text-on-accent);
  animation: successPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0 8px 32px rgba(16, 185, 129, 0.4);
}

@keyframes successPop {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  50% { transform: scale(1.2) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.qr-security-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 12px 20px;
  background: var(--bg-secondary);
  border-radius: 24px;
  font-size: 11px;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

/* ============ MOBILE STYLES ============ */

@media (max-width: 768px) {
  .auth-page {
    justify-content: flex-start;
    padding: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  }
  
  .auth-container {
    flex: 1;
    max-width: 100%;
    padding: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    max-height: 100dvh;
  }
  
  .auth-header {
    padding: 48px 24px 24px;
    flex-shrink: 0;
  }
  
  .auth-title {
    font-size: 32px;
    letter-spacing: 4px;
  }
  
  .auth-subtitle {
    font-size: 12px;
  }
  
  .auth-form {
    flex: 1;
    padding: 0 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .auth-footer {
    padding: 16px 24px 24px;
    flex-shrink: 0;
  }
  
  .qr-trigger-btn {
    padding: 18px;
    gap: 14px;
  }
  
  .qr-trigger-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }
  
  .qr-trigger-title {
    font-size: 16px;
  }
  
  .qr-trigger-desc {
    font-size: 13px;
  }
  
  .twofa-login-info {
    margin-bottom: 20px;
    padding: 16px;
  }
  
  .twofa-login-info p {
    font-size: 13px;
  }
  
  .code-input {
    font-size: 28px;
    padding: 24px;
    border-radius: 16px;
    letter-spacing: 14px;
  }
  
  .auth-btn {
    min-height: 56px;
    font-size: 16px;
  }
  
  .auth-divider {
    margin: 20px 0;
  }
  
  .qr-login-header {
    padding: 48px 24px 0;
  }
  
  .qr-login-header .auth-title {
    font-size: 26px;
  }
  
  .qr-code-box {
    padding: 24px;
    margin: 0 24px;
    border-radius: 20px;
  }
  
  .qr-code-wrapper {
    padding: 16px;
    border-radius: 16px;
  }
  
  .qr-user-preview {
    padding: 14px;
  }
  
  .qr-expired,
  .qr-approved {
    padding: 48px 24px;
  }
  
  .qr-expired-icon {
    width: 72px;
    height: 72px;
  }
  
  .qr-approved-circle {
    width: 96px;
    height: 96px;
  }
  
  .qr-security-badge {
    margin: 20px 24px 0;
  }
}

@media (max-width: 480px) {
  .auth-header {
    padding: 40px 20px 20px;
  }
  
  .auth-title {
    font-size: 28px;
    letter-spacing: 3px;
  }
  
  .auth-form {
    padding: 0 20px;
  }
  
  .auth-footer {
    padding: 12px 20px 20px;
  }
  
  .qr-trigger-btn {
    padding: 16px;
  }
  
  .qr-trigger-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
  }
  
  .qr-trigger-title {
    font-size: 15px;
  }
  
  .qr-trigger-desc {
    font-size: 12px;
  }
  
  .code-input {
    font-size: 24px;
    padding: 20px;
    letter-spacing: 12px;
  }
  
  .auth-btn {
    min-height: 54px;
    font-size: 15px;
    padding: 14px;
    border-radius: 14px;
  }
  
  .twofa-login-info {
    padding: 14px;
    border-radius: 14px;
  }
  
  .qr-login-header {
    padding: 32px 20px 0;
  }
  
  .qr-login-header .auth-title {
    font-size: 22px;
  }
  
  .qr-code-box {
    padding: 20px;
    margin: 0 16px;
    border-radius: 18px;
  }
  
  .qr-code-wrapper {
    padding: 14px;
  }
  
  .qr-user-preview {
    padding: 12px;
    gap: 12px;
  }
  
  .qr-user-avatar {
    width: 44px;
    height: 44px;
  }
  
  .qr-expired,
  .qr-approved {
    padding: 40px 16px;
  }
  
  .qr-expired-icon {
    width: 64px;
    height: 64px;
  }
  
  .qr-approved-circle {
    width: 88px;
    height: 88px;
  }
  
  .qr-security-badge {
    margin: 16px 16px 0;
    font-size: 10px;
    padding: 10px 16px;
  }
  
  .error-message {
    font-size: 13px;
    padding: 14px;
    background: rgba(255, 71, 87, 0.1);
    border-radius: 12px;
    margin-bottom: 12px;
  }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .auth-page {
    justify-content: center;
  }
  
  .auth-container {
    flex: none;
    max-height: none;
  }
  
  .auth-header {
    padding: 16px 24px;
    margin-bottom: 12px;
  }
  
  .auth-title {
    font-size: 24px;
  }
  
  .qr-login-header {
    padding: 16px 24px 0;
  }
  
  .qr-code-box {
    padding: 16px;
  }
}

/* Prevent iOS zoom on inputs */
@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Better touch feedback */
@media (hover: none) and (pointer: coarse) {
  .btn:active,
  .qr-trigger-btn:active {
    transform: scale(0.98);
  }
}

/* Forgot Password Link */
.forgot-password-group {
  text-align: right;
  margin-top: -8px;
}

.forgot-password-link {
  font-size: 13px;
  color: var(--accent-primary);
  text-decoration: none;
  transition: var(--transition);
}

.forgot-password-link:hover {
  color: var(--accent-secondary);
  text-decoration: underline;
}
.language-selector {
  position: relative;
  display: inline-block;
}

.language-selector-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.language-selector-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.language-flag {
  font-size: 18px;
}

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

.language-arrow {
  font-size: 10px;
  opacity: 0.7;
}

.language-selector-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
}

.language-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: #1a1a2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 8px;
  min-width: 180px;
  z-index: 100;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.language-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s ease;
  text-align: left;
}

.language-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.language-option.active {
  background: rgba(0, 255, 136, 0.15);
  color: #00ff88;
}

.language-option.active .language-flag {
  transform: scale(1.1);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .language-selector {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
  }
  
  .language-selector-btn {
    padding: 10px 14px;
    font-size: 13px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--accent-primary);
    box-shadow: 0 4px 20px rgba(0, 255, 136, 0.3);
  }
  
  .language-flag {
    font-size: 18px;
  }
  
  .language-name {
    display: none;
  }
  
  .language-dropdown {
    min-width: 160px;
    right: 0;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 8px;
  }
  
  .language-option {
    padding: 10px 12px;
    font-size: 13px;
  }
}
.splash-page {
  min-height: 100vh;
  background: #0a0a0f;
  color: var(--text-primary);
  overflow-x: hidden;
  overflow-y: visible;
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Monaco', monospace;
  position: relative;
}

.splash-scroll-container {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) var(--bg-secondary);
  -webkit-overflow-scrolling: touch;
}

.splash-scroll-container::-webkit-scrollbar {
  width: 10px;
}

.splash-scroll-container::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

.splash-scroll-container::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 5px;
  border: 2px solid var(--bg-secondary);
}

.splash-scroll-container::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

/* Background Effects */
.splash-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.bg-gradient {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(120, 0, 255, 0.15), transparent),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(0, 255, 136, 0.08), transparent),
    radial-gradient(ellipse 40% 30% at 20% 80%, rgba(255, 0, 100, 0.06), transparent);
}

.bg-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black, transparent);
}

.bg-glow {
  position: absolute;
  top: 20%;
  left: 50%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(0, 255, 136, 0.12) 0%, transparent 70%);
  filter: blur(60px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.bg-particles {
  position: absolute;
  inset: 0;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(0, 255, 136, 0.6);
  border-radius: 50%;
  animation: float 5s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { opacity: 0; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-20px); }
}

/* Navigation */
.splash-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.5rem 0;
  transition: all 0.3s ease;
}

.splash-nav.scrolled {
  background: rgba(10, 10, 15, 0.9);
  backdrop-filter: blur(20px);
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.logo-mark {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #00ff88, #00cc6a);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.logo-text {
  background: linear-gradient(135deg, #fff 0%, #00ff88 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-links {
  display: flex;
  gap: 3rem;
}

.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.2s;
  position: relative;
}

.nav-links a:hover {
  color: var(--text-on-accent);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: #00ff88;
  transition: width 0.3s;
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: all 0.3s;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
  color: #0a0a0f;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(0, 255, 136, 0.3);
}

.btn-outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-on-accent);
}

.btn-outline:hover {
  border-color: #00ff88;
  color: #00ff88;
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: none;
}

.btn-ghost:hover {
  color: var(--text-on-accent);
}

.btn-login {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
  padding: 0.6rem 1.5rem;
}

.btn-login:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-muted);
}

.btn-large {
  padding: 1rem 2rem;
  font-size: 0.9rem;
}

.btn-full {
  width: 100%;
}

.btn-arrow {
  transition: transform 0.3s;
}

.btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* Hero Section */
.splash-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 8rem 3rem 4rem;
  position: relative;
  z-index: 1;
}

.hero-content {
  max-width: 650px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: rgba(0, 255, 136, 0.05);
  border: 1px solid rgba(0, 255, 136, 0.15);
  border-radius: 2px;
  font-size: 0.75rem;
  color: #00ff88;
  margin-bottom: 2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.badge-line {
  width: 16px;
  height: 1px;
  background: #00ff88;
}

.hero-title {
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.title-line {
  display: block;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.title-highlight {
  display: block;
  background: linear-gradient(135deg, #fff 0%, #00ff88 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  max-width: 520px;
}

.hero-stats {
  display: flex;
  gap: 3rem;
  margin-bottom: 2.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: #00ff88;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.25rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
}

.hero-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 4rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.scroll-indicator {
  width: 20px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.scroll-dot {
  width: 2px;
  height: 6px;
  background: #00ff88;
  animation: scroll-bounce 1.5s infinite;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* Hero Visual */
.hero-visual {
  position: relative;
  width: 420px;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.anime-decoration {
  position: absolute;
  pointer-events: none;
  animation: anime-float 8s ease-in-out infinite;
}

.anime-circle-1 {
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 0s;
}

.anime-circle-2 {
  width: 250px;
  height: 250px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 2s;
}

@keyframes anime-float {
  0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.05); }
}

.visual-grid {
  position: relative;
  width: 100%;
  height: 100%;
}

.visual-card {
  position: absolute;
  background: rgba(15, 15, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  backdrop-filter: blur(10px);
  animation: float-card 6s ease-in-out infinite;
}

.card-1 { top: 10%; left: 0; animation-delay: 0s; }
.card-2 { top: 35%; right: 0; animation-delay: 1s; }
.card-3 { bottom: 35%; left: 10%; animation-delay: 2s; }
.card-4 { bottom: 10%; right: 10%; animation-delay: 3s; }

@keyframes float-card {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.card-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 255, 136, 0.05));
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-icon::after {
  content: '';
  width: 12px;
  height: 12px;
  background: #00ff88;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.visual-card span {
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

/* Sections */
.splash-section {
  padding: 8rem 3rem;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.splash-section.alt-bg {
  background: rgba(255, 255, 255, 0.015);
  margin: 0 -3rem;
  padding: 8rem 6rem;
  max-width: none;
}

.section-header {
  text-align: center;
  margin-bottom: 5rem;
}

.section-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.section-header p {
  font-size: 1.1rem;
  color: var(--text-secondary);
}

/* Features Grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.feature-card {
  background: rgba(15, 15, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 2rem;
  transition: all 0.3s;
  animation: fadeInUp 0.6s ease-out both;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 255, 136, 0.25);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.feature-icon {
  font-size: 1.75rem;
  color: #00ff88;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 12px;
}

.feature-icon .lucide-icon {
  color: #00ff88;
}

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

.feature-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  letter-spacing: -0.01em;
}

.feature-card p {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.feature-details {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.feature-details li {
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 4px 10px;
  background: rgba(0, 255, 136, 0.06);
  border: 1px solid rgba(0, 255, 136, 0.12);
  border-radius: 6px;
  line-height: 1.3;
}

/* Components Grid */
.components-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
}

.component-card {
  background: rgba(15, 15, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  transition: all 0.3s;
}

.component-card:hover {
  border-color: rgba(0, 255, 136, 0.25);
  transform: scale(1.02);
}

.component-icon {
  font-size: 1.5rem;
  color: #00ff88;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.component-icon .lucide-icon {
  color: #00ff88;
}

.component-info h4 {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.component-info p {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Security Section */
.security-showcase {
  display: flex;
  align-items: center;
  gap: 5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.security-visual {
  flex: 1;
  display: flex;
  justify-content: center;
}

.shield-icon {
  position: relative;
  width: 280px;
  height: 280px;
}

.shield-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0, 255, 136, 0.15);
  border-radius: 50%;
  animation: ring-pulse 3s infinite;
}

.ring-1 { inset: 20px; animation-delay: 0s; }
.ring-2 { inset: 60px; animation-delay: 0.5s; }
.ring-3 { inset: 100px; animation-delay: 1s; }

@keyframes ring-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.03); }
}

.shield-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 255, 136, 0.05));
  border: 1px solid rgba(0, 255, 136, 0.4);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.security-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.security-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.security-icon {
  width: 32px;
  height: 32px;
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.security-icon .lucide-icon {
  color: #00ff88;
}

.security-content h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.security-content p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Pricing */
.pricing-showcase {
  display: flex;
  justify-content: center;
  max-width: 450px;
  margin: 0 auto;
}

.pricing-card {
  background: linear-gradient(180deg, rgba(25, 25, 35, 0.95) 0%, rgba(15, 15, 22, 0.95) 100%);
  border: 1px solid rgba(0, 255, 136, 0.25);
  border-radius: 2px;
  padding: 2.5rem;
  text-align: center;
  position: relative;
  width: 100%;
}

.pricing-card.featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00ff88, transparent);
}

.pricing-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #0a0a0f;
  border: 1px solid #00ff88;
  color: #00ff88;
  padding: 0.3rem 1rem;
  border-radius: 2px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pricing-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}

.pricing-price {
  margin-bottom: 1.5rem;
}

.price-amount {
  font-size: 3.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #fff, #00ff88);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.price-period {
  display: block;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  text-align: left;
}

.pricing-features li {
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.9rem;
  color: var(--text-primary);
}

.pricing-features li::before {
  content: '✓';
  color: #00ff88;
  margin-right: 0.75rem;
  font-size: 0.8rem;
}

.pricing-note {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Tech Stack */
.tech-stack {
  display: flex;
  justify-content: center;
  gap: 5rem;
}

.tech-category h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #00ff88;
  margin-bottom: 1rem;
}

.tech-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tech-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.4rem 0.85rem;
  border-radius: 2px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* CTA Section */
.splash-cta {
  padding: 8rem 3rem;
  text-align: center;
  position: relative;
  z-index: 1;
}

.splash-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 255, 136, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.cta-content h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.cta-content p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* Footer */
.splash-footer {
  background: rgba(8, 8, 12, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding: 4rem 3rem 2rem;
  position: relative;
  z-index: 1;
}

.footer-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 3rem;
}

.footer-brand {
  max-width: 280px;
}

.footer-logo {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #00ff88, #00cc6a);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  margin-right: 0.5rem;
  vertical-align: middle;
}

.footer-brand-text {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text-on-accent);
}

.footer-brand p {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.footer-links {
  display: flex;
  gap: 5rem;
}

.footer-column h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.footer-column a {
  display: block;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.35rem 0;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.footer-column a:hover {
  color: #00ff88;
}

.footer-bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
}

.footer-bottom p {
  margin: 0;
}

.visitor-counter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(0, 255, 136, 0.05);
  border: 1px solid rgba(0, 255, 136, 0.15);
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  animation: counterPulse 2s ease-in-out infinite;
}

.visitor-counter svg {
  color: #00ff88;
  flex-shrink: 0;
}

.visitor-counter strong {
  color: #00ff88;
  font-weight: 600;
}

@keyframes counterPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 136, 0);
  }
  50% {
    box-shadow: 0 0 12px 2px rgba(0, 255, 136, 0.15);
  }
}

/* Responsive */
@media (max-width: 1200px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .components-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .splash-hero {
    flex-direction: column;
    text-align: center;
    padding-top: 6rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  .hero-content {
    max-width: 100%;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-stats {
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
  }
  
  .hero-actions {
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
  }
  
  .hero-actions .btn {
    width: 100%;
    max-width: 300px;
  }
  
  .hero-visual {
    display: none;
  }
  
  .security-showcase {
    flex-direction: column;
    gap: 3rem;
  }
  
  .tech-stack {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  
  .nav-links {
    display: none;
  }
  
  .nav-container {
    padding: 0 1.5rem;
  }
  
  .splash-section {
    padding: 5rem 1.5rem;
  }
  
  .splash-section.alt-bg {
    padding: 5rem 1.5rem;
  }
  
  .footer-content {
    flex-direction: column;
    gap: 2rem;
  }
  
  .footer-links {
    flex-direction: column;
    gap: 2rem;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .visitor-counter {
    font-size: 0.8rem;
    padding: 6px 12px;
  }
}

@media (max-width: 600px) {
  .features-grid,
  .components-grid {
    grid-template-columns: 1fr;
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .title-line {
    font-size: 1rem;
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  .hero-stats {
    gap: 1.5rem;
    padding: 1rem 0;
  }
  
  .stat-item {
    min-width: 80px;
  }
  
  .stat-value {
    font-size: 1.5rem;
  }
  
  .section-header h2 {
    font-size: 1.5rem;
  }
  
  .section-header p {
    font-size: 1rem;
  }
  
  .splash-section {
    padding: 4rem 1.25rem;
  }
  
  .splash-section.alt-bg {
    padding: 4rem 1.25rem;
    margin: 0 -1.25rem;
  }
  
  .pricing-showcase {
    padding: 0 1rem;
  }
  
  .cta-content h2 {
    font-size: 1.75rem;
  }
  
  .cta-actions {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  .cta-actions .btn {
    width: 100%;
    max-width: 280px;
  }
  
  .feature-card {
    padding: 1.25rem;
  }
  
  .feature-card h3 {
    font-size: 1rem;
  }
  
  .feature-details {
    display: none;
  }
  
  .feature-card:hover .feature-details {
    display: block;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  
  .component-card {
    padding: 1rem;
  }
  
  .pricing-card {
    padding: 2rem 1.5rem;
  }
  
  .price-amount {
    font-size: 2.5rem;
  }
  
  .pricing-features li {
    font-size: 0.85rem;
    padding: 0.5rem 0;
  }
  
  .btn-large {
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
  }
  
  .splash-footer {
    padding: 3rem 1.25rem 1.5rem;
  }
  
  .splash-cta {
    padding: 5rem 1.25rem;
  }
}

@media (max-width: 380px) {
  .hero-title {
    font-size: 1.75rem;
  }
  
  .stat-item {
    min-width: 70px;
  }
  
  .stat-value {
    font-size: 1.25rem;
  }
  
  .stat-label {
    font-size: 0.65rem;
  }
}

/* Mobile menu button for nav */
@media (max-width: 900px) {
  .nav-container {
    position: relative;
  }
  
  .nav-actions {
    margin-left: auto;
  }
  
  .nav-actions .btn-login {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }
}

/* Touch optimizations */
@media (hover: none) and (pointer: coarse) {
  .btn:hover {
    transform: none;
  }
  
  .feature-card:hover {
    transform: none;
  }
  
  .component-card:hover {
    transform: none;
  }
  
  .feature-card:active {
    border-color: rgba(0, 255, 136, 0.25);
  }
  
  .component-card:active {
    border-color: rgba(0, 255, 136, 0.25);
  }
}

/* Prevent text selection on buttons and nav */
@media (max-width: 900px) {
  .nav-links a,
  .btn,
  .feature-card h3,
  .feature-card p,
  .component-card {
    user-select: none;
    -webkit-user-select: none;
  }
}

/* Better scrolling on iOS */
@supports (-webkit-overflow-scrolling: touch) {
  .splash-page {
    -webkit-overflow-scrolling: touch;
  }
  
  .features-grid,
  .components-grid {
    -webkit-overflow-scrolling: touch;
  }
}
.contact-page {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.contact-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.contact-bg .bg-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(0, 255, 136, 0.15) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 50%, rgba(0, 255, 136, 0.08) 0%, transparent 40%),
              radial-gradient(ellipse at 20% 80%, rgba(0, 200, 100, 0.08) 0%, transparent 40%);
}

.contact-bg .bg-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(0, 255, 136, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 136, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}

.contact-nav {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 3rem;
  background: rgba(10, 10, 15, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
}

.contact-nav .nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.contact-nav .logo-mark {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.contact-nav .logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.1em;
}

.contact-nav .back-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
}

.contact-nav .back-link:hover {
  color: var(--accent-primary);
}

.contact-container {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.contact-header {
  text-align: center;
  margin-bottom: 3rem;
}

.contact-header h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--text-primary), var(--accent-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.contact-header p {
  color: var(--text-secondary);
  font-size: 1.125rem;
}

.contact-content {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.info-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: all 0.2s;
}

.info-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}

.info-icon {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--accent-primary);
}

.info-card h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.info-card p {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.info-link {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--accent-primary);
  font-size: 0.875rem;
  text-decoration: none;
}

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

.contact-form {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 2rem;
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.contact-form .form-group {
  margin-bottom: 1.25rem;
}

.contact-form label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.875rem;
  transition: all 0.2s;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form select {
  cursor: pointer;
}

.success-message {
  text-align: center;
  padding: 2rem;
}

.success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem;
  background: var(--accent-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--bg-primary);
}

.success-message h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.success-message p {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.contact-faq {
  margin-top: 4rem;
}

.contact-faq h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.faq-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.faq-item h4 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--accent-primary);
}

.faq-item p {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.contact-footer {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  border-top: 1px solid var(--border-color);
  margin-top: 4rem;
}

@media (max-width: 768px) {
  .contact-nav {
    padding: 1rem 1.5rem;
  }

  .contact-container {
    padding: 2rem 1rem;
  }

  .contact-header h1 {
    font-size: 2rem;
  }

  .contact-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .contact-info {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .info-card {
    flex: 1;
    min-width: 200px;
  }

  .contact-form .form-row {
    grid-template-columns: 1fr;
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }
}
.legal-page {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.legal-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.legal-bg .bg-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(0, 255, 136, 0.15) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 50%, rgba(0, 255, 136, 0.08) 0%, transparent 40%),
              radial-gradient(ellipse at 20% 80%, rgba(0, 200, 100, 0.08) 0%, transparent 40%);
}

.legal-bg .bg-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(0, 255, 136, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 136, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}

.legal-nav {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 3rem;
  background: rgba(10, 10, 15, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
}

.legal-nav .nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.legal-nav .logo-mark {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--accent-primary) 0%, #00cc6a 100%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.legal-nav .logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--accent-primary);
}

.legal-nav .nav-right {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.legal-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.legal-nav a:hover {
  color: var(--accent-primary);
}

.legal-nav .back-link {
  color: var(--accent-primary);
}

.terms-container {
  display: flex;
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
  gap: 2rem;
}

.terms-sidebar {
  position: sticky;
  top: 100px;
  width: 280px;
  height: fit-content;
  max-height: calc(100vh - 120px);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
  flex-shrink: 0;
  overflow-y: auto;
}

.sidebar-header h3 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sidebar-search {
  margin-bottom: 1rem;
}

.sidebar-search input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.875rem;
}

.sidebar-search input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav li {
  margin-bottom: 0.25rem;
}

.sidebar-nav button {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}

.sidebar-nav button:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.sidebar-nav button.active {
  background: rgba(0, 255, 136, 0.1);
  color: var(--accent-primary);
}

.terms-content {
  flex: 1;
  min-width: 0;
  padding-bottom: 4rem;
}

.terms-header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-color);
}

.terms-header h1 {
  font-size: 2.5rem;
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
}

.terms-header .last-updated {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

.terms-intro {
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1.7;
}

.terms-section {
  margin-bottom: 3rem;
  scroll-margin-top: 100px;
}

.terms-section h2 {
  font-size: 1.5rem;
  color: var(--accent-primary);
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.terms-section h3 {
  font-size: 1.1rem;
  color: var(--text-primary);
  margin: 1.5rem 0 0.75rem 0;
}

.terms-section p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.terms-section ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.terms-section ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.terms-section ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 6px;
  height: 6px;
  background: var(--accent-primary);
  border-radius: 50%;
}

.terms-section strong {
  color: var(--text-primary);
}

.terms-footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

.terms-footer p {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.contact-list {
  list-style: none;
  padding: 0;
}

.contact-list li {
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

.contact-list strong {
  color: var(--accent-primary);
}

@media (max-width: 1024px) {
  .terms-container {
    flex-direction: column;
  }
  
  .terms-sidebar {
    position: static;
    width: 100%;
    max-height: none;
  }
  
  .sidebar-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .sidebar-nav li {
    margin: 0;
  }
  
  .sidebar-nav button {
    padding: 0.5rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 768px) {
  .terms-container {
    padding: 1rem;
  }
  
  .terms-header h1 {
    font-size: 1.75rem;
  }
  
  .terms-section h2 {
    font-size: 1.25rem;
  }
  
  .legal-nav {
    padding: 1rem;
    flex-direction: column;
    gap: 1rem;
  }
  
  .legal-nav .nav-right {
    width: 100%;
    justify-content: space-between;
  }
}
.notfound-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: #0a0a0f;
}

.notfound-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.notfound-bg .bg-gradient {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 20% 20%, rgba(0, 255, 136, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 255, 136, 0.05) 0%, transparent 70%);
}

.notfound-bg .bg-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(0, 255, 136, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 136, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
}

.bg-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--accent-primary, #00ff88);
  border-radius: 50%;
  opacity: 0.4;
  animation: float-particle linear infinite;
}

@keyframes float-particle {
  0%, 100% { 
    transform: translateY(0) scale(1);
    opacity: 0.4;
  }
  50% { 
    transform: translateY(-20px) scale(1.5);
    opacity: 0.8;
  }
}

.notfound-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 600px;
  padding: 2rem;
}

.notfound-visual {
  position: relative;
  margin-bottom: 1.5rem;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-code-container {
  position: relative;
  transition: transform 0.1s ease-out;
}

.error-code {
  font-size: 10rem;
  font-weight: 900;
  line-height: 1;
  font-family: 'Courier New', monospace;
  color: var(--accent-primary, #00ff88);
  text-shadow: 
    0 0 20px rgba(0, 255, 136, 0.5),
    0 0 40px rgba(0, 255, 136, 0.3),
    0 0 60px rgba(0, 255, 136, 0.2);
  letter-spacing: 0.1em;
}

.error-code.glitch-1 {
  position: relative;
  z-index: 1;
}

.error-code.glitch-2,
.error-code.glitch-3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0.8;
}

.error-code.glitch-2 {
  color: #ff0080;
  animation: glitch-2 2s infinite linear alternate-reverse;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}

.error-code.glitch-3 {
  color: #00ffff;
  animation: glitch-3 3s infinite linear alternate-reverse;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}

@keyframes glitch-2 {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, 1px); }
  80% { transform: translate(2px, -1px); }
}

@keyframes glitch-3 {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(2px, -1px); }
  50% { transform: translate(-2px, 1px); }
  75% { transform: translate(1px, -2px); }
}

.scan-line {
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.3), transparent);
  animation: scan 4s linear infinite;
}

@keyframes scan {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.notfound-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.vertex-icon {
  width: 60px;
  height: 60px;
  color: var(--accent-primary, #00ff88);
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { 
    filter: drop-shadow(0 0 5px currentColor);
    transform: scale(1);
  }
  50% { 
    filter: drop-shadow(0 0 15px currentColor);
    transform: scale(1.05);
  }
}

.vertex-logo {
  width: 100%;
  height: 100%;
}

.notfound-content h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, #fff 0%, var(--accent-primary, #00ff88) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.05em;
}

.notfound-message {
  color: var(--text-secondary, #888);
  margin-bottom: 2rem;
  font-size: 1rem;
  line-height: 1.6;
}

.path-display {
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.2);
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  color: var(--accent-primary, #00ff88);
  font-size: 0.9rem;
}

.notfound-info {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.info-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  min-width: 180px;
}

.info-icon {
  font-size: 1.5rem;
}

.info-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.info-text strong {
  color: var(--text-primary, #fff);
  font-size: 0.85rem;
}

.info-text span {
  color: var(--text-muted, #666);
  font-size: 0.75rem;
}

.notfound-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.notfound-actions .btn-large {
  padding: 1rem 1.5rem;
  font-size: 0.95rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-icon {
  font-size: 1.1rem;
}

.notfound-actions .btn-primary {
  background: linear-gradient(135deg, var(--accent-primary, #00ff88), #00cc6a);
  color: #0a0a0f;
  border: none;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(0, 255, 136, 0.3);
  transition: all 0.3s ease;
}

.notfound-actions .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(0, 255, 136, 0.4);
}

.notfound-actions .btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary, #fff);
  transition: all 0.3s ease;
}

.notfound-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.notfound-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.notfound-links a {
  color: var(--text-muted, #666);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
}

.notfound-links a:hover {
  color: var(--accent-primary, #00ff88);
}

.link-divider {
  color: rgba(255, 255, 255, 0.2);
}

.notfound-decoration {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.deco-line {
  position: absolute;
  width: 1px;
  height: 150px;
  background: linear-gradient(to bottom, transparent, var(--accent-primary, #00ff88), transparent);
  opacity: 0.15;
}

.line-1 {
  left: 15%;
  top: 5%;
  transform: rotate(15deg);
}

.line-2 {
  right: 20%;
  bottom: 10%;
  transform: rotate(-25deg);
}

.line-3 {
  left: 30%;
  bottom: 30%;
  transform: rotate(45deg);
  opacity: 0.1;
}

.deco-circle {
  position: absolute;
  border: 1px solid var(--accent-primary, #00ff88);
  border-radius: 50%;
  opacity: 0.08;
}

.circle-1 {
  width: 400px;
  height: 400px;
  right: -150px;
  top: -150px;
}

.circle-2 {
  width: 250px;
  height: 250px;
  left: -80px;
  bottom: -80px;
}

.deco-ring {
  position: absolute;
  border: 1px solid rgba(0, 255, 136, 0.05);
  border-radius: 50%;
}

.ring-1 {
  width: 600px;
  height: 600px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: pulse-ring 4s ease-in-out infinite;
}

.ring-2 {
  width: 800px;
  height: 800px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: pulse-ring 4s ease-in-out infinite 1s;
}

@keyframes pulse-ring {
  0%, 100% { opacity: 0.05; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.1; transform: translate(-50%, -50%) scale(1.02); }
}

.notfound-footer {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.3;
}

.footer-text {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--accent-primary, #00ff88);
}

.footer-version {
  font-size: 0.7rem;
  color: var(--text-muted, #666);
  font-family: 'Courier New', monospace;
}

@media (max-width: 640px) {
  .error-code {
    font-size: 6rem;
  }

  .notfound-visual {
    height: 120px;
  }

  .notfound-content h1 {
    font-size: 1.75rem;
  }

  .notfound-info {
    flex-direction: column;
    align-items: center;
  }

  .info-box {
    width: 100%;
    max-width: 250px;
  }

  .notfound-actions {
    flex-direction: column;
    align-items: center;
  }

  .notfound-actions .btn-large {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  .notfound-links {
    flex-direction: column;
    gap: 0.5rem;
  }

  .link-divider {
    display: none;
  }
}
.legal-page .about-hero {
  text-align: center;
  margin-bottom: 3rem;
  padding: 2rem 0;
}

.legal-page .about-hero h2 {
  font-size: 1.25rem;
  color: var(--accent-primary);
  margin-bottom: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.legal-page .about-hero h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--text-primary), var(--accent-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.legal-page .about-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.legal-page .about-stat {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
}

.legal-page .about-stat .stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-primary);
  margin-bottom: 0.25rem;
}

.legal-page .about-stat .stat-label {
  color: var(--text-secondary);
  font-size: 0.875rem;
}
.status-container {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
}

.status-header {
  text-align: center;
  margin-bottom: 3rem;
}

.status-header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.status-overall {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.status-badge-large {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
}

.status-badge-large.operational {
  background: rgba(0, 255, 136, 0.1);
  border: 2px solid rgba(0, 255, 136, 0.4);
  color: #00ff88;
}

.status-badge-large.degraded {
  background: rgba(255, 193, 7, 0.1);
  border: 2px solid rgba(255, 193, 7, 0.4);
  color: #ffc107;
}

.status-badge-large.down {
  background: rgba(255, 82, 82, 0.1);
  border: 2px solid rgba(255, 82, 82, 0.4);
  color: #ff5252;
}

.status-pulse {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: status-pulse-anim 2s ease-in-out infinite;
}

.operational .status-pulse { background: #00ff88; }
.degraded .status-pulse { background: #ffc107; }
.down .status-pulse { background: #ff5252; }

@keyframes status-pulse-anim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.status-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}

.status-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  transition: all 0.2s;
}

.status-card:hover {
  border-color: var(--border-hover);
}

.status-card.operational .status-indicator {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
  flex-shrink: 0;
  animation: status-dot-glow 3s ease-in-out infinite;
}

.status-card.degraded .status-indicator {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffc107;
  box-shadow: 0 0 8px rgba(255, 193, 7, 0.5);
  flex-shrink: 0;
  animation: status-dot-glow 2s ease-in-out infinite;
}

.status-card.down .status-indicator {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ff5252;
  box-shadow: 0 0 8px rgba(255, 82, 82, 0.5);
  flex-shrink: 0;
  animation: status-dot-glow 1s ease-in-out infinite;
}

.status-card.unknown .status-indicator {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #666;
  flex-shrink: 0;
}

@keyframes status-dot-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(0, 255, 136, 0.3); }
  50% { box-shadow: 0 0 16px rgba(0, 255, 136, 0.6); }
}

.status-info h3 {
  font-size: 1rem;
  color: var(--text-primary);
  margin: 0;
}

.status-info p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
}

.status-timestamp {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

.status-loading {
  text-align: center;
  color: var(--text-secondary);
  padding: 2rem;
  grid-column: 1 / -1;
}

.status-note {
  text-align: center;
  margin: 2rem 0;
}

.status-note p {
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.status-note a {
  color: var(--accent-primary);
  text-decoration: none;
}

.status-note a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .status-container {
    padding: 1rem;
  }

  .status-header h1 {
    font-size: 1.75rem;
  }
}
.downloads-container {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem;
}

.downloads-header {
  text-align: center;
  margin-bottom: 3rem;
}

.downloads-header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.downloads-intro {
  color: var(--text-secondary);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

.downloads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.download-card {
  position: relative;
  padding: 2rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.download-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  border-color: var(--border-hover);
}

.download-card.featured {
  border-color: rgba(0, 255, 136, 0.3);
  box-shadow: 0 0 30px rgba(0, 255, 136, 0.05);
}

.download-card.featured:hover {
  border-color: rgba(0, 255, 136, 0.5);
  box-shadow: 0 12px 40px rgba(0, 0, 136, 0.15), 0 0 30px rgba(0, 255, 136, 0.1);
}

.download-card-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent-primary), #00cc6a);
  color: var(--text-on-accent);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 16px;
  border-radius: 20px;
}

.download-card-icon {
  margin-bottom: 1rem;
}

.download-card h3 {
  font-size: 1.4rem;
  color: var(--text-primary);
  margin: 0 0 0.25rem;
}

.download-version {
  color: var(--accent-primary);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.download-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 1rem;
}

.download-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  text-align: left;
}

.download-features li {
  color: var(--text-secondary);
  font-size: 0.85rem;
  padding: 0.25rem 0;
  padding-left: 1.25rem;
  position: relative;
}

.download-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent-primary);
  font-weight: 700;
}

.download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--accent-primary), #00cc6a);
  color: var(--text-on-accent);
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}

.download-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 255, 136, 0.3);
}

.download-btn-secondary {
  background: linear-gradient(135deg, #5865f2, #4752c4);
  color: var(--text-primary);
}

.download-btn-secondary:hover {
  box-shadow: 0 4px 20px rgba(88, 101, 242, 0.3);
}

.download-btn-outline {
  background: transparent;
  color: var(--accent-secondary);
  border: 2px solid var(--accent-secondary);
}

.download-btn-outline:hover {
  background: rgba(244, 127, 255, 0.1);
  box-shadow: 0 4px 20px rgba(244, 127, 255, 0.2);
}

.download-size {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 0.75rem 0 0;
}

.download-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0.75rem;
  padding: 6px 14px;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.15);
  border-radius: 20px;
  color: var(--accent-primary);
  font-size: 0.8rem;
  font-weight: 600;
}

.download-cli-hint {
  margin-top: 0.5rem;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}

.download-cli-hint code {
  color: var(--accent-primary);
  font-size: 0.8rem;
}

.downloads-system-reqs {
  margin-bottom: 2rem;
}

.downloads-system-reqs h2 {
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  text-align: center;
}

.reqs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.req-item {
  padding: 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.req-item h4 {
  color: var(--text-primary);
  font-size: 1rem;
  margin: 0 0 0.75rem;
}

.req-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.req-item li {
  color: var(--text-secondary);
  font-size: 0.85rem;
  padding: 0.2rem 0;
  padding-left: 1.25rem;
  position: relative;
}

.req-item li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .downloads-container {
    padding: 1rem;
  }

  .downloads-header h1 {
    font-size: 1.75rem;
  }

  .downloads-grid {
    grid-template-columns: 1fr;
  }
}
.avatar-wrapper {
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg-tertiary);
  cursor: default;
  transition: transform 0.2s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.avatar-wrapper.clickable {
  cursor: pointer;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  image-rendering: auto;
}

.avatar-initial {
  font-size: 40%;
  font-weight: 600;
  color: var(--text-muted);
}

/* Hover-triggered avatar effects */
/* Rainbow */
.avatar-wrapper[data-effect="rainbow"]:hover {
  animation: rainbow 3s linear infinite !important;
}

/* RGB & Color Cycling */
.avatar-wrapper[data-effect="rgb-flow"]:hover {
  animation: rgbFlow 2s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="rgb-spin"]:hover {
  animation: rgbSpin 3s linear infinite !important;
}

.avatar-wrapper[data-effect="prism"]:hover {
  animation: prism 4s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="spectrum"]:hover {
  animation: spectrum 5s linear infinite !important;
}

.avatar-wrapper[data-effect="neon-pulse"]:hover {
  animation: neonPulse 2s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="cyber-rainbow"]:hover {
  animation: cyberRainbow 3s linear infinite !important;
}

/* Movement & Spin */
.avatar-wrapper[data-effect="spin"]:hover {
  animation: spin 4s linear infinite !important;
}

.avatar-wrapper[data-effect="spin-reverse"]:hover {
  animation: spinReverse 4s linear infinite !important;
}

.avatar-wrapper[data-effect="bounce"]:hover {
  animation: bounce 1s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="wobble"]:hover {
  animation: wobble 1s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="tada"]:hover {
  animation: tada 2s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="swing"]:hover {
  animation: swing 2s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="twist"]:hover {
  animation: twist 3s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="jelly"]:hover {
  animation: jelly 1.5s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="shake"]:hover {
  animation: shake 0.5s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="dance"]:hover {
  animation: dance 1s ease-in-out infinite !important;
}

/* Pulse & Glow */
.avatar-wrapper[data-effect="subtle-glow"]:hover {
  animation: softGlow 3s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="neon-glow"]:hover {
  animation: neonGlow 1.5s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="border-pulse"]:hover {
  animation: borderPulse 2s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="heartbeat"]:hover {
  animation: heartbeat 1.5s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="flash"]:hover {
  animation: flash 0.8s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="zoom-pulse"]:hover {
  animation: zoomPulse 1.2s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="breath-glow"]:hover {
  animation: breathGlow 3s ease-in-out infinite !important;
}

/* Advanced Effects */
.avatar-wrapper[data-effect="wave"]:hover {
  animation: wave 2s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="orbit"]:hover {
  animation: orbit 4s linear infinite !important;
}

.avatar-wrapper[data-effect="glitch"]:hover {
  animation: glitch 0.3s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="matrix"]:hover {
  animation: matrix 2s linear infinite !important;
}

.avatar-wrapper[data-effect="aurora"]:hover {
  animation: aurora 5s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="vortex"]:hover {
  animation: vortex 2s linear infinite !important;
}

.avatar-wrapper[data-effect="fire"]:hover {
  animation: fire 1s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="ice"]:hover {
  animation: ice 3s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="electric"]:hover {
  animation: electric 0.5s ease-in-out infinite !important;
}

.avatar-wrapper[data-effect="hologram"]:hover {
  animation: hologram 2s ease-in-out infinite !important;
}

/* Gentle Breathe - always subtle */
.avatar-wrapper[data-effect="gentle-breathe"]:hover {
  animation: breathe 3s ease-in-out infinite !important;
}

/* Soft Float - always subtle */
.avatar-wrapper[data-effect="soft-float"]:hover {
  animation: float 4s ease-in-out infinite !important;
}

/* Avatar Effects */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spinReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes rgbFlow {
  0%, 100% { filter: hue-rotate(0deg) saturate(1.5) brightness(1.1); }
  25% { filter: hue-rotate(90deg) saturate(1.5) brightness(1.2); }
  50% { filter: hue-rotate(180deg) saturate(1.5) brightness(1.1); }
  75% { filter: hue-rotate(270deg) saturate(1.5) brightness(1.2); }
}

@keyframes rgbSpin {
  from { transform: rotate(0deg); filter: hue-rotate(0deg); }
  to { transform: rotate(360deg); filter: hue-rotate(360deg); }
}

@keyframes prism {
  0%, 100% { filter: hue-rotate(0deg) brightness(1); }
  16% { filter: hue-rotate(60deg) brightness(1.2); }
  33% { filter: hue-rotate(120deg) brightness(1.1); }
  50% { filter: hue-rotate(180deg) brightness(1.2); }
  66% { filter: hue-rotate(240deg) brightness(1.1); }
  83% { filter: hue-rotate(300deg) brightness(1.2); }
}

@keyframes spectrum {
  0% { filter: hue-rotate(0deg) saturate(2) brightness(1.1); box-shadow: 0 0 30px rgba(255,0,0,0.5); }
  14% { filter: hue-rotate(51deg) saturate(2) brightness(1.1); box-shadow: 0 0 30px rgba(255,128,0,0.5); }
  28% { filter: hue-rotate(102deg) saturate(2) brightness(1.1); box-shadow: 0 0 30px rgba(255,255,0,0.5); }
  42% { filter: hue-rotate(153deg) saturate(2) brightness(1.1); box-shadow: 0 0 30px rgba(0,255,0,0.5); }
  57% { filter: hue-rotate(204deg) saturate(2) brightness(1.1); box-shadow: 0 0 30px rgba(0,255,255,0.5); }
  71% { filter: hue-rotate(255deg) saturate(2) brightness(1.1); box-shadow: 0 0 30px rgba(128,0,255,0.5); }
  85% { filter: hue-rotate(306deg) saturate(2) brightness(1.1); box-shadow: 0 0 30px rgba(255,0,255,0.5); }
  100% { filter: hue-rotate(360deg) saturate(2) brightness(1.1); box-shadow: 0 0 30px rgba(255,0,0,0.5); }
}

@keyframes neonPulse {
  0%, 100% { 
    filter: drop-shadow(0 0 5px #ff0080) drop-shadow(0 0 10px #ff0080);
    transform: scale(1);
  }
  50% { 
    filter: drop-shadow(0 0 15px #00ffff) drop-shadow(0 0 30px #00ffff);
    transform: scale(1.02);
  }
}

@keyframes cyberRainbow {
  0% { 
    filter: hue-rotate(0deg) contrast(1.2) brightness(1.1);
    box-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000;
  }
  20% { 
    filter: hue-rotate(72deg) contrast(1.2) brightness(1.1);
    box-shadow: 0 0 20px #ffff00, 0 0 40px #ffff00;
  }
  40% { 
    filter: hue-rotate(144deg) contrast(1.2) brightness(1.1);
    box-shadow: 0 0 20px #00ff00, 0 0 40px #00ff00;
  }
  60% { 
    filter: hue-rotate(216deg) contrast(1.2) brightness(1.1);
    box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff;
  }
  80% { 
    filter: hue-rotate(288deg) contrast(1.2) brightness(1.1);
    box-shadow: 0 0 20px #0000ff, 0 0 40px #0000ff;
  }
  100% { 
    filter: hue-rotate(360deg) contrast(1.2) brightness(1.1);
    box-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000;
  }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes wobble {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  15% { transform: translateX(-5px) rotate(-5deg); }
  30% { transform: translateX(5px) rotate(3deg); }
  45% { transform: translateX(-3px) rotate(-3deg); }
  60% { transform: translateX(3px) rotate(2deg); }
  75% { transform: translateX(-2px) rotate(-1deg); }
}

@keyframes tada {
  0% { transform: scale(1) rotate(0deg); }
  10%, 20% { transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes swing {
  0%, 100% { transform-origin: top center; transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  75% { transform: rotate(-15deg); }
}

@keyframes twist {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes jelly {
  0%, 100% { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes dance {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(-5deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-8px) rotate(5deg); }
}

@keyframes neonGlow {
  0%, 100% { 
    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
    filter: brightness(1);
  }
  50% { 
    box-shadow: 0 0 15px currentColor, 0 0 25px currentColor, 0 0 35px currentColor;
    filter: brightness(1.3);
  }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  10% { transform: scale(1.15); }
  20% { transform: scale(1); }
  30% { transform: scale(1.1); }
  40% { transform: scale(1); }
}

@keyframes flash {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50% { opacity: 0.4; filter: brightness(1.5); }
}

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

@keyframes breathGlow {
  0%, 100% { 
    box-shadow: 0 0 10px var(--accent-primary), 0 0 20px var(--accent-primary);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 0 25px var(--accent-primary), 0 0 50px var(--accent-primary);
    transform: scale(1.03);
  }
}

@keyframes wave {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-15deg) scale(1.05); }
  75% { transform: rotate(15deg) scale(1.05); }
}

@keyframes orbit {
  0% { transform: rotate(0deg) translateX(3px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(3px) rotate(-360deg); }
}

@keyframes glitch {
  0%, 100% { transform: translate(0); filter: hue-rotate(0deg); }
  20% { transform: translate(-3px, 3px); filter: hue-rotate(90deg); }
  40% { transform: translate(3px, -3px); filter: hue-rotate(180deg); }
  60% { transform: translate(-3px, -3px); filter: hue-rotate(270deg); }
  80% { transform: translate(3px, 3px); filter: hue-rotate(360deg); }
}

@keyframes matrix {
  0%, 100% { filter: brightness(1) contrast(1); }
  50% { filter: brightness(1.3) contrast(1.5); }
}

@keyframes aurora {
  0%, 100% { 
    filter: hue-rotate(0deg) saturate(1.3) brightness(1.1);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3), inset 0 0 20px rgba(0, 255, 136, 0.1);
  }
  33% { 
    filter: hue-rotate(120deg) saturate(1.3) brightness(1.1);
    box-shadow: 0 0 20px rgba(0, 136, 255, 0.3), inset 0 0 20px rgba(0, 136, 255, 0.1);
  }
  66% { 
    filter: hue-rotate(240deg) saturate(1.3) brightness(1.1);
    box-shadow: 0 0 20px rgba(255, 0, 136, 0.3), inset 0 0 20px rgba(255, 0, 136, 0.1);
  }
}

@keyframes vortex {
  0% { transform: rotate(0deg) scale(1); filter: blur(0px); }
  50% { transform: rotate(180deg) scale(1.1); filter: blur(1px); }
  100% { transform: rotate(360deg) scale(1); filter: blur(0px); }
}

@keyframes fire {
  0%, 100% { filter: brightness(1) saturate(1.2); box-shadow: 0 0 10px #ff6600, 0 0 20px #ff3300; }
  25% { filter: brightness(1.2) saturate(1.4); box-shadow: 0 0 15px #ff8800, 0 0 30px #ff4400; }
  50% { filter: brightness(1.1) saturate(1.3); box-shadow: 0 0 10px #ffaa00, 0 0 20px #ff6600; }
  75% { filter: brightness(1.2) saturate(1.4); box-shadow: 0 0 15px #ffcc00, 0 0 30px #ff8800; }
}

@keyframes ice {
  0%, 100% { filter: brightness(1) hue-rotate(180deg) saturate(1.2); box-shadow: 0 0 15px #00ffff, 0 0 30px #00ccff; }
  50% { filter: brightness(1.2) hue-rotate(200deg) saturate(1.4); box-shadow: 0 0 25px #88ffff, 0 0 50px #44ddff; }
}

@keyframes electric {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 5px #00ffff; }
  25% { filter: brightness(1.5); box-shadow: 0 0 20px #00ffff, 0 0 40px #00aaff; }
  50% { filter: brightness(1); box-shadow: 0 0 5px #00ffff; }
  75% { filter: brightness(1.5); box-shadow: 0 0 20px #88ffff, 0 0 40px #44aaff; }
}

@keyframes hologram {
  0%, 100% { 
    filter: brightness(1.2) contrast(1.1) saturate(0.9);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
    opacity: 1;
  }
  50% { 
    filter: brightness(1.4) contrast(1.2) saturate(1.1);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
    opacity: 0.9;
  }
}

/* Additional effect keyframes */
@keyframes softGlow {
  0%, 100% { 
    box-shadow: 0 0 5px var(--accent-primary);
    filter: brightness(1);
  }
  50% { 
    box-shadow: 0 0 15px var(--accent-primary), 0 0 25px var(--accent-primary);
    filter: brightness(1.1);
  }
}

@keyframes borderPulse {
  0%, 100% { border-color: var(--accent-primary); }
  50% { border-color: var(--accent-secondary); }
}

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

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Legacy effects for compatibility */
@keyframes rainbow {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes glow {
  0%, 100% { 
    box-shadow: 0 0 20px var(--accent-primary), 0 0 40px var(--accent-primary);
  }
  50% { 
    box-shadow: 0 0 30px var(--accent-primary), 0 0 60px var(--accent-primary);
  }
}

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

/* ===== NEW PREMIUM AVATAR EFFECTS ===== */

@keyframes galaxySpin {
  0% { transform: rotate(0deg) scale(1); filter: hue-rotate(0deg) saturate(1.2); }
  25% { transform: rotate(90deg) scale(1.05); filter: hue-rotate(90deg) saturate(1.4); }
  50% { transform: rotate(180deg) scale(1); filter: hue-rotate(180deg) saturate(1.2); }
  75% { transform: rotate(270deg) scale(1.05); filter: hue-rotate(270deg) saturate(1.4); }
  100% { transform: rotate(360deg) scale(1); filter: hue-rotate(360deg) saturate(1.2); }
}

@keyframes supernova {
  0%, 100% { transform: scale(1); filter: brightness(1) saturate(1); box-shadow: 0 0 10px #ffd700, 0 0 20px #ff8c00; }
  25% { transform: scale(1.15); filter: brightness(1.5) saturate(1.5); box-shadow: 0 0 30px #ffffff, 0 0 60px #ffd700, 0 0 90px #ff8c00; }
  50% { transform: scale(0.95); filter: brightness(1.2) saturate(1.2); box-shadow: 0 0 20px #ffa500, 0 0 40px #ff6600; }
  75% { transform: scale(1.1); filter: brightness(1.4) saturate(1.4); box-shadow: 0 0 30px #ffffff, 0 0 60px #ffd700, 0 0 90px #ff4500; }
}

@keyframes blackHole {
  0% { transform: rotate(0deg) scale(1); filter: brightness(1) saturate(0.8); }
  25% { transform: rotate(90deg) scale(0.9); filter: brightness(0.8) saturate(0.6); }
  50% { transform: rotate(180deg) scale(0.85); filter: brightness(0.6) saturate(0.4); box-shadow: 0 0 30px rgba(0,0,0,0.8); }
  75% { transform: rotate(270deg) scale(0.9); filter: brightness(0.8) saturate(0.6); }
  100% { transform: rotate(360deg) scale(1); filter: brightness(1) saturate(0.8); }
}

@keyframes timeWarp {
  0%, 100% { transform: scale(1) rotate(0deg); filter: blur(0px) brightness(1); }
  25% { transform: scaleX(0.5) scaleY(1.5) rotate(90deg); filter: blur(1px) brightness(1.3); }
  50% { transform: scaleX(1.5) scaleY(0.5) rotate(180deg); filter: blur(2px) brightness(0.7); }
  75% { transform: scaleX(0.5) scaleY(1.5) rotate(270deg); filter: blur(1px) brightness(1.3); }
}

@keyframes dimension {
  0% { transform: perspective(400px) rotateX(0deg) rotateY(0deg); }
  25% { transform: perspective(400px) rotateX(20deg) rotateY(180deg); }
  50% { transform: perspective(400px) rotateX(0deg) rotateY(360deg); }
  75% { transform: perspective(400px) rotateX(-20deg) rotateY(180deg); }
  100% { transform: perspective(400px) rotateX(0deg) rotateY(360deg); }
}

@keyframes ripple {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,255,136,0.4); }
  25% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(0,255,136,0); }
  50% { transform: scale(0.95); box-shadow: 0 0 0 5px rgba(0,255,136,0.2); }
  75% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(0,255,136,0); }
}

@keyframes liquidMetal {
  0% { filter: brightness(1) contrast(1) saturate(1); transform: scale(1) rotate(0deg); }
  25% { filter: brightness(1.3) contrast(1.2) saturate(1.1); transform: scale(1.02) rotate(-2deg); }
  50% { filter: brightness(1.1) contrast(0.9) saturate(0.9); transform: scale(0.98) rotate(0deg); }
  75% { filter: brightness(1.3) contrast(1.2) saturate(1.1); transform: scale(1.02) rotate(2deg); }
  100% { filter: brightness(1) contrast(1) saturate(1); transform: scale(1) rotate(0deg); }
}

@keyframes glass {
  0%, 100% { filter: brightness(1.1) contrast(0.9) saturate(0.8) blur(0px); opacity: 0.85; }
  50% { filter: brightness(1.3) contrast(0.8) saturate(0.6) blur(0.5px); opacity: 0.75; }
}

@keyframes crystalShineA {
  0% { filter: brightness(1) saturate(1.2); box-shadow: 0 0 5px rgba(255,255,255,0.3); }
  25% { filter: brightness(1.3) saturate(1.5); box-shadow: 0 0 15px rgba(255,255,255,0.6), 0 0 30px rgba(0,200,255,0.3); }
  50% { filter: brightness(1) saturate(1.2); box-shadow: 0 0 5px rgba(255,255,255,0.3); }
  75% { filter: brightness(1.3) saturate(1.5); box-shadow: 0 0 15px rgba(200,255,255,0.6), 0 0 30px rgba(255,0,200,0.3); }
  100% { filter: brightness(1) saturate(1.2); box-shadow: 0 0 5px rgba(255,255,255,0.3); }
}

@keyframes shadowDance {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
  20% { transform: translateY(-3px) scale(1.02); filter: brightness(0.9); }
  40% { transform: translateY(2px) scale(0.98); filter: brightness(1.1); }
  60% { transform: translateY(-2px) scale(1.01); filter: brightness(0.85); }
  80% { transform: translateY(1px) scale(0.99); filter: brightness(1.05); }
}

@keyframes auraWave {
  0%, 100% { box-shadow: 0 0 15px var(--accent-primary, #00ff88), 0 0 30px var(--accent-primary, #00ff88); filter: brightness(1); }
  25% { box-shadow: 0 0 25px var(--accent-primary, #00ff88), 0 0 50px var(--accent-primary, #00ff88), 0 0 75px transparent; filter: brightness(1.2); }
  50% { box-shadow: 0 0 15px transparent, 0 0 30px var(--accent-primary, #00ff88); filter: brightness(1); }
  75% { box-shadow: 0 0 25px var(--accent-primary, #00ff88), 0 0 50px transparent, 0 0 75px var(--accent-primary, #00ff88); filter: brightness(1.2); }
}

@keyframes morph {
  0%, 100% { border-radius: 50%; transform: scale(1) rotate(0deg); }
  25% { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; transform: scale(1.05) rotate(90deg); }
  50% { border-radius: 30% 70% 40% 60% / 50% 60% 40% 50%; transform: scale(0.95) rotate(180deg); }
  75% { border-radius: 60% 40% 50% 50% / 40% 50% 60% 50%; transform: scale(1.05) rotate(270deg); }
}

@keyframes melt {
  0%, 100% { transform: scaleY(1) scaleX(1); filter: brightness(1); }
  25% { transform: scaleY(1.1) scaleX(0.9); filter: brightness(0.9); }
  50% { transform: scaleY(0.85) scaleX(1.15); filter: brightness(1.1); }
  75% { transform: scaleY(1.1) scaleX(0.9); filter: brightness(0.9); }
}

@keyframes neonSaber {
  0% { box-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff, 0 0 20px #00ffff; filter: brightness(1); }
  50% { box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff; filter: brightness(1.3); }
  100% { box-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff, 0 0 20px #00ffff; filter: brightness(1); }
}

@keyframes quantumA {
  0% { transform: scale(1) rotate(0deg); filter: hue-rotate(0deg) brightness(1); }
  25% { transform: scale(0.5) rotate(180deg); filter: hue-rotate(180deg) brightness(1.5); }
  50% { transform: scale(1.5) rotate(360deg); filter: hue-rotate(360deg) brightness(0.8); }
  75% { transform: scale(0.5) rotate(540deg); filter: hue-rotate(180deg) brightness(1.5); }
  100% { transform: scale(1) rotate(720deg); filter: hue-rotate(0deg) brightness(1); }
}

@keyframes holographicA {
  0% { filter: brightness(1) saturate(0.8) hue-rotate(0deg); opacity: 0.9; }
  20% { filter: brightness(1.3) saturate(1.2) hue-rotate(72deg); opacity: 0.95; }
  40% { filter: brightness(0.9) saturate(0.7) hue-rotate(144deg); opacity: 0.85; }
  60% { filter: brightness(1.2) saturate(1.1) hue-rotate(216deg); opacity: 0.95; }
  80% { filter: brightness(1.4) saturate(1.3) hue-rotate(288deg); opacity: 0.9; }
  100% { filter: brightness(1) saturate(0.8) hue-rotate(360deg); opacity: 0.9; }
}

@keyframes plasma {
  0%, 100% { transform: scale(1); filter: contrast(1) saturate(1.5) brightness(1); box-shadow: 0 0 20px #ff00ff, 0 0 40px #00ffff; }
  25% { transform: scale(1.1); filter: contrast(1.3) saturate(1.8) brightness(1.2); box-shadow: 0 0 30px #ffff00, 0 0 60px #ff00ff; }
  50% { transform: scale(0.9); filter: contrast(0.8) saturate(1.2) brightness(0.9); box-shadow: 0 0 20px #00ffff, 0 0 40px #ff00ff; }
  75% { transform: scale(1.1); filter: contrast(1.3) saturate(1.8) brightness(1.2); box-shadow: 0 0 30px #ff00ff, 0 0 60px #ffff00; }
}

@keyframes voidA {
  0%, 100% { filter: brightness(0.3) saturate(0.5) blur(0px); transform: scale(1); }
  50% { filter: brightness(0.1) saturate(0.3) blur(2px); transform: scale(0.9); box-shadow: 0 0 50px rgba(0,0,0,0.9); }
}

@keyframes cosmicA {
  0% { filter: hue-rotate(0deg) brightness(1) saturate(1.2); transform: rotate(0deg) scale(1); }
  20% { filter: hue-rotate(72deg) brightness(1.3) saturate(1.5); transform: rotate(72deg) scale(1.05); }
  40% { filter: hue-rotate(144deg) brightness(0.9) saturate(1.1); transform: rotate(144deg) scale(0.95); }
  60% { filter: hue-rotate(216deg) brightness(1.2) saturate(1.4); transform: rotate(216deg) scale(1.05); }
  80% { filter: hue-rotate(288deg) brightness(1.1) saturate(1.3); transform: rotate(288deg) scale(0.95); }
  100% { filter: hue-rotate(360deg) brightness(1) saturate(1.2); transform: rotate(360deg) scale(1); }
}

@keyframes radiant {
  0%, 100% { box-shadow: 0 0 5px var(--accent-primary), 0 0 10px var(--accent-primary), 0 0 15px transparent; filter: brightness(1); }
  25% { box-shadow: 0 0 10px var(--accent-primary), 0 0 20px var(--accent-primary), 0 0 30px var(--accent-primary); filter: brightness(1.2); }
  50% { box-shadow: 0 0 5px transparent, 0 0 10px var(--accent-primary), 0 0 15px transparent; filter: brightness(0.9); }
  75% { box-shadow: 0 0 10px var(--accent-primary), 0 0 20px var(--accent-primary), 0 0 30px var(--accent-primary); filter: brightness(1.2); }
}

@keyframes rainbowGlowPulse {
  0% { box-shadow: 0 0 30px #ff0000; }
  16% { box-shadow: 0 0 30px #ff7f00; }
  33% { box-shadow: 0 0 30px #ffff00; }
  50% { box-shadow: 0 0 30px #00ff00; }
  66% { box-shadow: 0 0 30px #0000ff; }
  83% { box-shadow: 0 0 30px #8b00ff; }
  100% { box-shadow: 0 0 30px #ff0000; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px currentColor; }
  50% { box-shadow: 0 0 40px currentColor, 0 0 60px currentColor; }
}

.avatar-wrapper[data-effect="galaxy-spin"]:hover {
  animation: galaxySpin 6s linear infinite !important;
}
.avatar-wrapper[data-effect="supernova"]:hover {
  animation: supernova 2s ease-in-out infinite !important;
}
.avatar-wrapper[data-effect="black-hole"]:hover {
  animation: blackHole 4s linear infinite !important;
}
.avatar-wrapper[data-effect="time-warp"]:hover {
  animation: timeWarp 3s ease-in-out infinite !important;
}
.avatar-wrapper[data-effect="dimension"]:hover {
  animation: dimension 5s linear infinite !important;
}
.avatar-wrapper[data-effect="ripple"]:hover {
  animation: ripple 2s ease-in-out infinite !important;
}
.avatar-wrapper[data-effect="liquid-metal"]:hover {
  animation: liquidMetal 3s ease-in-out infinite !important;
}
.avatar-wrapper[data-effect="glass"]:hover {
  animation: glass 4s ease-in-out infinite !important;
}
.avatar-wrapper[data-effect="crystal-shine"]:hover {
  animation: crystalShineA 3s ease-in-out infinite !important;
}
.avatar-wrapper[data-effect="shadow-dance"]:hover {
  animation: shadowDance 2s ease-in-out infinite !important;
}
.avatar-wrapper[data-effect="aura-wave"]:hover {
  animation: auraWave 3s ease-in-out infinite !important;
}
.avatar-wrapper[data-effect="morph"]:hover {
  animation: morph 4s ease-in-out infinite !important;
}
.avatar-wrapper[data-effect="melt"]:hover {
  animation: melt 3s ease-in-out infinite !important;
}
.avatar-wrapper[data-effect="neon-saber"]:hover {
  animation: neonSaber 1.5s ease-in-out infinite !important;
}
.avatar-wrapper[data-effect="quantum"]:hover {
  animation: quantumA 2s linear infinite !important;
}
.avatar-wrapper[data-effect="holographic"]:hover {
  animation: holographicA 3s ease-in-out infinite !important;
}
.avatar-wrapper[data-effect="plasma"]:hover {
  animation: plasma 2s ease-in-out infinite !important;
}
.avatar-wrapper[data-effect="void"]:hover {
  animation: voidA 5s ease-in-out infinite !important;
}
.avatar-wrapper[data-effect="cosmic"]:hover {
  animation: cosmicA 6s linear infinite !important;
}
.avatar-wrapper[data-effect="radiant"]:hover {
  animation: radiant 2s ease-in-out infinite !important;
}

.avatar-wrapper.has-effect {
  cursor: pointer;
}

.avatar-wrapper.has-effect:not(:hover) {
  animation: none !important;
}

@keyframes tagRainbow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes tagShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes tagFire {
  0%, 100% { color: #ff4400; }
  25% { color: #ff8800; }
  50% { color: #ffaa00; }
  75% { color: #ff6600; }
}

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

@keyframes tagGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.4); }
}
.ap {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 12px 14px;
  min-height: 64px;
  position: relative;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  transition: border-color 0.2s;
}

.ap:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.ap.ap-compact {
  padding: 8px 12px;
  min-height: 52px;
  gap: 10px;
  border-radius: 14px;
}

.ap.ap-compact .ap-body {
  gap: 4px;
}

.ap.ap-compact .ap-waveform {
  height: 28px;
  gap: 1.5px;
}

.ap.ap-compact .ap-wave-bar {
  width: 2.5px;
  border-radius: 1.5px;
}

.ap.ap-compact .ap-controls {
  gap: 2px;
}

.ap.ap-compact .ap-ctrl-btn {
  width: 26px;
  height: 26px;
}

.ap.ap-compact .ap-ctrl-btn svg {
  width: 14px;
  height: 14px;
}

.ap.ap-compact .ap-progress-row {
  display: none;
}

.ap-loading {
  pointer-events: none;
}

.ap-loader-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 18px;
  z-index: 5;
}

.ap-loader-ring {
  width: 24px;
  height: 24px;
  border: 2.5px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent-primary, #5865f2);
  border-radius: 50%;
  animation: ap-spin 0.8s linear infinite;
}

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

.ap-error {
  color: var(--text-danger, #ef4444);
  font-size: 13px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ap-play-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  outline: none;
}

.ap-play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary, #5865f2), color-mix(in srgb, var(--accent-primary, #5865f2) 58%, white));
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
  box-shadow: 0 4px 16px rgba(88, 101, 242, 0.3);
  color: var(--text-primary);
}

.ap-play-btn:hover .ap-play-icon {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(88, 101, 242, 0.4);
}

.ap-play-btn:active .ap-play-icon {
  transform: scale(0.96);
}

.ap-bars {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 18px;
}

.ap-bars span {
  width: 3px;
  background: #fff;
  border-radius: 2px;
  animation: ap-bar 0.5s ease-in-out infinite alternate;
}

.ap-bars span:nth-child(1) { height: 55%; animation-delay: 0s; }
.ap-bars span:nth-child(2) { height: 100%; animation-delay: 0.12s; }
.ap-bars span:nth-child(3) { height: 40%; animation-delay: 0.24s; }
.ap-bars span:nth-child(4) { height: 75%; animation-delay: 0.36s; }

@keyframes ap-bar {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1); }
}

.ap-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ap-header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ap-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.ap-size {
  font-size: 11px;
  color: var(--text-muted, #8e9297);
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.ap-waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  padding: 2px 0;
  flex-shrink: 0;
}

.ap-wave-bar {
  width: 3px;
  border-radius: 2px;
  min-height: 4px;
  transition: background 0.15s;
}

.ap-waveform-canvas {
  width: 100%;
  height: 40px;
  border-radius: 4px;
  flex-shrink: 0;
}

.ap-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ap-time {
  font-size: 11px;
  color: var(--text-muted, #8e9297);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 36px;
  user-select: none;
}

.ap-time:last-child {
  text-align: right;
}

.ap-progress-track {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  transition: height 0.1s;
}

.ap:hover .ap-progress-track {
  height: 7px;
}

.ap-progress-buffered {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  pointer-events: none;
}

.ap-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--accent-primary, #5865f2);
  border-radius: 3px;
  pointer-events: none;
  transition: width 0.05s linear;
}

.ap-progress-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 2;
}

.ap:hover .ap-progress-thumb {
  opacity: 1;
}

.ap-time-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: var(--text-primary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding: 3px 7px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
}

.ap-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ap-ctrl-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--text-muted, #8e9297);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  padding: 0;
  outline: none;
}

.ap-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary, #e0e0e0);
}

.ap-ctrl-btn.active {
  color: var(--accent-primary, #5865f2);
}

.ap-speed-btn {
  width: auto;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.ap-speed-wrap {
  position: relative;
}

.ap-speed-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: var(--bg-secondary, #1e1e2e);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 56px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.ap-speed-option {
  padding: 5px 10px;
  border: none;
  background: transparent;
  color: var(--text-primary, #e0e0e0);
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
  text-align: center;
  transition: background 0.12s;
  font-variant-numeric: tabular-nums;
}

.ap-speed-option:hover {
  background: rgba(255, 255, 255, 0.06);
}

.ap-speed-option.active {
  background: var(--accent-primary, #5865f2);
  color: var(--text-primary);
}

.ap-volume-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.ap-volume-slider-popup {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-secondary, #1e1e2e);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 28px;
}

.ap-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.ap-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-primary, #5865f2);
  border: 2px solid #fff;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.ap-volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-primary, #5865f2);
  border: 2px solid #fff;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.ap-dl-btn {
  text-decoration: none;
}

.ap-dl-btn:hover {
  color: var(--accent-primary, #5865f2) !important;
}

.ap-active {
  border-color: rgba(88, 101, 242, 0.3);
}
.invite-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: invite-overlay-in 0.15s ease;
}

@keyframes invite-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.invite-modal {
  width: 420px;
  max-width: 90vw;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 255, 136, 0.05);
  animation: invite-modal-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

@keyframes invite-modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.invite-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s;
  z-index: 1;
}

.invite-modal-close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.invite-modal-banner {
  height: 100px;
  background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 50%, #0a0a1a 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.invite-modal-banner-glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 255, 136, 0.15) 0%, transparent 70%);
  animation: invite-glow-pulse 3s ease-in-out infinite;
}

@keyframes invite-glow-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 1; }
}

.invite-modal-banner-content {
  position: relative;
  z-index: 1;
}

.invite-modal-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bg-primary);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  background: var(--bg-tertiary);
}

.invite-modal-icon-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--accent-primary);
  background: var(--bg-secondary);
  border-color: var(--accent-primary);
}

.invite-modal-body {
  padding: 20px 24px 24px;
  text-align: center;
}

.invite-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.invite-modal-inviter {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 16px;
}

.invite-modal-inviter strong {
  color: var(--accent-primary);
}

.invite-modal-details {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: 10px;
}

.invite-modal-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.invite-modal-detail-label {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.invite-modal-detail-value {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.invite-modal-join-error {
  background: rgba(255, 71, 87, 0.1);
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  color: var(--error-color);
  font-size: 13px;
}

.invite-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.invite-modal-join-btn {
  width: 100%;
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--accent-primary) 0%, #00cc6a 100%);
  color: var(--text-on-accent);
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.invite-modal-join-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 255, 136, 0.3);
}

.invite-modal-join-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.invite-modal-btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-top-color: var(--text-on-accent);
  border-radius: 50%;
  animation: invite-spin 0.6s linear infinite;
}

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

.invite-modal-cancel-btn {
  width: 100%;
  padding: 10px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

.invite-modal-cancel-btn:hover {
  color: var(--text-secondary);
  border-color: var(--border-hover);
  background: rgba(255, 255, 255, 0.03);
}

.invite-modal-loading {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.invite-modal-loading p {
  color: var(--text-muted);
  font-size: 14px;
}

.invite-modal-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: invite-spin 0.8s linear infinite;
}

.invite-modal-error {
  padding: 24px 0;
}

.invite-modal-error-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 71, 87, 0.15);
  color: var(--error-color);
  font-size: 22px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.invite-modal-error h3 {
  color: var(--error-color);
  font-size: 16px;
  margin: 0 0 8px;
}

.invite-modal-error p {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.invite-modal-joined {
  padding: 24px 0;
}

.invite-modal-joined-check {
  margin-bottom: 12px;
  animation: invite-check-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes invite-check-pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

.invite-modal-joined h3 {
  color: var(--accent-primary);
  font-size: 18px;
  margin: 0 0 4px;
}

.invite-modal-joined p {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}

.invite-modal-login-prompt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.invite-modal-login-prompt p {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}
/* Markdown Content Styles */
.markdown-content {
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.markdown-content strong {
  font-weight: 700;
  color: var(--text-primary);
}

.markdown-content em {
  font-style: italic;
}

.markdown-content u {
  text-decoration: underline;
}

.markdown-content del {
  text-decoration: line-through;
  opacity: 0.7;
}

.md-code {
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
  font-size: 0.875em;
  color: var(--accent-primary);
}

.md-code-block {
  background: var(--bg-tertiary);
  border-radius: 8px;
  font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
  font-size: 13px;
  margin: 8px 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  min-height: 32px;
}

.code-block-lang {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.code-copy-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: all 0.15s;
  opacity: 0;
  font-family: inherit;
}

.md-code-block:hover .code-copy-btn {
  opacity: 1;
}

.code-copy-btn:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.08));
  color: var(--text-primary);
}

.code-copy-btn:active {
  transform: scale(0.95);
}

.code-block-wrapper {
  display: flex;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) transparent;
}

.code-block-wrapper::-webkit-scrollbar {
  height: 6px;
}

.code-block-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.code-block-wrapper::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 3px;
  opacity: 0.3;
}

.code-line-numbers {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  min-width: 48px;
  text-align: right;
  user-select: none;
  border-right: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.code-line-num {
  display: block;
  padding: 0 12px 0 8px;
  font-size: 13px;
  line-height: 20px;
  color: var(--text-muted);
  height: 20px;
  opacity: 0.5;
}

.code-block-body {
  flex: 1;
  padding: 12px 16px;
  overflow-x: auto;
  min-width: 0;
}

.code-block-body code {
  display: flex;
  flex-direction: column;
  font-family: inherit;
  font-size: inherit;
  line-height: 20px;
}

.code-line {
  display: block;
  white-space: pre;
  min-height: 20px;
  color: var(--text-primary);
}

.code-line .hljs-keyword,
.code-line .hljs-selector-tag,
.code-line .hljs-built_in {
  color: var(--accent-primary);
}

.code-line .hljs-string,
.code-line .hljs-attr,
.code-line .hljs-template-variable {
  color: var(--accent-secondary, #00b0f4);
}

.code-line .hljs-comment,
.code-line .hljs-doctag {
  color: var(--text-muted);
  font-style: italic;
}

.code-line .hljs-number,
.code-line .hljs-literal {
  color: var(--warning, #fbbf24);
}

.code-line .hljs-type,
.code-line .hljs-class .hljs-title,
.code-line .hljs-section {
  color: var(--accent-secondary, #00b0f4);
}

.code-line .hljs-variable,
.code-line .hljs-params {
  color: var(--text-primary);
}

.code-line .hljs-function,
.code-line .hljs-title {
  color: var(--accent-primary);
}

.code-line .hljs-tag {
  color: var(--accent-primary);
}

.code-line .hljs-name {
  color: var(--accent-secondary, #00b0f4);
}

.code-line .hljs-attribute {
  color: var(--warning, #fbbf24);
}

.code-line .hljs-regexp,
.code-line .hljs-link {
  color: var(--accent-secondary, #00b0f4);
}

.code-line .hljs-meta {
  color: var(--text-muted);
}

.code-line .hljs-deletion {
  color: #f85149;
}

.code-line .hljs-addition {
  color: var(--accent-primary);
}

.code-line .hljs-emphasis {
  font-style: italic;
}

.code-line .hljs-strong {
  font-weight: 700;
}

.md-link {
  color: var(--link-color, #00b0f4);
  text-decoration: none;
  transition: all 0.15s;
  word-break: break-word;
  overflow-wrap: break-word;
  position: relative;
  cursor: pointer;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 4px;
}

.md-link:hover {
  background: rgba(0, 176, 244, 0.15);
  text-decoration: underline;
}

.md-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 4px;
  right: 4px;
  height: 1px;
  background: var(--link-color, #00b0f4);
  opacity: 0;
  transition: opacity 0.15s;
}

.md-link:hover::after {
  opacity: 0.6;
}

.md-link[title] {
  cursor: pointer;
}

/* Link Preview Styles */
.link-preview {
  position: relative;
  display: flex;
  align-items: stretch;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 8px;
  max-width: 400px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.link-preview:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

.link-preview-main {
  display: flex;
  flex: 1;
  cursor: pointer;
}

.link-preview.loading {
  min-height: 60px;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.link-preview-image-container {
  width: 120px;
  height: 80px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--bg-tertiary);
}

.link-preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

.link-preview-content {
  flex: 1;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.link-preview-skeleton {
  background: var(--bg-tertiary);
  border-radius: 4px;
  animation: pulse 1.5s infinite;
}

.link-preview-skeleton.title {
  height: 16px;
  width: 60%;
  margin-bottom: 8px;
}

.link-preview-skeleton.desc {
  height: 12px;
  width: 80%;
}

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

.link-preview-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.link-preview-site {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.link-preview-favicon {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  object-fit: contain;
}

.link-preview-description {
  font-size: 12px;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}

.link-preview-url {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-preview-url svg {
  flex-shrink: 0;
  opacity: 0.6;
}

.link-preview-menu-btn {
  padding: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  opacity: 0;
}

.link-preview:hover .link-preview-menu-btn {
  opacity: 1;
}

.link-preview-menu-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.link-preview-dropdown {
  position: absolute;
  top: 100%;
  right: 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  animation: dropdownFadeIn 0.15s ease;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s;
  text-align: left;
}

.dropdown-item:hover {
  background: var(--bg-hover);
}

.dropdown-divider {
  height: 1px;
  background: var(--border-color);
  margin: 6px 0;
}

.dropdown-url {
  padding: 4px 10px;
  font-size: 10px;
  color: var(--text-muted);
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Message text wrapper */
.message-text-wrapper {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.link-previews {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.invite-previews {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.invite-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  max-width: 400px;
  transition: background 0.15s, border-color 0.15s;
}

.invite-preview:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-primary);
}

.invite-preview.loading {
  pointer-events: none;
}

.invite-preview-skeleton {
  height: 40px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  animation: shimmer 1.5s infinite;
}

.invite-preview-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.invite-preview-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.invite-preview-icon-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-primary);
  color: var(--text-on-accent);
  font-weight: 700;
  font-size: 16px;
}

.invite-preview-info {
  min-width: 0;
}

.invite-preview-name {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invite-preview-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

.invite-preview-join {
  flex-shrink: 0;
  background: var(--accent-primary);
  color: var(--text-on-accent);
  border: none;
  border-radius: 4px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.invite-preview-join:hover {
  opacity: 0.85;
}

.md-h2, .md-h3, .md-h4 {
  margin: 12px 0 8px;
  color: var(--text-primary);
}

.md-h2 { font-size: 20px; }
.md-h3 { font-size: 18px; }
.md-h4 { font-size: 16px; }

.md-blockquote {
  border-left: 3px solid var(--accent-primary);
  padding-left: 12px;
  margin: 8px 0;
  color: var(--text-secondary);
  font-style: italic;
}

.md-li {
  margin-left: 20px;
  list-style: disc;
}

/* Spoiler tag */
.spoiler {
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.spoiler:hover {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.spoiler.revealed {
  background: transparent;
  padding: 0;
}

/* Mention styles */
.mention {
  color: var(--accent-primary);
  background: rgba(0, 255, 136, 0.15);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.95em;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.mention:hover {
  background: rgba(0, 255, 136, 0.25);
  border-color: var(--accent-primary);
}

.mention-self {
  color: var(--warning);
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.3);
}

.mention-self:hover {
  background: rgba(251, 191, 36, 0.25);
  border-color: var(--warning);
}

.mention-everyone,
.mention-here {
  color: var(--text-on-accent);
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  padding: 2px 10px;
  border-radius: 4px;
  font-weight: 700;
  border: none;
}

.mention-everyone:hover,
.mention-here:hover {
  filter: brightness(1.1);
}

/* Channel mention */
.channel-mention {
  color: var(--warning);
  background: rgba(251, 191, 36, 0.15);
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.channel-mention:hover {
  background: rgba(251, 191, 36, 0.25);
  border-color: var(--warning);
}

/* Role mention */
.role-mention {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.mention:hover {
  background: rgba(0, 255, 136, 0.25);
  color: var(--accent-primary-hover, #00e673);
}

.mention-self:hover {
  background: rgba(251, 191, 36, 0.25);
  color: var(--warning-hover, #fbbf24);
}

.mention-everyone:hover,
.mention-here:hover {
  filter: brightness(1.2);
}

.channel-mention {
  background: rgba(88, 101, 242, 0.15);
  color: #8b9cf7;
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.channel-mention:hover {
  background: rgba(88, 101, 242, 0.25);
  color: #a5b4fc;
}

/* Link Warning Modal */
.link-warning-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.link-warning-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--warning);
  border-radius: 16px;
  padding: 28px;
  width: 90%;
  max-width: 480px;
  text-align: center;
  box-shadow: 
    0 0 0 1px rgba(255, 165, 2, 0.1),
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(255, 165, 2, 0.1);
  animation: warningPopIn 0.25s ease-out;
}

@keyframes warningPopIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.link-warning-modal .warning-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.link-warning-modal .warning-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, rgba(255, 165, 2, 0.15), rgba(255, 165, 2, 0.05));
  border-radius: 50%;
  animation: warningPulse 2s ease-in-out infinite;
}

@keyframes warningPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 165, 2, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(255, 165, 2, 0); }
}

.link-warning-modal h3 {
  margin: 0;
  font-size: 22px;
  color: var(--warning);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.link-warning-modal .warning-text {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 20px;
}

.link-warning-modal .warning-link-container {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  text-align: left;
}

.link-warning-modal .warning-link-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.link-warning-modal .warning-url {
  display: block;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 13px;
  word-break: break-all;
  color: var(--accent-primary);
  line-height: 1.4;
  background: transparent;
  padding: 0;
}

.link-warning-modal .warning-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(255, 165, 2, 0.08);
  border-radius: 10px;
  margin-bottom: 24px;
  text-align: left;
}

.link-warning-modal .warning-info svg {
  flex-shrink: 0;
  color: var(--warning);
  margin-top: 2px;
}

.link-warning-modal .warning-info span {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.link-warning-modal .warning-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.link-warning-modal .warning-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.link-warning-modal .warning-btn.btn-secondary {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.link-warning-modal .warning-btn.btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--text-muted);
}

.link-warning-modal .warning-btn.btn-primary {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  border: none;
  color: #000;
}

.link-warning-modal .warning-btn.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 255, 136, 0.3);
}

.link-warning-modal .warning-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.link-warning-modal .warning-shortcut {
  font-size: 12px;
  color: var(--text-muted);
}

.link-warning-modal .warning-shortcut kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  margin: 0 2px;
}

/* Media Embeds */
.media-embeds {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: min(100%, 560px);
}

.youtube-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}

.youtube-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-embed {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.video-embed video {
  width: 100%;
  height: auto;
  max-height: min(70vh, 520px);
  display: block;
}

.media-download-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--primary, #00ff88);
  color: #000;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 0.5rem;
}

.media-download-btn:hover {
  opacity: 0.9;
}
.dashboard {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.dashboard-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner-lg {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Server Banner */
.server-banner {
  position: relative;
  padding: 40px 40px 32px;
  overflow: hidden;
}

.server-banner-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.server-banner-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(20px) brightness(0.3);
  transform: scale(1.2);
}

.server-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, var(--bg-primary) 100%);
}

.server-banner-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
}

.server-banner-icon {
  flex-shrink: 0;
  border: 3px solid var(--accent-primary);
  box-shadow: 0 0 30px var(--accent-glow);
  border-radius: 50%;
}

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

.server-banner-name {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text-primary);
}

.server-banner-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 12px;
  line-height: 1.4;
}

.server-banner-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-muted);
}

.stat-chip svg {
  flex-shrink: 0;
}

.stat-chip.stat-online {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  background: rgba(0, 255, 136, 0.08);
}

.stat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-primary);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Server Actions */
.server-actions-bar {
  display: flex;
  gap: 10px;
  padding: 0 40px 20px;
  align-items: center;
}

.server-actions-bar .btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 8px 16px;
}

/* Create Channel Form */
.create-channel-form {
  margin: 0 40px 20px;
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.form-row {
  display: flex;
  gap: 10px;
}

.form-row input {
  flex: 1;
}

.form-row select {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
}

/* Dashboard Sections Layout */
.dashboard-sections {
  flex: 1;
  display: flex;
  gap: 24px;
  padding: 0 40px 24px;
  overflow: hidden;
}

.dashboard-main-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  min-width: 0;
}

.dashboard-side-col {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.dashboard-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-title-row h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.section-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

.admin-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-primary);
  padding: 2px 8px;
  background: rgba(0, 255, 136, 0.1);
  border-radius: 4px;
}

/* Channel Categories */
.channel-category-block {
  margin-bottom: 20px;
}

.channel-category-block:last-child {
  margin-bottom: 0;
}

.category-block-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.channel-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.channel-landing-card {
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.channel-landing-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 20px var(--accent-glow);
}

.channel-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.channel-card-symbol {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border-radius: 8px;
  color: var(--accent-primary);
  flex-shrink: 0;
  font-size: 16px;
}

.channel-card-landing-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.channel-card-landing-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 8px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.channel-card-landing-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.channel-card-landing-type {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  opacity: 0.6;
}

.channel-card-landing-arrow {
  font-size: 16px;
  color: var(--accent-primary);
  opacity: 0;
  transition: opacity 0.2s;
}

.channel-landing-card:hover .channel-card-landing-arrow {
  opacity: 1;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.empty-state p {
  margin: 12px 0 0;
  font-size: 14px;
}

/* Online Members Compact */
.online-members-compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.online-member-compact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  transition: background 0.15s;
}

.online-member-compact:hover {
  background: var(--bg-hover);
}

.online-member-avatar {
  position: relative;
  flex-shrink: 0;
}

.online-status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-secondary);
}

.online-status-dot.online {
  background: #00ff88;
}

.online-status-dot.idle {
  background: #faa61a;
}

.online-status-dot.dnd {
  background: #f04747;
}

.online-member-compact-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.online-member-compact-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.online-member-compact-role {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: capitalize;
}

.online-members-more {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px;
}

/* Profile Section */
.profile-summary-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 14px;
}

.profile-summary-avatar {
  flex-shrink: 0;
}

.profile-summary-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-summary-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.profile-summary-tier {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: capitalize;
}

.profile-summary-stats {
  text-align: right;
}

.profile-stat {
  display: flex;
  flex-direction: column;
}

.profile-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-primary);
}

.profile-stat-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge-mini {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: 6px;
  font-size: 16px;
}

.badge-mini svg {
  width: 18px;
  height: 18px;
}

.badges-more {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  padding: 0 4px;
}

/* Analytics Grid */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.analytics-card {
  padding: 14px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  text-align: center;
}

.analytics-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-primary);
  margin-bottom: 2px;
}

.analytics-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Dashboard Header (non-server) */
.dashboard-header {
  padding: 32px 40px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.header-content h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.header-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-icon {
  flex-shrink: 0;
}

.header-tagline {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  margin: 2px 0 0;
}

/* Dashboard Config Sections */
.welcome-section h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--accent-primary);
}

.welcome-section .markdown-content {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.rules-section h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px;
}

.rules-list {
  margin: 0;
  padding: 0 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rules-list li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  padding: 4px 0;
}

.rules-list li::marker {
  color: var(--accent-primary);
  font-weight: 600;
}

.announcement-section {
  border-left: 4px solid var(--accent-primary) !important;
}

.announcement-section h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.announcement-icon {
  font-size: 20px;
}

.announcement-section .markdown-content {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.custom-section h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text-primary);
}

.custom-section .markdown-content {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Full-width layout extras */
.dashboard-full-width-extras {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Sidebar left layout */
.layout-sidebar_left {
  flex-direction: row-reverse;
}

/* Responsive */
@media screen and (max-width: 1024px) {
  .analytics-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-side-col {
    width: 240px;
  }
}

@media screen and (max-width: 900px) {
  .dashboard-sections {
    flex-direction: column;
    padding: 0 16px 16px;
  }

  .dashboard-side-col,
  .dashboard-full-width-extras {
    width: 100%;
  }

  .layout-sidebar_left {
    flex-direction: column;
  }

  .server-banner {
    padding: 24px 16px 20px;
  }

  .server-banner-content {
    flex-direction: column;
    text-align: center;
  }

  .server-banner-stats {
    justify-content: center;
  }

  .server-actions-bar {
    padding: 0 16px 16px;
    flex-wrap: wrap;
  }

  .create-channel-form {
    margin: 0 16px 16px;
  }

  .dashboard-header {
    padding: 24px 16px;
  }

  .channel-cards-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .server-banner {
    padding: 16px 12px 16px;
  }
  .server-banner-content {
    gap: 12px;
  }
  .server-banner-icon {
    width: 48px !important;
    height: 48px !important;
  }
  .server-banner-icon img {
    width: 48px;
    height: 48px;
  }
  .server-banner-name {
    font-size: 22px;
  }
  .server-banner-desc {
    font-size: 13px;
  }
  .server-banner-stats {
    gap: 4px;
  }
  .stat-chip {
    padding: 2px 8px;
    font-size: 11px;
  }
  .server-actions-bar {
    padding: 0 12px 12px;
    gap: 6px;
  }
  .server-actions-bar .btn {
    padding: 6px 12px;
    font-size: 12px;
  }
  .create-channel-form {
    margin: 0 12px 12px;
    padding: 12px;
  }
  .form-row {
    flex-direction: column;
    gap: 8px;
  }
  .dashboard-sections {
    padding: 0 12px 12px;
  }
  .dashboard-section {
    padding: 14px;
  }
  .section-title-row h2 {
    font-size: 14px;
  }
  .dashboard-header {
    padding: 16px 12px;
  }
  .header-content h1 {
    font-size: 20px;
  }
  .welcome-section h2 {
    font-size: 22px;
  }
  .rules-section h2 {
    font-size: 17px;
  }
  .channel-cards-row {
    gap: 8px;
  }
  .channel-landing-card {
    padding: 10px;
  }
  .channel-card-landing-name {
    font-size: 13px;
  }
  .online-member-compact {
    padding: 6px 8px;
  }
  .analytics-grid {
    gap: 6px;
  }
  .analytics-card {
    padding: 10px;
  }
  .analytics-value {
    font-size: 20px;
  }
  .profile-summary-card {
    flex-direction: column;
    text-align: center;
  }
  .profile-summary-stats {
    text-align: center;
  }
}
/* Name Effects Animations */
@keyframes nameGlow {
  0%, 100% { 
    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
    filter: brightness(1);
  }
  50% { 
    text-shadow: 0 0 15px currentColor, 0 0 25px currentColor, 0 0 35px currentColor;
    filter: brightness(1.2);
  }
}

@keyframes nameRainbowGlow {
  0% { text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000; color: #ff0000; }
  16% { text-shadow: 0 0 10px #ff7f00, 0 0 20px #ff7f00; color: #ff7f00; }
  33% { text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00; color: #ffff00; }
  50% { text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; color: #00ff00; }
  66% { text-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff; color: #0000ff; }
  83% { text-shadow: 0 0 10px #8b00ff, 0 0 20px #8b00ff; color: #8b00ff; }
  100% { text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000; color: #ff0000; }
}

@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes nameRainbow {
  0% { color: #ff0000; }
  16% { color: #ff7f00; }
  33% { color: #ffff00; }
  50% { color: #00ff00; }
  66% { color: #0000ff; }
  83% { color: #8b00ff; }
  100% { color: #ff0000; }
}

@keyframes nameNeon {
  0% { 
    color: #ff0080; 
    text-shadow: 0 0 5px #ff0080, 0 0 10px #ff0080, 0 0 15px #ff0080;
  }
  100% { 
    color: #00ffff; 
    text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff;
  }
}

@keyframes nameFire {
  0%, 100% { color: #ff4400; text-shadow: 0 0 10px #ff4400; }
  25% { color: #ff8800; text-shadow: 0 0 15px #ff6600; }
  50% { color: #ffaa00; text-shadow: 0 0 10px #ffaa00; }
  75% { color: #ff6600; text-shadow: 0 0 15px #ff4400; }
}

@keyframes nameIce {
  0%, 100% { color: #00ffff; text-shadow: 0 0 10px #00ffff, 0 0 20px #88ffff; }
  50% { color: #88ffff; text-shadow: 0 0 15px #00ccff, 0 0 30px #44ddff; }
}

@keyframes nameCyber {
  0% { color: #00ff00; -webkit-text-stroke: 0; }
  25% { color: transparent; -webkit-text-stroke: 2px #00ff00; }
  50% { color: #00ff00; -webkit-text-stroke: 0; }
  75% { color: transparent; -webkit-text-stroke: 2px #00ff00; }
  100% { color: #00ff00; -webkit-text-stroke: 0; }
}

@keyframes nameTyping {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes nameFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes nameWave {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-2px); }
  75% { transform: translateY(2px); }
}

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

@keyframes nameShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

@keyframes nameBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes nameFlash {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50% { opacity: 0.5; filter: brightness(1.5); }
}

@keyframes nameGlitch {
  0%, 100% { 
    transform: translate(0); 
    filter: none;
  }
  20% { 
    transform: translate(-2px, 2px); 
    filter: hue-rotate(90deg);
  }
  40% { 
    transform: translate(2px, -2px); 
    filter: hue-rotate(180deg);
  }
  60% { 
    transform: translate(-1px, 1px); 
    filter: hue-rotate(270deg);
  }
  80% { 
    transform: translate(1px, -1px); 
    filter: hue-rotate(360deg);
  }
}

@keyframes name3DFloat {
  0%, 100% { transform: translateY(0) rotateX(0deg); }
  25% { transform: translateY(-3px) rotateX(5deg); }
  75% { transform: translateY(3px) rotateX(-5deg); }
}

@keyframes nameMatrix {
  0%, 100% { 
    color: #00ff00; 
    text-shadow: 0 0 5px #00ff00;
  }
  50% { 
    color: #33ff33; 
    text-shadow: 0 0 15px #00ff00, 0 0 25px #00ff00;
    filter: brightness(1.3);
  }
}

@keyframes nameHologram {
  0%, 100% { 
    color: #00ffff; 
    text-shadow: 0 0 10px #00ffff, 0 0 20px rgba(0, 255, 255, 0.5);
    filter: brightness(1) saturate(1);
  }
  50% { 
    color: #88ffff; 
    text-shadow: 0 0 20px #00ffff, 0 0 40px rgba(0, 255, 255, 0.8);
    filter: brightness(1.2) saturate(1.2);
  }
}

@keyframes nameAurora {
  0%, 100% { color: #00ff88; text-shadow: 0 0 10px #00ff88; }
  25% { color: #00ccff; text-shadow: 0 0 10px #00ccff; }
  50% { color: #cc00ff; text-shadow: 0 0 10px #cc00ff; }
  75% { color: #ff00cc; text-shadow: 0 0 10px #ff00cc; }
}

@keyframes namePrismatic {
  0% { 
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: hue-rotate(0deg) brightness(1.2);
  }
  100% { 
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: hue-rotate(360deg) brightness(1.2);
  }
}

@keyframes nameEmber {
  0%, 100% { 
    color: #ff4400; 
    text-shadow: 0 0 5px #ff4400, 0 0 10px #ff2200;
  }
  25% { 
    color: #ff6600; 
    text-shadow: 0 0 8px #ff6600, 0 0 16px #ff4400;
  }
  50% { 
    color: #ffaa00; 
    text-shadow: 0 0 10px #ffaa00, 0 0 20px #ff8800;
  }
  75% { 
    color: #ff8800; 
    text-shadow: 0 0 8px #ff8800, 0 0 16px #ff6600;
  }
}

@keyframes nameAuroraBorealis {
  0%, 100% { 
    color: #00ff88; 
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
  }
  33% { 
    color: #00ccff; 
    text-shadow: 0 0 15px rgba(0, 204, 255, 0.5);
  }
  66% { 
    color: #cc00ff; 
    text-shadow: 0 0 15px rgba(204, 0, 255, 0.5);
  }
}

/* ===== NEW PREMIUM NAME EFFECTS ===== */

@keyframes nameSupernova {
  0%, 100% { text-shadow: 0 0 10px currentColor, 0 0 20px currentColor; filter: brightness(1); }
  50% { text-shadow: 0 0 30px currentColor, 0 0 60px currentColor, 0 0 90px currentColor; filter: brightness(1.4); }
}

@keyframes nameLiquidMetal {
  0% { background-position: 0% 50%; filter: brightness(1); }
  25% { background-position: 50% 100%; filter: brightness(1.3) contrast(1.2); }
  50% { background-position: 100% 50%; filter: brightness(1.1); }
  75% { background-position: 50% 0%; filter: brightness(1.3) contrast(1.2); }
  100% { background-position: 0% 50%; filter: brightness(1); }
}

@keyframes nameLava {
  0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 10px rgba(255,69,0,0.4)); }
  50% { background-position: 100% 50%; filter: drop-shadow(0 0 25px rgba(255,69,0,0.7)); }
}

@keyframes nameMagma {
  0%, 100% { color: #ff4500; text-shadow: 0 0 10px #ff4500, 0 0 20px #ff8c00; }
  33% { color: #ff8c00; text-shadow: 0 0 15px #ff8c00, 0 0 30px #ffd700; }
  66% { color: #ffd700; text-shadow: 0 0 20px #ffd700, 0 0 40px #ff4500; }
}

@keyframes nameGalaxy {
  0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 10px rgba(155,89,182,0.4)); }
  50% { background-position: 100% 50%; filter: drop-shadow(0 0 25px rgba(52,152,219,0.6)); }
}

@keyframes nameOceanWave {
  0%, 100% { background-position: 0% 50%; transform: translateY(0); }
  50% { background-position: 100% 50%; transform: translateY(-2px); }
}

@keyframes nameThunder {
  0%, 100% { color: #ffff00; text-shadow: 0 0 10px #ffff00, 0 0 20px #ffaa00; filter: brightness(1); }
  10% { color: #ffffff; text-shadow: 0 0 30px #ffffff, 0 0 60px #ffff00, 0 0 90px #ffaa00; filter: brightness(1.5); }
  20% { color: #ffff00; text-shadow: 0 0 10px #ffff00, 0 0 20px #ffaa00; filter: brightness(1); }
  30% { color: #ffffff; text-shadow: 0 0 30px #ffffff, 0 0 60px #ffff00, 0 0 90px #ffaa00; filter: brightness(1.5); }
  40%, 100% { color: #ffff00; text-shadow: 0 0 10px #ffff00, 0 0 20px #ffaa00; filter: brightness(1); }
}

@keyframes nameStorm {
  0%, 100% { text-shadow: 0 0 10px #4a90d9, 0 0 20px #357abd; filter: brightness(1); }
  25% { text-shadow: 0 0 15px #6ab0f9, 0 0 30px #4a90d9; filter: brightness(1.1); }
  50% { text-shadow: 0 0 10px #357abd, 0 0 20px #4a90d9; filter: brightness(0.9); }
  75% { text-shadow: 0 0 15px #6ab0f9, 0 0 30px #4a90d9; filter: brightness(1.1); }
}

@keyframes nameSunsetGlow {
  0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 10px rgba(255,107,107,0.4)); }
  50% { background-position: 100% 50%; filter: drop-shadow(0 0 20px rgba(254,202,87,0.6)); }
}

@keyframes nameAuroraWaves {
  0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 15px rgba(0,255,135,0.3)); }
  33% { background-position: 50% 100%; filter: drop-shadow(0 0 25px rgba(96,239,255,0.5)); }
  66% { background-position: 100% 0%; filter: drop-shadow(0 0 20px rgba(0,102,255,0.4)); }
}

@keyframes nameHolographic {
  0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 10px rgba(255,0,128,0.3)); }
  33% { background-position: 50% 100%; filter: drop-shadow(0 0 20px rgba(64,224,208,0.5)); }
  66% { background-position: 100% 0%; filter: drop-shadow(0 0 15px rgba(255,140,0,0.4)); }
}

@keyframes nameVaporwave {
  0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 15px rgba(255,110,199,0.4)); }
  50% { background-position: 100% 50%; filter: drop-shadow(0 0 30px rgba(255,0,255,0.6)); }
}

@keyframes nameSakura {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(-2deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-3px) rotate(2deg); }
}

@keyframes nameNeonChrome {
  0%, 100% { color: #fff; filter: brightness(1); }
  50% { color: #f09; filter: brightness(1.3); }
}

@keyframes nameCrystalShine {
  0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 8px rgba(255,255,255,0.2)); }
  50% { background-position: 100% 50%; filter: drop-shadow(0 0 20px rgba(255,255,255,0.5)); }
}

@keyframes nameToxic {
  0%, 100% { text-shadow: 0 0 10px #39ff14, 0 0 20px #2ecc71; filter: brightness(1); }
  50% { text-shadow: 0 0 20px #39ff14, 0 0 40px #2ecc71, 0 0 60px #1a8a00; filter: brightness(1.3); }
}

@keyframes nameBloodMoon {
  0%, 100% { text-shadow: 0 0 10px #8b0000, 0 0 20px #ff0000; filter: brightness(1); }
  50% { text-shadow: 0 0 20px #ff0000, 0 0 40px #8b0000, 0 0 60px #660000; filter: brightness(1.2); }
}

@keyframes nameNeonSaber {
  0% { color: var(--name-effect-color, #00ffff); text-shadow: 0 0 7px var(--name-effect-color, #00ffff), 0 0 10px var(--name-effect-color, #00ffff), 0 0 21px var(--name-effect-color, #00ffff); filter: brightness(1); }
  100% { color: var(--name-effect-color, #00ffff); text-shadow: 0 0 14px var(--name-effect-color, #00ffff), 0 0 20px var(--name-effect-color, #00ffff), 0 0 42px var(--name-effect-color, #00ffff); filter: brightness(1.3); }
}

@keyframes nameCosmicDust {
  0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 15px rgba(200,80,192,0.2)); }
  50% { background-position: 100% 50%; filter: drop-shadow(0 0 30px rgba(200,80,192,0.5)); }
}

@keyframes nameQuantum {
  0% { background-position: 0% 50%; filter: brightness(1); }
  50% { background-position: 100% 50%; filter: brightness(1.3); }
  100% { background-position: 0% 50%; filter: brightness(1); }
}

@keyframes nameInferno {
  0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 20px rgba(255,68,0,0.4)); }
  50% { background-position: 100% 50%; filter: drop-shadow(0 0 40px rgba(255,68,0,0.7)); }
}

@keyframes nameNightSky {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(48,43,99,0.4)); }
  50% { filter: drop-shadow(0 0 25px rgba(48,43,99,0.7)); }
}

@keyframes nameGlitch2 {
  0%, 100% { transform: translate(0); opacity: 1; }
  2% { transform: translate(-5px, 3px); opacity: 0.8; }
  4% { transform: translate(5px, -3px); opacity: 0.9; }
  6% { transform: translate(0); opacity: 1; }
  10% { transform: translate(-3px, -2px); opacity: 0.85; }
  12% { transform: translate(3px, 2px); opacity: 1; }
  14% { transform: translate(0); opacity: 1; }
}

@keyframes nameSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes nameJitter {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, -1px); }
}

@keyframes nameFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes nameSkew {
  0%, 100% { transform: skewX(0deg); }
  25% { transform: skewX(-5deg); }
  75% { transform: skewX(5deg); }
}

@keyframes nameColorShift {
  0% { color: #ff0000; }
  16% { color: #ff7f00; }
  33% { color: #ffff00; }
  50% { color: #00ff00; }
  66% { color: #0000ff; }
  83% { color: #8b00ff; }
  100% { color: #ff0000; }
}

/* Name Effect Classes */
.name-effect-glow {
  text-shadow: 0 0 10px currentColor;
}

.name-effect-glow-pulse {
  animation: nameGlow 2s ease-in-out infinite;
}

.name-effect-glow-strong {
  text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
}

.name-effect-glow-rainbow {
  animation: nameRainbowGlow 3s linear infinite;
}

.name-effect-gradient {
  background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #ff6b6b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: gradientFlow 3s linear infinite;
}

.name-effect-rainbow {
  animation: nameRainbow 3s linear infinite;
}

.name-effect-neon {
  animation: nameNeon 1.5s ease-in-out infinite alternate;
}

.name-effect-fire {
  animation: nameFire 1s ease-in-out infinite;
}

.name-effect-ice {
  animation: nameIce 2s ease-in-out infinite;
}

.name-effect-cyber {
  animation: nameCyber 2s linear infinite;
}

.name-effect-gold {
  background: linear-gradient(180deg, #ffd700, #ffaa00, #ffd700, #fff4b0, #ffd700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 5px #ffd700;
}

.name-effect-silver {
  background: linear-gradient(180deg, #e0e0e0, #c0c0c0, #e0e0e0, #ffffff, #c0c0c0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.name-effect-rose-gold {
  background: linear-gradient(180deg, #b76e79, #e8c4c4, #b76e79, #f5d6d6, #b76e79);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.name-effect-platinum {
  background: linear-gradient(180deg, #e5e4e2, #ffffff, #e5e4e2, #d4d4d4, #e5e4e2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: brightness(1.2);
}

.name-effect-outline {
  -webkit-text-stroke: 1px currentColor;
  -webkit-text-fill-color: transparent;
}

.name-effect-outline-glow {
  -webkit-text-stroke: 1px currentColor;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px currentColor;
}

.name-effect-fill {
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: currentColor;
}

.name-effect-strikethrough {
  text-decoration: line-through;
  text-decoration-color: currentColor;
}

.name-effect-underline-wave {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: currentColor;
}

.name-effect-typing {
  animation: nameTyping 3s steps(10) infinite;
}

.name-effect-flicker {
  animation: nameFlicker 0.15s linear infinite;
}

.name-effect-wave {
  animation: nameWave 1s ease-in-out infinite;
}

.name-effect-pulse {
  animation: namePulse 1.5s ease-in-out infinite;
}

.name-effect-shake {
  animation: nameShake 0.5s ease-in-out infinite;
}

.name-effect-bounce {
  animation: nameBounce 1s ease-in-out infinite;
}

.name-effect-flash {
  animation: nameFlash 1s linear infinite;
}

.name-effect-glitch {
  animation: nameGlitch 2s linear infinite;
}

.name-effect-3d {
  text-shadow: 1px 1px 0 currentColor, 2px 2px 0 currentColor, 3px 3px 0 currentColor, 4px 4px 0 currentColor, 5px 5px 0 currentColor;
}

.name-effect-3d-glow {
  text-shadow: 1px 1px 0 currentColor, 2px 2px 0 currentColor, 3px 3px 0 currentColor, 4px 4px 5px currentColor, 5px 5px 10px currentColor;
}

.name-effect-3d-float {
  animation: name3DFloat 3s ease-in-out infinite;
  text-shadow: 1px 1px 0 currentColor, 2px 2px 0 currentColor, 3px 3px 0 currentColor;
}

.name-effect-matrix {
  animation: nameMatrix 2s linear infinite;
}

.name-effect-hologram {
  animation: nameHologram 3s ease-in-out infinite;
}

.name-effect-aurora {
  animation: nameAurora 4s ease-in-out infinite;
}

.name-effect-prismatic {
  background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: namePrismatic 3s linear infinite;
}

.name-effect-ember {
  animation: nameEmber 2s ease-out infinite;
}

.name-effect-aurora-borealis {
  animation: nameAuroraBorealis 5s ease-in-out infinite;
}

/* Hover-triggered name effects */
.username-effect {
  display: inline-block;
  cursor: default;
  transition: all 0.3s ease;
}

.username-effect[data-name-effect]:not(:hover) {
  animation: none !important;
}

.username-effect[data-name-effect="glow"]:hover {
  text-shadow: 0 0 10px currentColor;
}

.username-effect[data-name-effect="glow-pulse"]:hover {
  animation: nameGlow 2s ease-in-out infinite !important;
}

.username-effect[data-name-effect="glow-strong"]:hover {
  text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
}

.username-effect[data-name-effect="glow-rainbow"]:hover {
  animation: nameRainbowGlow 3s linear infinite !important;
}

.username-effect[data-name-effect="gradient"]:hover {
  background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #ff6b6b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: gradientFlow 3s linear infinite !important;
}

.username-effect[data-name-effect="rainbow"]:hover {
  animation: nameRainbow 3s linear infinite !important;
}

.username-effect[data-name-effect="neon"]:hover {
  animation: nameNeon 1.5s ease-in-out infinite alternate !important;
}

.username-effect[data-name-effect="fire"]:hover {
  animation: nameFire 1s ease-in-out infinite !important;
}

.username-effect[data-name-effect="ice"]:hover {
  animation: nameIce 2s ease-in-out infinite !important;
}

.username-effect[data-name-effect="cyber"]:hover {
  animation: nameCyber 2s linear infinite !important;
}

.username-effect[data-name-effect="gold"]:hover {
  background: linear-gradient(180deg, #ffd700, #ffaa00, #ffd700, #fff4b0, #ffd700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 5px #ffd700;
}

.username-effect[data-name-effect="silver"]:hover {
  background: linear-gradient(180deg, #e0e0e0, #c0c0c0, #e0e0e0, #ffffff, #c0c0c0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.username-effect[data-name-effect="rose-gold"]:hover {
  background: linear-gradient(180deg, #b76e79, #e8c4c4, #b76e79, #f5d6d6, #b76e79);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.username-effect[data-name-effect="platinum"]:hover {
  background: linear-gradient(180deg, #e5e4e2, #ffffff, #e5e4e2, #d4d4d4, #e5e4e2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: brightness(1.2);
}

.username-effect[data-name-effect="outline"]:hover {
  -webkit-text-stroke: 1px currentColor;
  -webkit-text-fill-color: transparent;
}

.username-effect[data-name-effect="outline-glow"]:hover {
  -webkit-text-stroke: 1px currentColor;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px currentColor;
}

.username-effect[data-name-effect="typing"]:hover {
  animation: nameTyping 3s steps(10) infinite !important;
}

.username-effect[data-name-effect="flicker"]:hover {
  animation: nameFlicker 0.15s linear infinite !important;
}

.username-effect[data-name-effect="wave"]:hover {
  animation: nameWave 1s ease-in-out infinite !important;
}

.username-effect[data-name-effect="pulse"]:hover {
  animation: namePulse 1.5s ease-in-out infinite !important;
}

.username-effect[data-name-effect="shake"]:hover {
  animation: nameShake 0.5s ease-in-out infinite !important;
}

.username-effect[data-name-effect="bounce"]:hover {
  animation: nameBounce 1s ease-in-out infinite !important;
}

.username-effect[data-name-effect="flash"]:hover {
  animation: nameFlash 1s linear infinite !important;
}

.username-effect[data-name-effect="glitch"]:hover {
  animation: nameGlitch 2s linear infinite !important;
}

.username-effect[data-name-effect="3d"]:hover {
  text-shadow: 1px 1px 0 currentColor, 2px 2px 0 currentColor, 3px 3px 0 currentColor, 4px 4px 0 currentColor, 5px 5px 0 currentColor;
}

.username-effect[data-name-effect="3d-glow"]:hover {
  text-shadow: 1px 1px 0 currentColor, 2px 2px 0 currentColor, 3px 3px 0 currentColor, 4px 4px 5px currentColor, 5px 5px 10px currentColor;
}

.username-effect[data-name-effect="3d-float"]:hover {
  animation: name3DFloat 3s ease-in-out infinite !important;
  text-shadow: 1px 1px 0 currentColor, 2px 2px 0 currentColor, 3px 3px 0 currentColor;
}

.username-effect[data-name-effect="matrix"]:hover {
  animation: nameMatrix 2s linear infinite !important;
}

.username-effect[data-name-effect="hologram"]:hover {
  animation: nameHologram 3s ease-in-out infinite !important;
}

.username-effect[data-name-effect="aurora"]:hover {
  animation: nameAurora 4s ease-in-out infinite !important;
}

.username-effect[data-name-effect="prismatic"]:hover {
  background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: namePrismatic 3s linear infinite !important;
}

.username-effect[data-name-effect="ember"]:hover {
  animation: nameEmber 2s ease-out infinite !important;
}

.username-effect[data-name-effect="aurora-borealis"]:hover {
  animation: nameAuroraBorealis 5s ease-in-out infinite !important;
}
.user-profile-popout {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
  width: 520px;
  max-width: 90vw;
  max-height: 85vh;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 100px rgba(0, 255, 136, 0.05);
  overflow: hidden;
  animation: popoutFadeIn 0.2s ease-out;
  display: flex;
  flex-direction: column;
}

.user-profile-popout-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  animation: overlayFadeIn 0.2s ease-out;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.user-profile-popout::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, var(--accent-primary) 0%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
}

@keyframes popoutFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.popout-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
}

.popout-close-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.popout-loading {
  padding: 60px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

.popout-header {
  position: relative;
  padding: 32px 32px 24px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.popout-header-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-tertiary);
  image-rendering: auto;
}

.popout-header-banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to top, var(--bg-secondary), transparent);
}

.popout-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
  margin-bottom: 16px;
}

.popout-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 6px solid var(--bg-secondary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.popout-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popout-avatar span {
  font-size: 48px;
  font-weight: 600;
  color: var(--accent-primary);
}

.popout-status-dot {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 6px solid var(--bg-secondary);
}

.popout-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.popout-user-info .popout-name {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.popout-user-info .popout-display-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.popout-user-info .popout-username {
  font-size: 14px;
  color: var(--text-muted);
}

.popout-user-info .popout-badges {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 8px 0;
}

.popout-user-info .popout-badge {
  font-size: 18px;
}

.popout-user-info .popout-badge svg {
  width: 24px;
  height: 24px;
}

.popout-user-info .popout-custom-status {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.popout-bio {
  padding: 20px 32px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
}

.popout-stats {
  display: flex;
  padding: 16px 32px;
  gap: 32px;
  justify-content: center;
  border-bottom: 1px solid var(--border-color);
}

.popout-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.popout-stat .stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.popout-stat .stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.popout-message {
  padding: 12px 32px;
  font-size: 13px;
  color: var(--accent-primary);
  background: rgba(0, 255, 136, 0.1);
  text-align: center;
}

.popout-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 32px;
}
  flex-direction: column;
  gap: 2px;
}

.popout-name {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.popout-display-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.popout-role {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: capitalize;
  background: var(--bg-primary);
}

.popout-role.role-owner { background: linear-gradient(135deg, #ffd700, #ff8c00); color: #000; }
.popout-role.role-admin { background: linear-gradient(135deg, #e74c3c, #c0392b); color: var(--text-on-accent); }
.popout-role.role-moderator { background: linear-gradient(135deg, #3498db, #2980b9); color: var(--text-on-accent); }
.popout-role.role-vip { background: linear-gradient(135deg, #9b59b6, #8e44ad); color: var(--text-on-accent); }
.popout-role.role-member { background: var(--bg-primary); color: var(--text-muted); }

.popout-username {
  font-size: 12px;
  color: var(--text-muted);
}

.popout-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.popout-badge {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, filter 0.2s ease;
  cursor: default;
}

.popout-badge svg {
  width: 16px;
  height: 16px;
}

.popout-badge:hover {
  transform: scale(1.3);
  filter: brightness(1.3) drop-shadow(0 0 4px currentColor);
}

.popout-badge-more {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-primary);
  padding: 2px 4px;
  border-radius: 4px;
}

.popout-custom-status {
  font-size: 11px;
  color: var(--accent-primary);
  margin-top: 2px;
}

.popout-bio {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  border-bottom: 1px solid var(--border-color);
}

.popout-stats {
  display: flex;
  padding: 12px 16px;
  gap: 16px;
  border-bottom: 1px solid var(--border-color);
}

.popout-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.popout-stat .stat-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.popout-stat .stat-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.popout-message {
  padding: 8px 16px;
  font-size: 11px;
  color: var(--accent-primary);
  background: rgba(0, 255, 136, 0.1);
  text-align: center;
}

.popout-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
}

.popout-btn {
  width: 100%;
  padding: 10px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.popout-btn.primary {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.popout-btn.primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 12px var(--accent-glow);
}

.popout-btn.secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.popout-btn.secondary:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
}

.popout-btn.danger {
  background: rgba(255, 71, 71, 0.1);
  color: var(--danger);
  border: 1px solid var(--danger);
}

.popout-btn.danger:hover {
  background: rgba(255, 71, 71, 0.2);
}

.popout-actions-menu {
  position: relative;
}

.popout-btn.menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.popout-btn.menu-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
}

.popout-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  margin-bottom: 4px;
  overflow: hidden;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
}

.popout-dropdown button {
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  text-align: left;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.popout-dropdown button:hover {
  background: var(--bg-hover);
}

.popout-dropdown button.danger {
  color: var(--danger);
}

.popout-dropdown button.danger:hover {
  background: rgba(255, 71, 71, 0.1);
}

.popout-report-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 10;
}

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

.report-modal-header h4 {
  margin: 0;
  font-size: 14px;
  color: var(--text-primary);
}

.report-modal-header .close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

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

.report-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}

.report-option input {
  accent-color: var(--accent-primary);
}

.popout-report-modal textarea {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 13px;
  padding: 8px;
  resize: none;
  margin-bottom: 12px;
}

.popout-report-modal textarea::placeholder {
  color: var(--text-muted);
}

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

.report-actions .cancel-btn {
  flex: 1;
  padding: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
  cursor: pointer;
}

.report-actions .submit-btn {
  flex: 1;
  padding: 8px;
  background: var(--danger);
  border: none;
  border-radius: 4px;
  color: var(--text-on-accent);
  cursor: pointer;
  font-weight: 500;
}

@keyframes pulseGlow {
  0%, 100% { filter: drop-shadow(0 0 5px var(--accent-primary)); }
  50% { filter: drop-shadow(0 0 20px var(--accent-primary)); }
}

@keyframes rainbowBorder {
  0% { border-color: #ff0000; }
  16% { border-color: #ff8800; }
  33% { border-color: #ffff00; }
  50% { border-color: #00ff00; }
  66% { border-color: #0088ff; }
  83% { border-color: #8800ff; }
  100% { border-color: #ff0000; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes wave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.5); }
}

@keyframes sparkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

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

.report-actions .submit-btn:hover {
  filter: brightness(1.1);
}
.polls-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 320px;
  background: var(--bg-secondary, #1a1a2e);
  border-left: 1px solid var(--border-color, #2a2a4a);
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.polls-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border-color, #2a2a4a);
}

.polls-header h3 {
  margin: 0;
  font-size: 16px;
}

.btn-icon {
  background: none;
  border: none;
  color: var(--text-muted, #888);
  cursor: pointer;
  font-size: 18px;
  padding: 4px 8px;
  border-radius: 4px;
}

.btn-icon:hover {
  background: var(--bg-primary, #0a0a15);
  color: var(--text-primary, #fff);
}

.create-poll-btn {
  margin: 16px;
}

.polls-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 16px;
}

.polls-empty {
  text-align: center;
  color: var(--text-muted, #888);
  padding: 40px 0;
}

.poll-card {
  background: var(--bg-primary, #0a0a15);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

.poll-question {
  font-weight: 600;
  margin-bottom: 8px;
}

.poll-meta {
  font-size: 12px;
  color: var(--text-muted, #888);
  margin-bottom: 12px;
}

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

.poll-option {
  position: relative;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border-color, #2a2a4a);
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s;
}

.poll-option:hover {
  border-color: var(--accent-primary, #00ff88);
}

.poll-option.voted {
  border-color: var(--accent-primary, #00ff88);
}

.poll-option-bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: var(--accent-primary, #00ff88);
  opacity: 0.2;
  transition: width 0.3s;
}

.poll-option-text {
  position: relative;
  z-index: 1;
}

.poll-option-percent {
  position: relative;
  z-index: 1;
  float: right;
  font-size: 12px;
  color: var(--text-muted, #888);
}

.create-poll-form {
  padding: 16px;
}

.create-poll-form h4 {
  margin: 0 0 16px;
}

.create-poll-form .form-group {
  margin-bottom: 16px;
}

.create-poll-form input[type="text"],
.create-poll-form select {
  width: 100%;
  padding: 10px;
  background: var(--bg-primary, #0a0a15);
  border: 1px solid var(--border-color, #2a2a4a);
  border-radius: 6px;
  color: var(--text-primary, #fff);
  margin-bottom: 8px;
}

.create-poll-form .checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.create-poll-form .checkbox-label input {
  width: auto;
  margin: 0;
}

.btn-link {
  background: none;
  border: none;
  color: var(--accent-primary, #00ff88);
  cursor: pointer;
  padding: 4px 0;
  font-size: 13px;
}

.form-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.form-actions .btn {
  flex: 1;
}
.reminders-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.reminders-panel {
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border-color, #2a2a4a);
  border-radius: 12px;
  width: 480px;
  max-width: 90vw;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.reminders-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color, #2a2a4a);
}

.reminders-header h3 {
  margin: 0;
}

.reminders-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.reminders-loading,
.reminders-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-muted, #888);
}

.reminders-empty-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 16px;
}

.reminders-hint {
  font-size: 13px;
  color: var(--text-muted, #666);
}

.reminder-card {
  background: var(--bg-primary, #0a0a15);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
  position: relative;
}

.reminder-original {
  margin-bottom: 8px;
}

.reminder-author {
  font-weight: 600;
  color: var(--accent-primary, #00ff88);
  margin-right: 8px;
}

.reminder-message {
  color: var(--text-muted, #888);
  font-size: 13px;
}

.reminder-note {
  font-size: 13px;
  color: var(--text-primary, #fff);
  background: var(--bg-secondary, #1a1a2e);
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.reminder-time {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted, #888);
}

.reminder-when {
  color: var(--accent-primary, #00ff88);
}

.btn-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-muted, #888);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.reminder-card:hover .btn-remove {
  opacity: 1;
}

.btn-remove:hover {
  background: var(--danger, #ff6b6b);
  color: var(--text-primary);
}

.reminder-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.reminder-modal {
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border-color, #2a2a4a);
  border-radius: 12px;
  width: 400px;
  max-width: 90vw;
  padding: 24px;
}

.reminder-modal h3 {
  margin: 0 0 8px;
}

.reminder-message-preview {
  color: var(--text-muted, #888);
  font-size: 13px;
  margin-bottom: 20px;
}

.reminder-modal .form-group {
  margin-bottom: 16px;
}

.reminder-modal .form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--text-muted, #888);
}

.reminder-modal .form-group input {
  width: 100%;
  padding: 10px;
  background: var(--bg-primary, #0a0a15);
  border: 1px solid var(--border-color, #2a2a4a);
  border-radius: 6px;
  color: var(--text-primary, #fff);
}

.reminder-modal .form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.reminder-modal .form-actions .btn {
  flex: 1;
}
.pinned-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.pinned-panel {
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border-color, #2a2a4a);
  border-radius: 12px;
  width: 500px;
  max-width: 90vw;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pinned-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color, #2a2a4a);
}

.pinned-header h3 {
  margin: 0;
}

.pinned-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.pinned-loading,
.pinned-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-muted, #888);
}

.pinned-empty-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 16px;
}

.pinned-card {
  background: var(--bg-primary, #0a0a15);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
  position: relative;
}

.pinned-content {
  margin-bottom: 10px;
  line-height: 1.5;
}

.pinned-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted, #888);
}

.btn-unpin {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 16px;
}

.pinned-card:hover .btn-unpin {
  opacity: 1;
}

.btn-unpin:hover {
  transform: scale(1.2);
}
.system-message-container {
  display: flex;
  padding: 4px 0;
  margin: 4px 0;
  align-items: flex-start;
}

.system-message-line {
  flex: 0 0 20px;
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

.system-message-bar {
  width: 4px;
  height: 100%;
  border-radius: 2px;
  min-height: 20px;
}

.system-message-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.system-message-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.system-message-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.system-message-body {
  color: #B9BBBE;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
}

.system-message-body strong {
  color: var(--text-primary);
  font-weight: 600;
}

.system-message-body code {
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 4px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 12px;
}

.system-message-timestamp {
  color: #72767D;
  font-size: 11px;
  margin-top: 2px;
}

.system-message-embed {
  background: rgba(0, 0, 0, 0.2);
  border-left: 4px solid #5865F2;
  border-radius: 4px;
  padding: 12px;
  margin-top: 8px;
  max-width: 400px;
}

.embed-title {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.embed-description {
  color: #B9BBBE;
  font-size: 13px;
  line-height: 1.4;
}

.embed-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.embed-field {
  flex: 1;
  min-width: 150px;
}

.embed-field.inline {
  flex: 0 0 auto;
  width: auto;
}

.embed-field-name {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
}

.embed-field-value {
  color: #B9BBBE;
  font-size: 13px;
}

.embed-footer {
  color: #72767D;
  font-size: 11px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}.fp {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

/* Image grid */
.fp-grid {
  display: grid;
  gap: 4px;
  border-radius: 12px;
  overflow: hidden;
}
.fp-grid.cols-1 { grid-template-columns: 1fr; }
.fp-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.fp-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.fp-grid.cols-4 { grid-template-columns: 1fr 1fr; }
.fp-grid.cols-4 .fp-img-tile:first-child {
  grid-column: 1 / -1;
}

/* Image tile */
.fp-img-tile {
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.1);
  aspect-ratio: auto;
  max-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
}
.fp-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter 0.2s;
  display: block;
  min-height: 100px;
  image-rendering: auto;
}
.fp-img-tile:hover .fp-img {
  filter: brightness(1.1);
}
.fp-img-skeleton {
  width: 100%;
  padding-bottom: 56.25%;
  background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--bg-hover) 50%, var(--bg-tertiary) 100%);
  background-size: 200% 100%;
  animation: fp-shimmer 1.5s infinite;
}
@keyframes fp-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.fp-img-error {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: var(--bg-tertiary);
}

/* Single image in grid */
.fp-grid.cols-1 .fp-img-tile {
  max-height: 500px;
  border-radius: 12px;
  width: fit-content;
  max-width: min(100%, 560px);
  background: rgba(0, 0, 0, 0.06);
}
.fp-grid.cols-1 .fp-img {
  object-fit: contain;
  background: transparent;
  height: auto;
  min-height: 0;
  border-radius: 12px;
  image-rendering: auto;
}

/* Lightbox */
.fp-lb {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fp-lb-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
}
.fp-lb-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  max-width: 90vw;
  max-height: 85vh;
  overflow: visible;
}
.fp-lb-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  user-select: none;
  -webkit-user-drag: none;
  image-rendering: auto;
}

.fp-lb-zoom {
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}
.fp-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.08);
  border: none;
  color: var(--text-primary);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 2;
}
.fp-lb-nav:hover { background: rgba(255,255,255,0.2); }
.fp-lb-nav svg { width: 24px; height: 24px; }
.fp-lb-prev { left: -56px; }
.fp-lb-next { right: -56px; }
.fp-lb-footer {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  z-index: 1;
  white-space: nowrap;
}
.fp-lb-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255,255,255,0.08);
  border: none;
  color: var(--text-primary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 2;
}
.fp-lb-close:hover { background: rgba(255,255,255,0.2); }
.fp-lb-close svg { width: 20px; height: 20px; }

/* Text preview */
.fp-txt {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-secondary);
}
.fp-txt-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
}
.fp-txt-name {
  flex: 1;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.fp-txt-lang {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(88, 101, 242, 0.15);
  color: #8b9bff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.fp-txt-size {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.fp-txt-dl {
  color: var(--text-muted);
  padding: 4px;
  border-radius: 4px;
  display: flex;
  transition: color 0.15s, background 0.15s;
}
.fp-txt-dl:hover { color: var(--accent-primary); background: rgba(255,255,255,0.05); }
.fp-txt-code {
  display: flex;
  overflow: auto;
  max-height: 200px;
  background: var(--bg-primary);
}
.fp-txt-lines {
  display: flex;
  flex-direction: column;
  padding: 12px 8px 12px 12px;
  text-align: right;
  user-select: none;
  color: rgba(255,255,255,0.18);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  line-height: 1.6;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.fp-txt-body {
  margin: 0;
  padding: 12px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
  overflow-x: auto;
  white-space: pre;
  background: transparent;
  flex: 1;
  min-width: 0;
}
.fp-txt-loading {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  background: var(--bg-primary);
}
.fp-txt-loading::after {
  content: 'Loading preview...';
  opacity: 0.6;
}
.fp-txt-err {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  background: var(--bg-primary);
}
.fp-txt-more {
  display: block;
  width: 100%;
  padding: 8px;
  border: none;
  border-top: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--accent-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
}
.fp-txt-more:hover { filter: brightness(1.2); }

/* File card */
.fp-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.15s, border-color 0.15s;
  max-width: 400px;
}
.fp-card:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-primary);
}
.fp-card-icon {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
}
.fp-card-ext {
  position: absolute;
  bottom: 2px;
  font-size: 8px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fp-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fp-card-name {
  font-weight: 500;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fp-card-size {
  font-size: 11px;
  color: var(--text-muted);
}
.fp-card-dl {
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.fp-card:hover .fp-card-dl { opacity: 1; color: var(--accent-primary); }

/* Media placeholder */
.fp-media {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-muted);
  max-width: 400px;
}
.fp-media-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fp-media-size {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
/* Message Group - Discord-style layout */
.msg-group {
  display: flex;
  padding: 4px 16px;
  gap: 16px;
  position: relative;
  min-height: 40px;
}

.msg-group:hover {
  background: rgba(255, 255, 255, 0.02);
}

.msg-group.own-group .msg-author-name {
  color: var(--accent-primary);
}

/* Avatar column */
.msg-avatar-col {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
}

/* Content column */
.msg-content-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  flex: 1;
  gap: 2px;
}

/* Header row */
.msg-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  line-height: 1.2;
  padding-top: 4px;
}

.msg-author-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 15px;
  cursor: pointer;
  transition: filter 0.15s;
}

.msg-author-name:hover {
  text-decoration: underline;
  filter: brightness(1.2);
}

/* User Tag - Discord-style pill badge */
.user-tag,
.msg-custom-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  line-height: 1.2;
  flex-shrink: 0;
  backdrop-filter: blur(2px);
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-tag-icon,
.msg-custom-tag .tag-icon {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  object-fit: cover;
}

.user-tag.tag-effect-glow,
.msg-custom-tag.tag-effect-glow {
  animation: tagGlow 2s ease-in-out infinite alternate;
}

.user-tag.tag-effect-rainbow,
.msg-custom-tag.tag-effect-rainbow {
  background: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff, #ff0000);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbowShift 3s linear infinite;
  border-color: transparent !important;
}

.user-tag.tag-effect-neon,
.msg-custom-tag.tag-effect-neon {
  box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
  animation: neonPulse 1.5s ease-in-out infinite alternate;
}

.user-tag.tag-effect-sparkle,
.msg-custom-tag.tag-effect-sparkle {
  position: relative;
}

.user-tag.tag-effect-sparkle::after,
.msg-custom-tag.tag-effect-sparkle::after {
  content: '✨';
  font-size: 10px;
  margin-left: 2px;
}

.user-tag.tag-effect-pulse,
.msg-custom-tag.tag-effect-pulse {
  animation: tagPulse 1s ease-in-out infinite;
}

/* Shimmer - metallic sheen sweep */
.user-tag.tag-effect-shimmer,
.msg-custom-tag.tag-effect-shimmer {
  background: linear-gradient(
    90deg,
    currentColor 0%,
    #fff 40%,
    currentColor 60%,
    currentColor 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 2.5s ease-in-out infinite;
  border-color: transparent !important;
}

/* Fire - flickering flame gradient */
.user-tag.tag-effect-fire,
.msg-custom-tag.tag-effect-fire {
  background: linear-gradient(180deg, #ff4500 0%, #ff8c00 30%, #ffd700 60%, #ff4500 100%);
  background-size: 100% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fireFlicker 1.2s ease-in-out infinite alternate;
  border-color: #ff4500 !important;
  text-shadow: 0 0 8px rgba(255, 69, 0, 0.6), 0 0 16px rgba(255, 140, 0, 0.4);
}

/* Frost - icy crystal glow */
.user-tag.tag-effect-frost,
.msg-custom-tag.tag-effect-frost {
  color: #88ddff !important;
  border-color: rgba(136, 221, 255, 0.5) !important;
  text-shadow: 0 0 5px rgba(136, 221, 255, 0.6), 0 0 10px rgba(136, 221, 255, 0.3);
  background: linear-gradient(135deg, rgba(136, 221, 255, 0.1), rgba(255, 255, 255, 0.15));
  animation: frostGlow 3s ease-in-out infinite alternate;
}

/* Gradient - animated background gradient fill */
.user-tag.tag-effect-gradient,
.msg-custom-tag.tag-effect-gradient {
  border: none !important;
  background: linear-gradient(135deg, currentColor, #666);
  color: var(--text-on-accent) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  animation: gradientShift 3s ease-in-out infinite alternate;
}

/* Shadow - animated 3D shadow lift */
.user-tag.tag-effect-shadow,
.msg-custom-tag.tag-effect-shadow {
  border-color: transparent !important;
  text-shadow:
    1px 1px 0 rgba(0,0,0,0.3),
    2px 2px 0 rgba(0,0,0,0.2),
    3px 3px 0 rgba(0,0,0,0.15),
    4px 4px 0 rgba(0,0,0,0.1);
  animation: shadowHover 2s ease-in-out infinite alternate;
}

@keyframes shimmer {
  0% { background-position: 300% center; }
  100% { background-position: -300% center; }
}

@keyframes fireFlicker {
  0% { background-position: 0% 0%; filter: brightness(1); }
  50% { filter: brightness(1.3); }
  100% { background-position: 0% 100%; filter: brightness(0.9); }
}

@keyframes frostGlow {
  0% { box-shadow: 0 0 3px rgba(136, 221, 255, 0.3), inset 0 0 3px rgba(136, 221, 255, 0.1); }
  100% { box-shadow: 0 0 12px rgba(136, 221, 255, 0.6), inset 0 0 8px rgba(136, 221, 255, 0.2); }
}

@keyframes gradientShift {
  0% { filter: hue-rotate(0deg) brightness(1); }
  100% { filter: hue-rotate(30deg) brightness(1.1); }
}

@keyframes shadowHover {
  0% { transform: translateY(0px); text-shadow: 1px 1px 0 rgba(0,0,0,0.3), 2px 2px 0 rgba(0,0,0,0.2), 3px 3px 0 rgba(0,0,0,0.15); }
  100% { transform: translateY(-1px); text-shadow: 1px 2px 0 rgba(0,0,0,0.3), 2px 4px 0 rgba(0,0,0,0.2), 3px 6px 0 rgba(0,0,0,0.15), 4px 8px 0 rgba(0,0,0,0.1); }
}

@keyframes glow {
  from { text-shadow: 0 0 5px currentColor, 0 0 10px currentColor; }
  to { text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor; }
}

@keyframes rainbowShift {
  to { background-position: 200% center; }
}

@keyframes neonPulse {
  from { opacity: 0.8; }
  to { opacity: 1; box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor; }
}

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

/* Badges */
.msg-badges {
  display: flex;
  gap: 4px;
  align-items: center;
}

.msg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: transform 0.2s ease, filter 0.2s ease;
  cursor: default;
}

.msg-badge svg, .msg-badge img {
  width: 16px;
  height: 16px;
}

.msg-badge:hover {
  transform: scale(1.25);
  filter: brightness(1.3) drop-shadow(0 0 4px currentColor);
}

/* Timestamp */
.msg-timestamp {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  cursor: default;
}

.msg-compact-time {
  position: absolute;
  left: 76px;
  top: 4px;
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.1s;
  pointer-events: none;
}

.msg-group.own-group .msg-compact-time {
  left: auto;
  right: 76px;
}

.msg-group:hover .msg-compact-time {
  opacity: 1;
}

/* Reply preview */
.msg-reply-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin: 2px 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  border-left: 2px solid var(--accent-primary);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s;
  max-width: 400px;
}

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

.msg-reply-preview svg {
  color: var(--accent-primary);
  flex-shrink: 0;
}

.msg-reply-author {
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.msg-reply-content {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-reply-preview.deleted .msg-reply-content {
  font-style: italic;
  opacity: 0.7;
}

.msg-forwarded-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin: 2px 0;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  border-left: 2px solid #fbbf24;
  font-size: 12px;
}

.msg-forwarded-badge svg {
  color: #fbbf24;
  flex-shrink: 0;
}

.msg-forwarded-label {
  color: var(--text-muted);
}

.msg-forwarded-label strong {
  color: var(--text-secondary);
}

/* Message body */
.msg-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Message bubble */
.msg-bubble {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 2px 0;
  min-height: 24px;
}

.msg-bubble:hover .msg-actions {
  opacity: 1 !important;
}

/* Message text */
.msg-text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
}

.msg-edited-tag {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}

.msg-pinned-tag {
  font-size: 10px;
  color: var(--accent-primary);
}

/* Attachments */
.msg-attachments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.msg-attachment {
  max-width: 400px;
}

.msg-attachment-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
}

.msg-attachment-image:hover {
  transform: scale(1.02);
  filter: brightness(1.1);
}

.msg-file-attachment {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.15s;
  max-width: 300px;
}

.msg-file-attachment:hover {
  background: var(--bg-hover);
}

.msg-filename {
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-filesize {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Message actions */
.msg-actions {
  display: flex;
  gap: 2px;
  position: absolute;
  top: -16px;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px;
  transition: opacity 0.15s;
  z-index: 10;
}

.msg-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-size: 14px;
}

.msg-actions button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.msg-actions button svg {
  width: 14px;
  height: 14px;
}

/* Message status indicators */
.msg-status {
  display: flex;
  align-items: center;
  margin-left: 4px;
  height: 16px;
}

.status-icon {
  display: flex;
  align-items: center;
  line-height: 1;
}

.status-icon.sending {
  color: var(--text-muted);
}

.status-spinner {
  animation: statusSpin 0.8s linear infinite;
}

.status-icon.sent {
  color: var(--text-muted);
  animation: statusFadeOut 3s ease forwards;
  opacity: 1;
}

.status-icon.read {
  color: var(--accent-primary);
  animation: statusFadeOut 3s ease forwards;
  opacity: 1;
}

.status-icon.read.visible {
  color: var(--accent-primary);
}

.status-doublecheck {
  margin-left: -2px;
}

@keyframes statusSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes statusFadeOut {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* Reactions */
.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.msg-reaction-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  animation: reactionPop 0.3s ease-out;
}

.msg-reaction-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  transform: scale(1.05);
}

.msg-reaction-btn.reaction-animated:hover {
  animation: reactionBounce 0.5s ease;
}

.msg-reaction-emoji {
  font-size: 18px;
  line-height: 1;
}

.msg-reaction-count {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}

@keyframes reactionPop {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes reactionBounce {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.2); }
  50% { transform: scale(0.95); }
  75% { transform: scale(1.05); }
}

.styled-emoji.animated {
  display: inline-flex;
  animation: emojiFloat 2s ease-in-out infinite;
}

@keyframes emojiFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Edit form */
.msg-edit-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.msg-edit-textarea {
  width: 100%;
  min-height: 60px;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--accent-primary);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
  resize: vertical;
  font-family: inherit;
}

.msg-edit-textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.2);
}

.msg-edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.msg-edit-hint {
  font-size: 11px;
  color: var(--text-muted);
  flex: 1;
}

.msg-cancel-btn, .msg-save-btn {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.msg-cancel-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.msg-cancel-btn:hover {
  background: var(--bg-hover);
}

.msg-save-btn {
  background: var(--accent-primary);
  border: none;
  color: var(--bg-primary);
}

.msg-save-btn:hover {
  filter: brightness(1.1);
}

.msg-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Highlight animation for replied messages */
.highlight-reply {
  animation: highlight-pulse 2s ease-out;
}

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

@keyframes highlight-pulse {
  0% { background: rgba(0, 255, 136, 0.3); }
  100% { background: transparent; }
}

/* Sending state */
.msg-bubble.sending {
  opacity: 0.7;
  position: relative;
}

.msg-bubble.sending::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent-primary), transparent);
  animation: sendingPulse 1.5s ease-in-out infinite;
  border-radius: 1px;
}

.msg-bubble.sent {
  animation: messageConfirmFlash 0.6s ease-out;
}

.msg-bubble.failed {
  border: 1px solid var(--danger);
  border-radius: 4px;
  padding: 4px;
}

@keyframes sendingPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@keyframes messageConfirmFlash {
  0% { background: rgba(0, 255, 136, 0.15); }
  100% { background: transparent; }
}

/* Pinned state */
.msg-bubble.pinned {
  background: rgba(255, 215, 0, 0.05);
  border-left: 2px solid #ffd700;
  padding-left: 8px;
}

/* Selected state */
.msg-bubble.selected {
  background: rgba(0, 255, 136, 0.1);
  border-left: 2px solid var(--accent, #00ff88);
  padding-left: 8px;
  border-radius: 4px;
}

/* Image modal */
.image-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.image-modal-content {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  cursor: default;
}

.image-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--text-on-accent);
  font-size: 32px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Media embeds - YouTube, Spotify, Twitch, SoundCloud */
.media-embeds {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.youtube-embed, .spotify-embed, .twitch-embed, .soundcloud-embed {
  position: relative;
  width: 100%;
  max-width: 560px;
  border-radius: 8px;
  overflow: hidden;
}

.youtube-embed iframe {
  width: 100%;
  height: 315px;
  border: none;
}

.spotify-embed iframe {
  width: 100%;
  height: 152px;
  border: none;
}

.twitch-embed iframe {
  width: 100%;
  height: 300px;
  border: none;
}

.soundcloud-embed iframe {
  width: 100%;
  height: 166px;
  border: none;
}

.video-embed {
  margin-top: 8px;
}

.video-embed video {
  max-width: 400px;
  max-height: 300px;
  border-radius: 8px;
}

.media-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 4px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 12px;
}

.media-download-btn:hover {
  background: var(--bg-hover);
}

/* GIF handling - ensure GIFs render as images */
.msg-attachment-image {
  max-width: 400px;
  max-height: 300px;
  border-radius: 8px;
  cursor: pointer;
  object-fit: contain;
}

/* Link previews */
.link-previews {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Sending state on msg-group */
.msg-group.msg-sending .msg-author-name,
.msg-group.msg-sending .user-tag,
.msg-group.msg-sending .msg-custom-tag,
.msg-group.msg-sending .msg-badges {
  opacity: 0.5;
  filter: grayscale(0.6);
}

.msg-group.msg-sending .msg-author-name {
  color: var(--text-muted);
}

/* Responsive */
@media (max-width: 768px) {
  .msg-group {
    padding: 4px 8px;
    gap: 10px;
  }
  .msg-avatar-col .avatar {
    width: 32px !important;
    height: 32px !important;
  }
  .msg-header {
    gap: 4px;
  }
  .msg-author-name {
    font-size: 13px;
  }
  .user-tag, .msg-custom-tag {
    font-size: 9px;
    padding: 1px 5px;
    max-width: 60px;
  }
  .msg-timestamp {
    font-size: 10px;
  }
  .msg-text {
    font-size: 13px;
  }
  .msg-attachment {
    max-width: 100%;
  }
  .msg-attachment-image {
    max-width: 100%;
    max-height: 200px;
  }
  .msg-file-attachment {
    max-width: 100%;
    padding: 10px 12px;
  }
  .msg-actions {
    top: -12px;
    right: 4px;
    padding: 2px;
  }
  .msg-actions button {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .msg-actions button svg {
    width: 12px;
    height: 12px;
  }
  .msg-reply-preview {
    max-width: 100%;
    font-size: 11px;
  }
  .msg-compact-time {
    display: none;
  }
  .youtube-embed iframe {
    height: 200px;
  }
  .twitch-embed iframe {
    height: 200px;
  }
  .spotify-embed iframe {
    height: 80px;
  }
  .soundcloud-embed iframe {
    height: 120px;
  }
  .video-embed video {
    max-width: 100%;
    max-height: 200px;
  }
  .image-modal-content {
    max-width: 95vw;
    max-height: 80vh;
  }
}

@media (max-width: 480px) {
  .msg-group {
    padding: 3px 6px;
    gap: 8px;
    min-height: 32px;
  }
  .msg-avatar-col .avatar {
    width: 28px !important;
    height: 28px !important;
  }
  .msg-avatar-col {
    padding-top: 2px;
  }
  .msg-header {
    padding-top: 2px;
  }
  .msg-author-name {
    font-size: 12px;
  }
  .user-tag, .msg-custom-tag {
    font-size: 8px;
    padding: 1px 4px;
    max-width: 50px;
  }
  .msg-text {
    font-size: 12px;
    line-height: 1.4;
  }
  .msg-bubble {
    min-height: 20px;
  }
  .msg-attachment-image {
    max-height: 150px;
  }
  .msg-reactions {
    gap: 4px;
  }
  .msg-reaction-btn {
    padding: 4px 8px;
    font-size: 12px;
  }
  .msg-reaction-emoji {
    font-size: 15px;
  }
  .msg-reaction-count {
    font-size: 11px;
  }
  .msg-file-attachment {
    padding: 8px 10px;
    gap: 8px;
  }
  .msg-filename {
    font-size: 12px;
  }
  .msg-filesize {
    font-size: 10px;
  }
  .youtube-embed iframe {
    height: 160px;
  }
  .twitch-embed iframe {
    height: 160px;
  }
}

@media (max-width: 360px) {
  .msg-group {
    padding: 2px 4px;
  }
  .msg-header {
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .msg-timestamp {
    flex-shrink: 0;
  }
  .user-tag, .msg-custom-tag {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .msg-group {
    padding: 2px 12px;
    min-height: 28px;
  }
  .msg-avatar-col .avatar {
    width: 24px !important;
    height: 24px !important;
  }
  .msg-author-name {
    font-size: 12px;
  }
  .msg-text {
    font-size: 12px;
  }
  .msg-attachment-image {
    max-height: 120px;
  }
}.voice-call-popup {
  position: fixed;
  width: 320px;
  height: 400px;
  background: #2f3136;
  border: 1px solid #202225;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: move;
  user-select: none;
  transition: all 0.3s ease;
}

.voice-call-popup.fullscreen {
  width: 100vw;
  height: 100vh;
  top: 0 !important;
  left: 0 !important;
  border-radius: 0;
  z-index: 99999;
}

.voice-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #202225;
  border-bottom: 1px solid #1a1c20;
  cursor: move;
}

.voice-popup-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.voice-action-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.voice-action-btn:hover {
  background: #36393f;
  color: var(--text-secondary);
}

.voice-popup-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 14px;
}

.voice-icon-svg {
  width: 18px;
  height: 18px;
  stroke: #3ba55d;
  fill: none;
}

.call-timer {
  background: #36393f;
  color: #3ba55d;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
}

.voice-connected-dot {
  width: 8px;
  height: 8px;
  background: #3ba55d;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

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

.voice-popup-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background 0.2s;
}

.voice-popup-close:hover {
  background: #36393f;
  color: var(--text-secondary);
}

.voice-users-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.voice-user-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 8px;
  background: #36393f;
  transition: background 0.2s;
}

.voice-user-item:hover {
  background: #3a3d44;
}

.voice-user-item.speaking {
  background: #3a3d44;
  animation: speakGlow 1s ease-in-out;
}

@keyframes speakGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 165, 93, 0); }
  50% { box-shadow: 0 0 20px 5px rgba(59, 165, 93, 0.5); }
}

.voice-user-avatar {
  position: relative;
  display: flex;
  align-items: center;
}

.voice-user-avatar.speaking-glow {
  filter: drop-shadow(0 0 8px rgba(59, 165, 93, 0.8));
  animation: avatarGlow 0.5s ease-in-out infinite;
}

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

.voice-status-icon {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 12px;
  background: #2f3136;
  border-radius: 50%;
  padding: 2px;
}

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

.voice-user-status {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #72767d;
}

.status-text {
  background: #36393f;
  padding: 2px 6px;
  border-radius: 4px;
}

.speaking-text {
  color: #3ba55d;
  font-weight: 600;
  animation: speakPulse 1s infinite;
}

@keyframes speakPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.voice-no-users {
  text-align: center;
  color: #72767d;
  padding: 32px;
  font-size: 14px;
}

.voice-video-container {
  width: 100%;
  height: 200px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-local-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voice-screen-container {
  width: 100%;
  height: 300px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #1a1c20;
}

.voice-screen-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.voice-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: #202225;
  border-top: 1px solid #1a1c20;
}

.voice-control-btn {
  background: #36393f;
  border: none;
  color: var(--text-secondary);
  font-size: 18px;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 40px;
}

.voice-control-btn:hover {
  background: #4a4d54;
}

.voice-control-btn.active {
  background: #ed4245;
}

.voice-control-btn.leave-btn {
  background: #ed4245;
  color: var(--text-on-accent);
  font-size: 14px;
  padding: 8px 16px;
}

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

.auto-end-warning {
  background: #ed4245;
  color: var(--text-on-accent);
  padding: 8px 12px;
  font-size: 13px;
  text-align: center;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.voice-options-dropdown {
  position: relative;
}

.voice-options-dropdown:hover .voice-options-menu {
  display: block;
}

.voice-options-menu {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #36393f;
  border: 1px solid #202225;
  border-radius: 4px;
  padding: 8px;
  min-width: 180px;
  z-index: 1000;
}

.voice-option-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 13px;
}

.voice-option-item:hover {
  background: #40444b;
}

.voice-option-item input[type="checkbox"] {
  cursor: pointer;
}

.screen-selector-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
}

.screen-selector-content {
  background: #2f3136;
  border-radius: 8px;
  padding: 24px;
  min-width: 300px;
  max-width: 500px;
}

.screen-selector-content h3 {
  color: var(--text-secondary);
  margin: 0 0 16px 0;
  font-size: 16px;
}

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

.screen-option {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #36393f;
  border: 1px solid #202225;
  border-radius: 4px;
  padding: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.2s;
}

.screen-option:hover {
  background: #40444b;
}

.screen-icon {
  font-size: 24px;
}

.screen-cancel {
  background: #4a4d54;
  border: none;
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s;
}

.screen-cancel:hover {
  background: #5a5d64;
}

.voice-call-btn.active svg {
  stroke: #ed4245;
}

.dm-header-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.voice-call-btn {
  background: none;
  border: none;
  color: #3ba55d;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: background 0.2s;
}

.voice-call-btn:hover {
  background: rgba(59, 165, 93, 0.1);
}

.voice-call-btn.active {
  color: #ed4245;
}

.voice-call-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}
.channel-page {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
  height: 100%;
  width: 100%;
}

/* ============================================
   RESPONSIVE CHANNEL STYLES
   ============================================ */

/* Mobile - fluid responsive layout */
@media screen and (max-width: 479px) {
  .channel-page {
    width: 100%;
    height: 100%;
  }
  
  .channel-header {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .channel-title {
    font-size: 15px;
  }
  
  .channel-description {
    font-size: 11px;
    width: 100%;
  }
  
  .header-actions {
    display: flex;
    gap: 4px;
  }
  
  .action-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  
  .messages-container {
    padding: 8px;
    gap: 8px;
  }
  
  .message {
    padding: 6px 8px;
    gap: 8px;
  }
  
  .message-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
  
  .message-author {
    font-size: 13px;
  }
  
  .message-content {
    font-size: 13px;
    line-height: 1.4;
  }
  
  .message-time {
    font-size: 10px;
  }
  
  .message-input-container {
    padding: 8px;
    gap: 6px;
  }
  
  .message-input {
    padding: 10px 12px;
    font-size: 14px;
    min-height: 40px;
    max-height: 100px;
  }
  
  .input-actions {
    gap: 4px;
  }
  
  .input-action-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  
  .upload-preview-modal {
    width: 95%;
    max-width: none;
    margin: 10px;
    padding: 16px;
  }
  
  .upload-preview-image {
    max-height: 200px;
    object-fit: contain;
  }
  
  .typing-indicator {
    padding: 4px 12px;
    font-size: 11px;
  }
  
  .reply-banner {
    padding: 8px 12px;
  }
  
  .reply-info {
    font-size: 12px;
  }
  
  .channel-sidebar {
    width: 60px;
    min-width: 60px;
    display: flex;
  }
}

/* Large phones */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .channel-header {
    padding: 12px 16px;
  }
  
  .channel-title {
    font-size: 16px;
  }
  
  .messages-container {
    padding: 10px;
  }
  
  .message {
    padding: 8px 10px;
    gap: 10px;
  }
  
  .message-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
  
  .message-content {
    font-size: 14px;
  }
  
  .message-input-container {
    padding: 10px 12px;
  }
  
  .message-input {
    padding: 12px 14px;
  }
  
  .channel-sidebar {
    display: none;
  }
  
  .channel-sidebar.open {
    display: flex;
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 260px;
    z-index: 1001;
  }
}

/* Tablets */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .channel-header {
    padding: 14px 20px;
  }
  
  .channel-title {
    font-size: 17px;
  }
  
  .message-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
  
  .message-content {
    font-size: 14px;
  }
  
  .channel-sidebar {
    width: 200px;
    min-width: 200px;
  }
}

/* Small desktop */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .channel-sidebar {
    width: 220px;
    min-width: 220px;
  }
  
  .messages-container {
    padding: 12px 16px;
  }
}

/* Standard desktop */
@media screen and (min-width: 1280px) {
  .channel-header {
    padding: 16px 24px;
  }
  
  .channel-title {
    font-size: 18px;
  }
  
  .message {
    padding: 8px 16px;
    gap: 12px;
  }
  
  .message-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
  
  .message-content {
    font-size: 15px;
    line-height: 1.5;
  }
  
  .message-input {
    padding: 14px 18px;
    font-size: 15px;
  }
  
  .channel-sidebar {
    width: 240px;
    min-width: 240px;
  }
}

/* Large desktop */
@media screen and (min-width: 1536px) {
  .channel-header {
    padding: 20px 32px;
  }
  
  .message {
    padding: 12px 20px;
    gap: 16px;
  }
  
  .message-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }
  
  .message-content {
    font-size: 16px;
  }
  
  .message-input {
    padding: 16px 20px;
  }
  
  .channel-sidebar {
    width: 280px;
    min-width: 280px;
  }
}

/* Landscape on mobile */
@media screen and (orientation: landscape) and (max-height: 450px) {
  .channel-header {
    padding: 8px 12px;
  }
  
  .channel-title {
    font-size: 14px;
  }
  
  .message {
    padding: 4px 8px;
    gap: 6px;
  }
  
  .message-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }
  
  .message-content {
    font-size: 12px;
  }
  
  .message-input-container {
    padding: 6px 8px;
  }
  
  .message-input {
    padding: 8px 10px;
    max-height: 60px;
  }
  
  .typing-indicator {
    padding: 2px 8px;
    font-size: 10px;
  }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
  .message {
    min-height: 44px;
  }
  
  .message-input {
    min-height: 44px;
  }
  
  .action-btn,
  .input-action-btn {
    min-width: 40px;
    min-height: 40px;
  }
}

.channel-page .channel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}

.channel-header {
  padding: 16px 24px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.channel-title {
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.channel-hash {
  color: var(--text-muted);
}

.channel-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.member-count {
  font-size: 12px;
  color: var(--text-muted);
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 24px;
  min-height: 0;
  height: 100%;
  transition: background-color 0.2s ease;
}

.messages-container.dragging {
  background: rgba(0, 255, 136, 0.05);
  border: 2px dashed var(--accent-primary);
}

.messages-container::-webkit-scrollbar { width: 6px; }
.messages-container::-webkit-scrollbar-track { background: var(--bg-secondary); }
.messages-container::-webkit-scrollbar-thumb { background: var(--accent-primary); border-radius: 3px; }
.messages-container::-webkit-scrollbar-thumb:hover { background: var(--accent-secondary); }

.message-group {
  margin-bottom: 16px;
}

.date-divider {
  display: flex;
  align-items: center;
  margin: 24px 0;
}

.date-divider::before,
.date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.date-divider span {
  padding: 0 16px;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.message {
  display: flex;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.message:hover {
  background: var(--bg-secondary);
}

/* Message hover triggers avatar and name effects */
.message:hover .avatar-wrapper[data-effect]:not([data-effect="none"]) {
  animation-play-state: running !important;
}

.message:hover .username[data-name-effect]:not([data-name-effect="none"]) {
  animation-play-state: running !important;
}

.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-avatar span {
  font-weight: 600;
  color: var(--accent-primary);
}

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

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

.message-author {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
}

.message-badge {
  font-size: 10px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
}

.message-badge.badge-owner { background: linear-gradient(135deg, #FFD700, #FF6B00); color: #1a1a2e; }
.message-badge.badge-admin { background: linear-gradient(135deg, #5865F2, #4752C4); color: var(--text-on-accent); }
.message-badge.badge-moderator { background: linear-gradient(135deg, #00FF88, #00CC6A); color: #1a1a2e; }
.message-badge.badge-verified { background: linear-gradient(135deg, #00D9FF, #0099FF); color: var(--text-on-accent); }
.message-badge.badge-contributor { background: linear-gradient(135deg, #9B59B6, #8E44AD); color: var(--text-on-accent); }

.message-badges {
  display: inline-flex;
  gap: 3px;
  margin-left: 4px;
  align-items: center;
}

.message-badge-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.message-badge-icon svg {
  width: 14px;
  height: 14px;
}

.message-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

.edited-tag {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

.message-text {
  color: var(--text-secondary);
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.message.sending {
  opacity: 0.5;
}

.message.sending .message-text {
  position: relative;
}

.message.sending::after {
  content: '';
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border: 2px solid var(--accent-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: messageSendingSpin 0.8s linear infinite;
}

@keyframes messageSendingSpin {
  to { transform: translateY(-50%) rotate(360deg); }
}

.message.failed {
  opacity: 0.7;
  background: rgba(239, 68, 68, 0.1);
  border-left: 3px solid #ef4444;
}

.message.failed .message-text {
  color: var(--text-muted);
}

.message-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  margin-left: 8px;
}

.message-status.failed {
  color: #ef4444;
}

.message-status.failed::before {
  content: '⚠';
}

.retry-btn {
  background: transparent;
  border: 1px solid #ef4444;
  color: #ef4444;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  margin-left: 8px;
}

.retry-btn:hover {
  background: rgba(239, 68, 68, 0.1);
}

.message.system-message {
  background: transparent;
  padding: 4px 16px;
  margin: 8px 0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* AI Message styling - distinct from regular system messages */
.message.system-message.ai-message {
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.1) 0%, rgba(0, 217, 255, 0.05) 100%);
  border: 1px solid rgba(88, 101, 242, 0.3);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 12px 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.message.system-message.ai-message::before {
  display: none;
}

.message.system-message.ai-message .ai-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 12px;
  flex-shrink: 0;
}

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

.message.system-message.ai-message .ai-name {
  font-weight: 600;
  color: var(--accent-primary);
  font-size: 14px;
}

.message.system-message.ai-message .ai-badge {
  background: linear-gradient(135deg, #5865F2, #00D9FF);
  color: var(--text-on-accent);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: 600;
}

.message.system-message.ai-message .message-content {
  display: block;
  padding-left: 48px;
}

.message.system-message.ai-message .system-message-content {
  color: var(--text-primary);
  line-height: 1.5;
  font-size: 14px;
}

.message.system-message::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-color), transparent);
  z-index: 0;
}

.message.system-message:hover {
  background: var(--bg-hover);
}

.message.system-message .message-content {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  padding: 4px 16px;
  border-radius: 20px;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.message.system-message .message-text {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
}

.message.system-message .message-header,
.message.system-message .message-actions,
.message.system-message .message-reactions {
  display: none;
}

.system-message-content {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
  padding: 6px 12px;
  background: var(--bg-secondary);
  border-radius: 20px;
  position: relative;
  z-index: 1;
}

.system-message-content a {
  color: var(--accent-primary);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.15s ease;
}

.system-message-content a:hover {
  text-decoration: underline;
  filter: brightness(1.2);
}

.system-message-icon {
  width: 18px;
  height: 18px;
  opacity: 0.8;
  flex-shrink: 0;
}

.system-message-icon.join {
  color: #00ff88;
}

.system-message-icon.leave {
  color: var(--text-muted);
}

.system-message-icon.add {
  color: #00ff88;
}

.system-message-icon.remove {
  color: #ff4757;
}

.system-message-icon.role-update {
  color: #ffd700;
}

.system-message-icon.announcement {
  color: var(--accent-primary);
}

.system-message-text {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.system-message-mention {
  color: var(--accent-primary);
  font-weight: 600;
  background: rgba(0, 255, 136, 0.1);
  padding: 0 4px;
  border-radius: 3px;
}

.system-message-timestamp {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 4px;
  font-weight: 400;
}

/* Enhanced system message animations */
.message.system-message {
  animation: systemMessageIn 0.3s ease;
}

@keyframes systemMessageIn {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.system-message-hover-effect {
  transition: all 0.2s ease;
}

.message.system-message:hover .system-message-hover-effect {
  filter: brightness(1.1);
}

/* Different system message types */
.system-message-type-join .system-message-icon {
  color: #00ff88;
  animation: pulseGreen 2s ease-in-out infinite;
}

.system-message-type-leave .system-message-icon {
  color: var(--text-muted);
}

.system-message-type-role .system-message-icon {
  color: #ffd700;
}

@keyframes pulseGreen {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* Thread system messages */
.system-message-thread {
  font-size: 12px;
  padding: 4px 12px;
}

.system-message-thread .system-message-icon {
  width: 14px;
  height: 14px;
}

.message .user-context-avatar.hidden {
  display: none;
}

.message-status-indicator {
  font-size: 11px;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.message-status-indicator.sending {
  color: var(--text-muted);
  animation: pulse 1s infinite;
}
.message-status-indicator.sent {
  color: var(--text-muted);
}
.message-status-indicator.delivered {
  color: var(--accent-primary);
}
.message-status-indicator.read {
  color: #22c55e;
}
.message-status-indicator.failed {
  color: #ef4444;
}

/* Typing Indicator in Chat */
.chat-typing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}
.typing-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.typing-username {
  font-weight: 600;
  color: var(--text-normal);
}
.typing-dots {
  display: inline-flex;
  gap: 3px;
}
.typing-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-primary);
  animation: typingBounce 1.4s infinite ease-in-out;
}
.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

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

/* Custom typing animations */
.typing-dots.pulse span {
  animation: typingPulse 1.5s infinite ease-in-out;
}
@keyframes typingPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

.typing-dots.wave span {
  animation: typingWave 1.2s infinite ease-in-out;
}
@keyframes typingWave {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}

.typing-dots.bounce span {
  animation: typingBounceAlt 0.6s infinite;
}
@keyframes typingBounceAlt {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.typing-indicator {
  padding: 8px 24px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 8px;
}

.typing-users-avatars {
  display: flex;
  margin-right: 4px;
}

.typing-users-avatars .typing-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: -8px;
  border: 2px solid var(--bg-primary);
}

.typing-users-avatars .typing-avatar:first-child {
  margin-left: 0;
}

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

.typing-dots span {
  width: 6px;
  height: 6px;
  background: var(--accent-primary);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typingBounce {
  0%, 80%, 100% { 
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% { 
    transform: scale(1);
    opacity: 1;
  }
}

.typing-text {
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.typing-username {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.typing-user-avatar {
  display: inline-flex;
  margin-right: -8px;
}

.typing-user-avatar:first-child {
  margin-left: 0;
}

.message-input-form {
  position: relative;
  padding: 16px 24px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.message-input {
  flex: 1;
  padding: 12px 0;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  font-family: inherit;
  resize: none;
  line-height: 1.4;
  max-height: 200px;
  min-height: 24px;
  overflow-y: auto;
  scrollbar-width: none;
}

.message-input::placeholder {
  color: var(--text-muted);
}

.send-btn {
  padding: 8px 16px;
  background: var(--accent-primary);
  color: var(--bg-primary);
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.15s ease;
  border: none;
  cursor: pointer;
}

.send-btn:hover:not(:disabled) {
  filter: brightness(1.1);
  box-shadow: 0 0 16px var(--accent-glow);
}

.send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--bg-hover);
}

.emoji-picker-btn {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text-muted);
  transition: all 0.15s;
}

.emoji-picker-btn:hover {
  color: var(--accent-primary);
  background: var(--bg-hover);
}

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

.action-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 16px;
  text-decoration: none;
}

.action-btn:hover {
  background: var(--bg-hover);
}

.search-bar {
  padding: 12px 24px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.search-bar input {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius);
}

.search-bar button {
  margin-top: 8px;
  padding: 8px 16px;
  background: var(--accent-primary);
  color: var(--bg-primary);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

.search-results-dropdown {
  position: absolute;
  top: 100%;
  left: 24px;
  right: 24px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  max-height: 300px;
  overflow-y: auto;
  z-index: 100;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
}

.search-result-item:hover {
  background: var(--bg-hover);
}

.search-author {
  font-weight: 500;
  color: var(--accent-primary);
}

.search-content {
  flex: 1;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-time {
  font-size: 12px;
  color: var(--text-muted);
}

.message.pinned {
  border-left: 3px solid var(--accent-primary);
}

.pinned-tag {
  font-size: 12px;
}

.message-reactions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.reaction {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.reaction:hover {
  border-color: var(--accent-primary);
}

.reaction.active {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.message-actions {
  display: none;
  gap: 4px;
  margin-top: 4px;
}

.message:hover .message-actions {
  display: flex;
}

.message-actions button {
  background: var(--bg-tertiary);
  border: none;
  padding: 4px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
}

.message-actions button:hover {
  background: var(--bg-hover);
}

.reactions-picker {
  position: absolute;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  gap: 4px;
  z-index: 10;
}

.reactions-picker button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.reactions-picker button:hover {
  background: var(--bg-hover);
}

/* Reply Indicator - Discord Style */
.reply-indicator {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  margin-bottom: 8px;
  border-left: 3px solid var(--accent-primary);
  position: relative;
}

.reply-indicator-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--accent-primary);
  font-size: 12px;
  font-weight: 600;
}

.reply-indicator-header svg {
  flex-shrink: 0;
}

.reply-indicator-author {
  color: var(--text-secondary);
}

.reply-jump-btn {
  margin-left: auto;
  padding: 2px 8px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--accent-primary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.reply-jump-btn:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--bg-primary);
}

.reply-indicator-body {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  padding: 4px;
  margin: -4px;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.reply-indicator-body:hover {
  background: rgba(255, 255, 255, 0.05);
}

.reply-indicator-bar {
  width: 3px;
  min-height: 32px;
  background: var(--accent-primary);
  border-radius: 2px;
  flex-shrink: 0;
  opacity: 0.7;
}

.reply-indicator-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.reply-author-avatar,
.reply-author-avatar-placeholder {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.reply-author-avatar-placeholder {
  background: var(--accent-primary);
  color: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
}

.reply-indicator-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reply-indicator-text .reply-author-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.reply-preview-text {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reply-cancel {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reply-cancel:hover {
  opacity: 1;
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Reply reference on messages - Discord Style */
.message-reply-reference {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  border-left: 2px solid var(--accent-primary);
}

.message-reply-reference:hover {
  background: rgba(0, 0, 0, 0.25);
}

.reply-reference-icon {
  color: var(--accent-primary);
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.7;
}

.reply-reference-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reply-reference-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.reply-reference-header .reply-author-avatar,
.reply-reference-header .reply-author-avatar-placeholder {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.reply-reference-header .reply-author-avatar-placeholder {
  background: var(--accent-primary);
  color: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
}

.reply-author-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.reply-content-preview {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

/* Old reply styles - remove or repurpose */
.reply-line {
  display: none;
}

.reply-author-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

/* Highlight animation for jumped-to messages - Discord style */
@keyframes highlight-pulse {
  0% { 
    background: rgba(0, 255, 136, 0.3);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.3);
  }
  25% {
    background: rgba(0, 255, 136, 0.2);
    box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.2);
  }
  50% {
    background: rgba(0, 255, 136, 0.15);
    box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.1);
  }
  75% {
    background: rgba(0, 255, 136, 0.08);
    box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.05);
  }
  100% { 
    background: transparent;
    box-shadow: none;
  }
}

.highlight-reply {
  animation: highlight-pulse 2s ease-out;
  border-radius: 4px;
}

/* Message highlight on hover for reply */
.message-container:hover .message-reply-reference {
  background: rgba(0, 0, 0, 0.3);
}

/* Deleted message reply */
.message-reply-reference.deleted {
  opacity: 0.6;
  border-left-color: var(--text-muted);
}

.message-reply-reference.deleted .reply-reference-icon {
  color: var(--text-muted);
}

.message-reply-reference.deleted .reply-author-name {
  color: var(--text-muted);
}

.reply-content-preview.deleted {
  font-style: italic;
  color: var(--text-muted);
}

.reply-author-avatar-placeholder.deleted-icon {
  background: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Edit Mode */
.message-edit {
  margin-top: 8px;
}

.message-edit.enhanced-edit {
  background: var(--bg-secondary);
  border: 1px solid var(--accent-primary);
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

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

.edit-title {
  font-weight: 600;
  color: var(--accent-primary);
  font-size: 13px;
}

.edit-char-count {
  font-size: 11px;
  color: var(--text-muted);
}

.msg-char-count {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
}

.msg-char-count.over-limit {
  color: var(--warning, #fbbf24);
  font-weight: 600;
}

.edit-textarea {
  width: 100%;
  padding: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  resize: vertical;
  min-height: 60px;
  max-height: 200px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.edit-textarea:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.15);
}

.edit-preview-label {
  font-size: 11px;
  color: var(--text-muted);
  margin: 10px 0 4px;
}

.edit-preview {
  background: var(--bg-tertiary);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 30px;
}

.edit-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.edit-hints {
  font-size: 11px;
  color: var(--text-muted);
}

.edit-hints span {
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: 3px;
  margin: 0 2px;
}

.edit-buttons {
  display: flex;
  gap: 8px;
}

.save-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary, #00cc6a));
  color: var(--bg-primary);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: transform 0.15s, box-shadow 0.15s;
}

.cancel-btn {
  padding: 8px 16px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
}

.save-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px var(--accent-glow);
}

.save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cancel-btn:hover {
  background: var(--bg-hover);
  border-color: var(--text-muted);
}

/* Input Area */
.input-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  padding: 0 8px;
  border: 2px solid transparent;
  transition: border-color 0.2s, background 0.2s;
}

.input-wrapper:focus-within {
  border-color: var(--accent-primary);
  background: var(--bg-secondary);
}

.attachment-button-container {
  position: relative;
}

.attachment-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: var(--text-muted);
  font-size: 20px;
}

.attachment-btn:hover {
  color: var(--accent-primary);
  background: var(--bg-hover);
}

.plus-icon {
  line-height: 1;
}

.plus-icon {
  font-size: 20px;
  font-weight: 300;
  color: var(--text-primary);
  transition: color 0.2s;
}

.attachment-btn:hover .plus-icon {
  color: var(--bg-primary);
}

.attachment-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 6px;
  min-width: 180px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: attachmentMenuIn 0.2s ease;
  z-index: 100;
}

@keyframes attachmentMenuIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.attachment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.attachment-option:hover {
  background: var(--accent-primary);
}

.attachment-option:hover .attachment-icon,
.attachment-option:hover .attachment-label {
  color: var(--bg-primary);
}

.attachment-icon {
  font-size: 20px;
}

.attachment-label {
  font-size: 13px;
  color: var(--text-primary);
}

.attachment-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 8px;
}

/* GIF Picker */
.gif-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: gifOverlayIn 0.2s ease;
}

@keyframes gifOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gif-picker {
  width: 420px;
  max-height: 500px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  animation: gifPickerIn 0.3s ease;
}

@keyframes gifPickerIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.gif-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
}

.gif-picker-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.gif-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.gif-close:hover {
  background: var(--danger);
  color: var(--text-on-accent);
}

.gif-search-container {
  padding: 12px 16px;
}

.gif-search {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
}

.gif-search:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.gif-results {
  height: 320px;
  overflow-y: auto;
  padding: 0 16px 16px;
}

.gif-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.gif-item {
  aspect-ratio: 1;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-secondary);
  transition: all 0.15s ease;
}

.gif-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.gif-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gif-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.gif-placeholder span {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.gif-placeholder p {
  font-size: 14px;
}

.gif-picker-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

.powered-by {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Message Input Form */
.message-input-form {
  position: relative;
  padding: 16px 24px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.message-input-form .message-input {
  flex: 1;
}

.send-btn {
  padding: 12px 24px;
  background: var(--accent-primary);
  color: var(--bg-primary);
  border-radius: var(--radius);
  font-weight: 500;
  transition: var(--transition);
}

.send-btn:hover:not(:disabled) {
  box-shadow: 0 0 20px var(--accent-glow);
}

.send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Emoji Picker Button */
.emoji-picker-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  border: none;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.emoji-picker-btn:hover {
  background: var(--accent-primary);
  transform: scale(1.1);
}

/* Floating Emoji Picker */
.floating-emoji-picker {
  position: absolute;
  bottom: 80px;
  left: 24px;
  z-index: 100;
  animation: floatingPickerIn 0.2s ease;
}

@keyframes floatingPickerIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Mobile Styles */
@media (max-width: 768px) {
  .channel-page {
    flex-direction: column;
    height: 100vh;
  }
  
  .channel-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  
  .channel-header {
    padding: 12px 16px;
    flex-shrink: 0;
  }
  
  .channel-title {
    font-size: 16px;
  }
  
  .channel-hash {
    font-size: 16px;
  }
  
  .channel-description {
    font-size: 12px;
    display: none;
  }
  
  .header-actions {
    gap: 8px;
  }
  
  .action-btn {
    font-size: 16px;
    padding: 6px;
  }
  
  .messages-container {
    flex: 1;
    padding: 8px;
    overflow-y: auto;
  }
  
  .message {
    padding: 8px 0;
    gap: 8px;
  }
  
  .message-avatar {
    width: 32px;
    height: 32px;
  }
  
  .message-avatar img,
  .message-avatar span {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  
  .message-author {
    font-size: 13px;
  }
  
  .message-time {
    font-size: 10px;
  }
  
  .message-text {
    font-size: 14px;
    line-height: 1.4;
  }
  
  .message-actions {
    opacity: 1;
    padding: 4px;
    gap: 4px;
  }
  
  .message-actions button {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  
  .message:hover .message-actions {
    opacity: 1;
  }
  
  .message-input-container {
    padding: 8px 12px;
    margin: 0 8px 8px;
  }
  
  .message-input {
    font-size: 14px;
    padding: 10px 12px;
  }
  
  .send-btn {
    padding: 8px 12px;
    font-size: 14px;
  }
  
  .emoji-picker-btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  
  .typing-indicator {
    padding: 4px 16px;
    font-size: 12px;
  }
  
  .date-divider {
    margin: 16px 0;
  }
  
  .date-divider span {
    font-size: 11px;
    padding: 4px 8px;
  }
  
  .message-reactions {
    margin-top: 4px;
    gap: 4px;
  }
  
  .reaction {
    padding: 2px 6px;
    font-size: 12px;
  }
  
  .reply-indicator {
    padding: 6px 10px;
    margin-bottom: 4px;
    font-size: 12px;
  }
  
  .reply-indicator .cancel-reply {
    padding: 2px 6px;
  }
  
  .attachment-menu {
    bottom: 70px;
    left: 8px;
    right: 8px;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px;
  }
  
  .attachment-option {
    padding: 8px;
  }
  
  .attachment-icon {
    font-size: 18px;
  }
  
  .attachment-label {
    font-size: 10px;
  }
  
  .search-bar {
    padding: 8px;
  }
  
  .search-bar input {
    font-size: 14px;
    padding: 8px;
  }
  
  .search-bar button {
    padding: 8px 12px;
    font-size: 12px;
  }
  
  .search-results-dropdown {
    max-height: 200px;
  }
  
  .search-result-item {
    padding: 8px;
    font-size: 12px;
  }
  
  .edit-message-container {
    padding: 8px;
  }
  
  .edit-message-input {
    font-size: 14px;
    min-height: 60px;
  }
  
  .edit-actions {
    padding: 8px;
    font-size: 11px;
  }
  
  .report-modal {
    width: 90vw;
    padding: 16px;
  }
  
  .report-modal h3 {
    font-size: 16px;
  }
  
  .report-modal select,
  .report-modal textarea {
    font-size: 14px;
  }
  
  .gif-picker {
    width: 95vw;
    height: 70vh;
  }
  
  .gif-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  
  .server-members {
    display: none;
  }
}

@media (max-width: 480px) {
  .channel-header {
    padding: 8px 12px;
  }
  
  .channel-title {
    font-size: 14px;
  }
  
  .messages-container {
    padding: 4px;
  }
  
.message {
  padding: 2px 16px;
  margin: 1px 0;
  display: flex;
  gap: 16px;
  border-radius: 4px;
  transition: background 0.1s;
}

.message:hover {
  background: var(--bg-hover);
}

.message-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-avatar span {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

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

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

.message-author {
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}

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

.message-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: capitalize;
}

.message-time {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.edited-tag,
.pinned-tag {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}

.pinned-tag {
  margin-left: 4px;
}

.message-text {
  color: var(--text-secondary);
  word-wrap: break-word;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.message-actions {
  position: absolute;
  top: -12px;
  right: 16px;
  display: flex;
  gap: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}

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

.message-action-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.15s;
}

.message-action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
  
  .message-avatar {
    display: none;
  }
  
  .message.has-avatar .message-avatar {
    display: flex;
  }
  
  .message-header {
    gap: 4px;
  }
  
  .message-author {
    font-size: 12px;
  }
  
  .message-text {
    font-size: 13px;
  }
  
  .message-input-container {
    margin: 0 4px 4px;
    padding: 6px 8px;
  }
  
  .message-input {
    padding: 8px;
    font-size: 13px;
  }
  
  .send-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  .attachment-menu {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .report-modal {
    width: 95vw;
    padding: 12px;
  }
}

/* Message Attachments */
.message-attachments {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 600px;
}

.attachment-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.attachment-image:hover {
  transform: scale(1.02);
}

.attachment-video {
  max-width: 100%;
  max-height: 400px;
  border-radius: 12px;
  background: var(--bg-tertiary);
}

.attachment-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.attachment-file:hover {
  background: var(--bg-quaternary);
  border-color: var(--accent-primary);
}

.attachment-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--accent-primary);
  color: var(--bg-primary);
  flex-shrink: 0;
}

.attachment-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.attachment-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-size {
  font-size: 12px;
  color: var(--text-muted);
}

/* Link Preview Styles */
.link-preview {
  margin-top: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  max-width: 500px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.link-preview:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}

.link-preview-image {
  width: 100%;
  height: 200px;
  object-fit: contain;
  image-rendering: auto;
  background: var(--bg-quaternary);
}

.link-preview-content {
  padding: 12px 16px;
}

.link-preview-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-preview-description {
  font-size: 12px;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.link-preview-url {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.link-preview.loading {
  min-height: 80px;
  animation: pulse 1.5s ease-in-out infinite;
}

.link-preview-skeleton {
  background: linear-gradient(90deg, var(--bg-quaternary) 25%, var(--bg-tertiary) 50%, var(--bg-quaternary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

.link-preview-skeleton.title {
  height: 16px;
  width: 70%;
  margin-bottom: 8px;
}

.link-preview-skeleton.desc {
  height: 12px;
  width: 90%;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.link-preview-image-container {
  width: 100%;
  max-height: 250px;
  overflow: hidden;
}

.message-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.link-previews {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Upload Preview Modal */
.upload-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.upload-preview-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  width: 90%;
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from { transform: scale(0.95) translateY(-10px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.upload-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}

.upload-preview-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.upload-preview-header .close-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s ease;
}

.upload-preview-header .close-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.upload-preview-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.upload-image-preview {
  width: 100%;
  max-height: 300px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-image-preview img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
}

.upload-file-preview {
  width: 100%;
  padding: 24px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.upload-file-preview .file-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border-radius: 16px;
  color: var(--accent-primary);
}

.upload-file-preview .file-info {
  text-align: center;
}

.upload-file-preview .file-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-all;
  max-width: 300px;
}

.upload-file-preview .file-size {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.upload-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upload-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.upload-progress-bar .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  border-radius: 4px;
  transition: width 0.3s ease;
}

.upload-preview-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.upload-preview-footer .btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

.upload-preview-footer .btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--text-on-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

@media (max-width: 480px) {
  .upload-preview-modal {
    width: 95%;
    margin: 16px;
  }
  
  .upload-image-preview img {
    max-height: 200px;
  }
}

.mention-dropdown {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  min-width: 200px;
  padding: 4px 0;
}

.mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.mention-item:hover,
.mention-item.selected {
  background: var(--bg-hover);
}

.mention-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
}

.mention-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mention-name {
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
}

.mention-username {
  font-size: 12px;
  color: var(--text-muted);
}

.channel-mention-icon {
  background: var(--warning, #f59e0b);
  color: #1a1a2e;
  font-weight: 700;
  font-size: 14px;
}

.channel-mention-dropdown .mention-item.selected {
  background: rgba(251, 191, 36, 0.15);
}

/* Media Player Component - Enhanced */
.media-player {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  overflow: hidden;
  margin: 8px 0;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.media-player.video-player {
  width: min(100%, 560px);
}

.media-player.video-player .media-element {
  max-height: min(72vh, 520px);
}

.media-player.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  margin: 0;
  border-radius: 0;
}

.media-player.fullscreen .media-element {
  max-height: none;
  height: 100%;
}

.media-player.hide-controls .media-controls {
  opacity: 0;
  pointer-events: none;
}

.media-element {
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
  max-height: min(72vh, 520px);
  object-fit: contain;
}

.media-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: background 0.2s;
}

.media-play-overlay:hover {
  background: rgba(0, 0, 0, 0.5);
}

.play-button-large {
  width: 72px;
  height: 72px;
  background: var(--accent-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
  box-shadow: 0 4px 20px rgba(88, 101, 242, 0.4);
}

.play-button-large:hover {
  transform: scale(1.1);
}

.play-button-large svg {
  width: 36px;
  height: 36px;
  color: var(--text-on-accent);
  margin-left: 4px;
}

/* Compact Audio Player */
.media-player-compact {
  width: 100%;
  max-width: 560px;
}

.audio-compact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.audio-compact:hover {
  background: var(--bg-hover);
}

.audio-compact-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.audio-settings-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.2s;
}

.audio-settings-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.audio-settings-btn svg {
  width: 16px;
  height: 16px;
}

.audio-settings-popup {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  min-width: 200px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.audio-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.audio-settings-header span {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.audio-settings-close {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  padding: 0;
}

.audio-settings-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.audio-settings-close svg {
  width: 14px;
  height: 14px;
}

.audio-settings-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.audio-settings-option:last-child {
  margin-bottom: 0;
}

.audio-settings-option span {
  font-size: 13px;
  color: var(--text-normal);
}

.audio-settings-option select {
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
}

.audio-settings-option input[type="range"] {
  width: 80px;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-secondary);
  -webkit-appearance: none;
  cursor: pointer;
}

.audio-settings-option input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-primary);
  cursor: pointer;
}

.audio-settings-toggle {
  position: relative;
  width: 40px;
  height: 20px;
}

.audio-settings-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.audio-settings-toggle .toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-secondary);
  border-radius: 10px;
  transition: 0.3s;
}

.audio-settings-toggle .toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: 0.3s;
}

.audio-settings-toggle input:checked + .toggle-slider {
  background: var(--accent-primary);
}

.audio-settings-toggle input:checked + .toggle-slider:before {
  transform: translateX(20px);
  background: white;
}

.audio-icon-compact {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5865F2, #7289DA);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.audio-icon-compact svg {
  width: 16px;
  height: 16px;
  color: var(--text-on-accent);
}

.audio-icon-compact.playing .audio-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.audio-bars {
  display: none;
}

.audio-bars span {
  width: 3px;
  background: white;
  border-radius: 1px;
  animation: audio-bar-compact 0.5s ease infinite;
}

.audio-bars span:nth-child(1) { height: 60%; animation-delay: 0s; }
.audio-bars span:nth-child(2) { height: 100%; animation-delay: 0.1s; }
.audio-bars span:nth-child(3) { height: 40%; animation-delay: 0.2s; }

@keyframes audio-bar-compact {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.5); }
}

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

.audio-name-compact {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-progress-compact {
  height: 3px;
  background: var(--bg-primary);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}

.audio-progress-bar-compact {
  height: 100%;
  background: var(--accent-primary);
  border-radius: 2px;
  transition: width 0.1s;
}

.audio-time-compact {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Large Audio Player */
.audio-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.audio-visualizer-large {
  display: flex;
  align-items: center;
  gap: 24px;
}

.audio-disc {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.audio-disc.spinning {
  animation: disc-spin 4s linear infinite;
}

.audio-disc::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--bg-primary);
  border-radius: 50%;
  z-index: 1;
}

.disc-inner {
  font-size: 10px;
  font-weight: bold;
  color: var(--text-muted);
}

@keyframes disc-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.audio-waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 60px;
}

.wave-bar {
  width: 4px;
  background: linear-gradient(to top, var(--accent-primary), #8ea1e1);
  border-radius: 2px;
  animation: wave-animation 1s ease-in-out infinite;
}

@keyframes wave-animation {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

.audio-details {
  text-align: center;
}

.audio-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.audio-meta {
  font-size: 13px;
  color: var(--text-muted);
}

/* Media Controls */
.media-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
  padding: 40px 12px 12px;
  transition: opacity 0.3s;
}

.media-controls.visible {
  opacity: 1;
}

.media-controls.hidden {
  opacity: 0;
}

.media-progress-container {
  padding: 0 8px;
  margin-bottom: 8px;
}

.media-progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

.media-progress:hover {
  height: 6px;
}

.media-progress-buffered {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.media-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--accent-primary);
  border-radius: 2px;
}

.media-progress-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.media-progress:hover .media-progress-thumb {
  opacity: 1;
}

.media-time-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
}

.media-buffering-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

.media-buffering-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--accent-primary, #5865f2);
  border-radius: 50%;
  animation: media-spin 0.8s linear infinite;
}

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

.media-dl-btn {
  text-decoration: none;
}

.media-dl-btn:hover {
  color: var(--accent-primary, #5865f2) !important;
}

.media-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
}

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

.media-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-on-accent);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.media-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.media-btn.active {
  color: var(--accent-primary);
}

.media-btn svg {
  width: 20px;
  height: 20px;
}

.time-display {
  font-size: 12px;
  color: var(--text-on-accent);
  font-variant-numeric: tabular-nums;
  margin-left: 8px;
}

.volume-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.volume-slider-container {
  width: 0;
  overflow: hidden;
  transition: width 0.2s;
}

.volume-wrapper:hover .volume-slider-container {
  width: 80px;
}

.volume-slider-input {
  width: 70px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  outline: none;
  margin: 0 8px;
}

.volume-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
}

.speed-control {
  position: relative;
}

.speed-btn {
  width: auto;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
}

.speed-menu {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-secondary);
  border-radius: 6px;
  padding: 4px;
  margin-bottom: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 60px;
}

.speed-option {
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s;
}

.speed-option:hover {
  background: var(--bg-hover);
}

.speed-option.active {
  background: var(--accent-primary);
  color: var(--text-on-accent);
}

/* Settings Panel */
.media-settings-panel {
  position: absolute;
  bottom: 100%;
  right: 8px;
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  min-width: 200px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.settings-section {
  margin-bottom: 12px;
}

.settings-section:last-child {
  margin-bottom: 0;
}

.settings-section h4 {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}

.setting-item span {
  font-size: 13px;
  color: var(--text-primary);
}

.setting-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-primary);
}

.setting-select {
  width: 100%;
  padding: 6px 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
}

.setting-select:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.media-error {
  padding: 20px;
  text-align: center;
}

.media-error span {
  color: var(--text-error);
  display: block;
  margin-bottom: 8px;
}

.media-error button {
  padding: 6px 16px;
  background: var(--accent-primary);
  color: var(--text-on-accent);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.media-error button:hover {
  background: #4752c4;
}

/* Media Embed */
.media-embed {
  margin: 12px 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  transition: border-color 0.2s;
}

.media-embed:hover {
  border-color: var(--accent-primary);
}

.media-embed-preview {
  position: relative;
  height: 180px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.embed-youtube,
.embed-vimeo,
.embed-soundcloud,
.embed-twitch,
.embed-spotify {
  width: 100%;
  height: 100%;
}

.embed-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.media-embed:hover .embed-thumbnail {
  opacity: 0.6;
}

.embed-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.embed-play-btn.youtube {
  background: rgba(255, 0, 0, 0.9);
}

.embed-play-btn.vimeo {
  background: #1ab7ea;
}

.embed-play-btn.sc {
  background: #ff5500;
}

.embed-play-btn.twitch {
  background: #9146ff;
}

.media-embed:hover .embed-play-btn {
  transform: translate(-50%, -50%) scale(1.1);
}

.embed-play-btn svg {
  width: 28px;
  height: 28px;
  color: var(--text-on-accent);
  margin-left: 4px;
}

.embed-label {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.8);
  color: var(--text-on-accent);
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.embed-label.vimeo { background: #1ab7ea; }
.embed-label.sc { background: #ff5500; }
.embed-label.twitch { background: #9146ff; }
.embed-label.spotify { background: #1DB954; }

.embed-spotify {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, #191414 0%, #282828 100%);
}

.embed-spotify-icon {
  width: 72px;
  height: 72px;
  background: #1DB954;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.embed-spotify-icon svg {
  width: 36px;
  height: 36px;
  color: var(--text-on-accent);
}

.media-embed-info {
  padding: 10px 14px;
  background: var(--bg-primary);
}

.media-embed-url {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.media-embed-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.embed-container {
  position: relative;
  width: 90%;
  max-width: 1400px;
  aspect-ratio: 16/9;
}

.embed-close-btn {
  position: absolute;
  top: -48px;
  right: 0;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--text-on-accent);
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  transition: background 0.2s;
}

.embed-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.embed-iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
}

/* Loading/Error States */
.channel-page .loading, .channel-page .no-channel, .channel-page .channel-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 2rem;
}

.channel-page .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border, #2a2a4a);
  border-top-color: var(--primary, #00ff88);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

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

.channel-page .no-channel h2, .channel-page .channel-error h2 {
  color: var(--text, #fff);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.channel-page .no-channel p, .channel-page .channel-error p {
  color: var(--text-muted, #888);
}

.channel-page .error-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}

.channel-page .retry-btn {
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--primary, #00ff88);
  color: #000;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.channel-page .retry-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 255, 136, 0.3);
}

/* ============================================
   ENHANCED MODERN CHAT LAYOUT
   ============================================ */

/* Message bubbles - modern Discord-like styling */
.message {
  position: relative;
  animation: messageSlideIn 0.15s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message:hover .message-actions {
  opacity: 1;
  transform: translateY(0);
}

.message-actions {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Message grouping - tighter spacing for consecutive messages */
.message-group {
  margin-bottom: 2px;
}

.message-group .message {
  padding-top: 2px;
  padding-bottom: 2px;
}

.message-group .message:first-child {
  padding-top: 8px;
}

.message-group .message:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* Enhanced message header with role badge */
.message-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.message-author {
  font-weight: 600;
  font-size: 14px;
  transition: color 0.15s ease;
}

.message:hover .message-author {
  color: var(--accent-primary);
}

/* Role badges - more prominent */
.message-badge {
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.message-badge.badge-owner {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #1a1a2e;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

.message-badge.badge-admin {
  background: linear-gradient(135deg, #5865F2, #4752C4);
  color: var(--text-on-accent);
}

.message-badge.badge-moderator {
  background: linear-gradient(135deg, #00FF88, #00CC6A);
  color: #1a1a2e;
}

/* Modern timestamp styling */
.message-time {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

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

/* Enhanced message content area */
.message-content {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.message-text {
  color: var(--text-secondary);
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* Enhanced reactions */
.message-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.reaction:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  transform: scale(1.05);
}

.reaction.active {
  background: rgba(0, 255, 136, 0.15);
  border-color: var(--accent-primary);
}

.reaction-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.reaction.active .reaction-count {
  color: var(--accent-primary);
}

/* Enhanced input area */
.message-input-form {
  position: relative;
  padding: 16px 24px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

.message-input-container {
  background: var(--bg-tertiary);
  border: 2px solid transparent;
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.message-input-container:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
}

.message-input-wrapper {
  display: flex;
  align-items: flex-end;
  padding: 8px 12px;
  gap: 8px;
}

.message-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.4;
  resize: none;
  outline: none;
  max-height: 200px;
  min-height: 24px;
  font-family: inherit;
  overflow-y: auto;
  scrollbar-width: none;
}

.message-input::-webkit-scrollbar {
  display: none;
}

.message-input::placeholder {
  color: var(--text-muted);
}

/* Input action buttons */
.input-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
}

.input-action-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.input-action-btn:hover {
  background: var(--bg-hover);
  color: var(--accent-primary);
}

.input-action-btn.active {
  color: var(--accent-primary);
}

/* Enhanced send button */
.send-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: var(--bg-primary);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 255, 136, 0.2);
}

.send-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 255, 136, 0.3);
}

.send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Enhanced typing indicator */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  font-size: 12px;
  color: var(--text-muted);
}

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

.typing-dots span {
  width: 6px;
  height: 6px;
  background: var(--accent-primary);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }
.typing-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes typingBounce {
  0%, 80%, 100% { 
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% { 
    transform: scale(1);
    opacity: 1;
  }
}

/* Enhanced reply indicator */
.reply-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-left: 3px solid var(--accent-primary);
  border-radius: 4px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.reply-indicator:hover {
  background: var(--bg-hover);
}

.reply-indicator-bar {
  width: 3px;
  height: 100%;
  min-height: 32px;
  background: var(--accent-primary);
  border-radius: 2px;
}

.reply-indicator-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reply-author-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-primary);
}

.reply-preview-text {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Enhanced date dividers */
.date-divider {
  display: flex;
  align-items: center;
  margin: 16px 0;
  gap: 16px;
}

.date-divider::before,
.date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}

.date-divider span {
  padding: 4px 12px;
  background: var(--bg-secondary);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Modern scrollbar */
.messages-container::-webkit-scrollbar {
  width: 8px;
}

.messages-container::-webkit-scrollbar-track {
  background: transparent;
}

.messages-container::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: 4px;
  transition: background 0.2s ease;
}

.messages-container::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

/* New message indicator */
.new-message-indicator {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: var(--accent-primary);
  color: var(--bg-primary);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 255, 136, 0.3);
  animation: pulse 2s infinite;
  z-index: 10;
}

.new-message-indicator:hover {
  transform: translateX(-50%) scale(1.05);
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(0, 255, 136, 0.3);
  }
  50% {
    box-shadow: 0 4px 24px rgba(0, 255, 136, 0.5);
  }
}

/* Message status indicators */
.message-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  margin-left: 6px;
}

.message-status-indicator.sending {
  color: var(--text-muted);
}

.message-status-indicator.sent {
  color: var(--text-muted);
}

.message-status-indicator.delivered {
  color: var(--accent-primary);
}

.message-status-indicator.read {
  color: #22c55e;
}

.message-status-indicator.failed {
  color: #ef4444;
}

/* Optimistic message sent confirmation flash */
.message.just-sent {
  animation: messageConfirmFlash 0.6s ease-out;
}

@keyframes messageConfirmFlash {
  0% { background: rgba(0, 255, 136, 0.15); }
  100% { background: transparent; }
}

/* Enhanced sending pulse for channel messages */
.message.sending::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent-primary), transparent);
  animation: sendingPulse 1.5s ease-in-out infinite;
  border-radius: 1px;
}

@keyframes sendingPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Enhanced embed styles */
.embed-container {
  margin-top: 8px;
  max-width: 500px;
}

.embed-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.embed-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.embed-author {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
}

.embed-author-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.embed-author-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-primary);
}

.embed-title {
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.embed-description {
  padding: 0 12px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.embed-image {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  image-rendering: auto;
}

.embed-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--text-muted);
}

/* Discord-style message layout */
.discord-message-group {
  display: flex;
  padding: 8px 16px;
  gap: 16px;
  border-radius: 4px;
  position: relative;
}

.discord-message-group:hover {
  background: rgba(255, 255, 255, 0.03);
}

.discord-message-group.own-group .discord-author-name {
  color: var(--accent-primary);
}

.discord-message-header {
  display: flex;
  gap: 16px;
  padding-top: 16px;
}

.discord-message-group:not(:has(+ .discord-message-group)) {
  padding-bottom: 16px;
}

.discord-author-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}

.discord-author-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.discord-author-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 15px;
}

.discord-role-badge {
  font-size: 10px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.discord-role-badge.badge-owner { background: linear-gradient(135deg, #FFD700, #FF6B00); color: #1a1a2e; }
.discord-role-badge.badge-admin { background: linear-gradient(135deg, #5865F2, #4752C4); color: var(--text-on-accent); }
.discord-role-badge.badge-moderator { background: linear-gradient(135deg, #00FF88, #00CC6A); color: #1a1a2e; }
.discord-role-badge.badge-verified { background: linear-gradient(135deg, #00D9FF, #0099FF); color: var(--text-on-accent); }
.discord-role-badge.badge-contributor { background: linear-gradient(135deg, #9B59B6, #8E44AD); color: var(--text-on-accent); }
.discord-role-badge.badge-member { background: var(--bg-tertiary); color: var(--text-secondary); }

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

.discord-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.discord-badge svg, .discord-badge img {
  width: 16px;
  height: 16px;
}

.discord-timestamp {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

.discord-message-compact-time {
  position: absolute;
  left: 76px;
  top: 4px;
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.1s;
}

.discord-message-group:hover .discord-message-compact-time {
  opacity: 1;
}

.discord-message-content-wrapper {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.discord-reply-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  border-left: 2px solid var(--accent-primary);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s;
}

.discord-reply-preview:hover {
  background: rgba(255, 255, 255, 0.1);
}

.discord-reply-preview svg {
  color: var(--accent-primary);
  flex-shrink: 0;
}

.discord-reply-author {
  font-weight: 600;
  color: var(--text-secondary);
}

.discord-reply-content {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

.discord-reply-preview.deleted .discord-reply-content {
  font-style: italic;
  opacity: 0.7;
}

.discord-message {
  padding: 2px 0;
  min-height: 24px;
}

.discord-message .message-text {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}

.discord-attachments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.discord-attachment {
  max-width: 400px;
}

.discord-attachment-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s;
}

.discord-attachment-image:hover {
  transform: scale(1.02);
}

.discord-file-attachment {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.15s;
}

.discord-file-attachment:hover {
  background: var(--bg-hover);
}

.discord-filename {
  font-weight: 500;
}

.discord-filesize {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}

.discord-edited-tag {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-left: 4px;
}

.discord-pinned-tag {
  font-size: 12px;
  color: var(--accent-primary);
  margin-left: 8px;
}

.discord-message.pinned {
  border-left: 2px solid var(--accent-primary);
  padding-left: 8px;
}

.discord-message.sending {
  opacity: 0.6;
}

.discord-message.failed {
  opacity: 0.7;
  background: rgba(239, 68, 68, 0.1);
  border-left: 2px solid #ef4444;
  padding-left: 8px;
}

.discord-message-actions {
  display: none;
  gap: 4px;
  margin-top: 4px;
}

.discord-message:hover .discord-message-actions {
  display: flex;
}

.discord-message-actions button {
  padding: 4px 8px;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s;
}

.discord-message-actions button:hover {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

/* Edit form */
.discord-edit-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.discord-edit-textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border: 2px solid var(--accent-primary);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
}

.discord-edit-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.discord-edit-hint {
  font-size: 11px;
  color: var(--text-muted);
}

.discord-edit-buttons {
  display: flex;
  gap: 8px;
}

.discord-save-btn, .discord-cancel-btn {
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.discord-save-btn {
  background: var(--accent-primary);
  color: var(--bg-primary);
  border: none;
}

.discord-save-btn:hover:not(:disabled) {
  filter: brightness(1.1);
}

.discord-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.discord-cancel-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.discord-cancel-btn:hover {
  background: var(--bg-hover);
}

/* Highlight animation */
@keyframes highlight-pulse {
  0% { background: rgba(0, 255, 136, 0.3); }
  100% { background: transparent; }
}

.highlight-reply {
  animation: highlight-pulse 2s ease-out;
  border-radius: 4px;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .discord-message-group {
    padding: 6px 12px;
    gap: 12px;
  }

  .discord-message-header {
    gap: 12px;
    padding-top: 12px;
  }

  .discord-reply-preview {
    margin-left: 56px;
  }

  .discord-message-actions {
    display: flex;
  }

  .discord-author-name {
    font-size: 14px;
  }

  .discord-timestamp {
    font-size: 10px;
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .message-input-form {
    padding: 8px 12px;
  }
  
  .message {
    padding: 6px 8px;
  }
  
  .message-avatar {
    width: 32px;
    height: 32px;
  }
  
  .message-actions {
    opacity: 1;
  }
  
   .typing-indicator {
     padding: 4px 12px;
     font-size: 11px;
   }
 }


.settings-page {
  display: flex;
  gap: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  min-height: 0;
  flex: 1;
}

.settings-header {
  margin-bottom: 32px;
}

.settings-header h1 {
  font-size: 24px;
  margin-bottom: 8px;
}

.settings-header p {
  color: var(--text-secondary);
}

.settings-body {
  flex: 1;
  display: flex;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.settings-controls {
  flex: 1;
  padding: 32px 24px 32px 40px;
  overflow-y: auto;
  min-width: 0;
  max-width: 680px;
}

.settings-preview {
  width: 340px;
  min-width: 340px;
  max-width: 340px;
  height: 100%;
  overflow-y: auto;
  padding: 32px 24px 32px 0;
  position: sticky;
  top: 0;
}

.settings-preview-inner {
  position: sticky;
  top: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.settings-preview .profile-card-preview {
  width: 280px;
}

.settings-preview .chat-preview-shell {
  width: 300px;
  min-height: 280px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.settings-preview .settings-small-card-preview {
  width: 260px;
}

.settings-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}

.quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.quick-link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

.quick-link-card:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 0 20px var(--accent-glow);
  transform: translateY(-2px);
}

.link-icon {
  font-size: 32px;
}

.link-text {
  font-weight: 600;
  color: var(--text-primary);
}

.link-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.settings-section h2 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.settings-form .form-group {
  margin-bottom: 20px;
}

.settings-form input:disabled,
.settings-form textarea {
  width: 100%;
}

.settings-form input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-section-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-primary);
  margin: 24px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-hint {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.success-message {
  color: var(--success);
  font-size: 13px;
  margin-bottom: 16px;
}

.security-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
}

.info-label {
  color: var(--text-secondary);
}

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

.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) var(--bg-tertiary);
}

.badges-grid::-webkit-scrollbar {
  width: 6px;
}

.badges-grid::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

.badges-grid::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 3px;
}

.badges-grid::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

.badge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  text-align: center;
}

.badge-icon {
  font-size: 32px;
}

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

.badge-category {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.no-badges {
  color: var(--text-muted);
  font-style: italic;
}

.danger-zone {
  border-color: var(--danger);
}

.danger-zone h2 {
  color: var(--danger);
}

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

/* Drop Zone */
.drop-zone {
  position: relative;
  height: 150px;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.drop-zone:hover {
  border-color: var(--accent-primary);
}

.drop-zone.dragging {
  border-color: var(--accent-primary);
  background-color: var(--bg-tertiary);
  transform: scale(1.02);
}

.drop-zone.has-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.drop-zone-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}

.drop-icon {
  font-size: 32px;
}

.drop-zone-placeholder button {
  margin-top: 8px;
}

.drop-zone-overlay {
  position: relative;
  z-index: 1;
  color: var(--text-on-accent);
  font-size: 14px;
  text-align: center;
}

.drop-zone-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-primary);
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* File Browser Modal */
.file-browser-modal {
  width: 600px;
  max-height: 80vh;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  animation: modalSlideIn 0.2s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.file-browser-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.file-browser-header h3 {
  font-size: 16px;
  font-weight: 600;
}

.close-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

.uploaded-files-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) var(--bg-tertiary);
}

.uploaded-files-grid::-webkit-scrollbar {
  width: 6px;
}

.uploaded-files-grid::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

.uploaded-files-grid::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 3px;
}

.uploaded-files-grid::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

.uploaded-file-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
}

.uploaded-file-item:hover {
  border-color: var(--accent-primary);
  transform: scale(1.02);
}

.uploaded-file-item img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
}

.uploaded-file-item .file-name {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.no-files {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--text-muted);
}

.no-files span {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.no-files .hint {
  font-size: 12px;
  opacity: 0.7;
}

.file-browser-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
}

.email-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.email-status input {
  flex: 1;
}

.email-verified {
  font-size: 12px;
  color: #ff6b6b;
}

.email-verified.verified {
  color: #00ff88;
}

.add-email-form {
  display: flex;
  gap: 8px;
}

.add-email-form input {
  flex: 1;
}

.btn-small {
  padding: 8px 16px;
  font-size: 13px;
}

.success-text {
  color: #00ff88;
  font-size: 12px;
}

.error-text {
  color: #ff6b6b;
  font-size: 12px;
}

.profile-field-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.profile-field-row select {
  width: 120px;
  padding: 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
}

.profile-field-row input {
  flex: 1;
  padding: 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
}

.profile-field-row .btn-icon {
  width: 36px;
  padding: 8px;
  background: var(--danger);
  border: none;
  border-radius: var(--radius);
  color: var(--text-on-accent);
  cursor: pointer;
}

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

.color-picker-row input[type="color"] {
  width: 50px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

.color-picker-row input[type="text"] {
  width: 120px;
  padding: 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
}

.settings-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) var(--bg-tertiary);
}

.theme-grid::-webkit-scrollbar {
  width: 6px;
}

.theme-grid::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

.theme-grid::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 3px;
}

.theme-grid::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

.theme-card {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  padding: 8px;
  cursor: pointer;
  transition: var(--transition);
}

.theme-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}

.theme-card.active {
  border-color: var(--accent-primary);
  box-shadow: 0 0 15px var(--accent-glow);
}

.theme-preview {
  width: 100%;
  height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 8px;
}

.preview-bar {
  height: 8px;
  width: 100%;
}

.preview-content {
  display: flex;
  height: calc(100% - 8px);
}

.preview-sidebar {
  width: 30%;
  padding: 4px;
}

.preview-sidebar::after {
  content: '';
  display: block;
  width: 60%;
  height: 6px;
  background: currentColor;
  opacity: 0.3;
  margin-top: 4px;
  border-radius: 2px;
}

.preview-main {
  flex: 1;
  padding: 4px;
}

.preview-msg {
  width: 80%;
  height: 20px;
  border-radius: 4px;
  margin-top: 4px;
}

.theme-name {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

.custom-badge {
  display: block;
  text-align: center;
  font-size: 10px;
  color: var(--accent-primary);
  margin-top: 4px;
}

.theme-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.theme-editor {
  margin-top: 16px;
  padding: 16px;
  background: var(--bg-primary);
  border-radius: var(--radius);
}

.color-pickers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.color-picker label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: capitalize;
}

.color-picker input[type="color"] {
  width: 100%;
  height: 32px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.settings-page {
  display: flex;
  gap: 0;
  flex: 1;
  height: 100%;
  min-height: 100%;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.settings-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.settings-logo {
  padding: 0 8px 20px;
}

.settings-logo a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 12px;
  display: block;
  margin-bottom: 8px;
  transition: color 0.2s;
}

.settings-logo a:hover {
  color: var(--accent-primary);
}

.settings-logo h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  padding-right: 8px;
}

.settings-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.settings-tab::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--accent-primary);
  border-radius: 0 2px 2px 0;
  transition: height 0.2s ease;
}

.settings-tab:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
}

.settings-tab:hover::before {
  height: 40%;
}

.settings-tab.active {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.12) 0%, rgba(0, 204, 106, 0.08) 100%);
  color: var(--accent-primary);
}

.settings-tab.active::before {
  height: 60%;
  box-shadow: 0 0 8px var(--accent-glow);
}

.settings-tab.active .tab-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 4px var(--accent-glow));
}

.tab-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.tab-label {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab-badge {
  margin-left: auto;
  padding: 2px 6px;
  background: var(--accent-primary);
  color: var(--bg-primary);
  font-size: 10px;
  font-weight: 600;
  border-radius: 10px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease;
}

.settings-tab.active .tab-badge {
  opacity: 1;
  transform: scale(1);
}

/* Settings Tab Sub-sections */
.settings-tab-group {
  margin-bottom: 8px;
}

.settings-tab-group-label {
  padding: 8px 14px 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.settings-nav-divider {
  height: 1px;
  background: var(--border-color);
  margin: 8px 0;
  opacity: 0.5;
}

/* Settings Tab Hover Animation */
.settings-tab {
  animation: tabFadeIn 0.3s ease;
  animation-fill-mode: both;
}

.settings-tab:nth-child(1) { animation-delay: 0ms; }
.settings-tab:nth-child(2) { animation-delay: 30ms; }
.settings-tab:nth-child(3) { animation-delay: 60ms; }
.settings-tab:nth-child(4) { animation-delay: 90ms; }
.settings-tab:nth-child(5) { animation-delay: 120ms; }
.settings-tab:nth-child(6) { animation-delay: 150ms; }
.settings-tab:nth-child(7) { animation-delay: 180ms; }
.settings-tab:nth-child(8) { animation-delay: 210ms; }

@keyframes tabFadeIn {
  0% {
    opacity: 0;
    transform: translateX(-8px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Settings Tab Keyboard Shortcut Hint */
.settings-tab .shortcut-hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.2s ease;
  font-family: monospace;
}

.settings-tab:hover .shortcut-hint {
  opacity: 0.7;
}

.settings-tab.active .shortcut-hint {
  color: var(--accent-primary);
  opacity: 0.5;
}

.settings-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 24px;
}

.settings-section h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 24px 0;
  color: var(--text-primary);
}

.settings-group {
  margin-bottom: 28px;
}

.settings-group:last-child {
  margin-bottom: 0;
}

.settings-group h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  margin-bottom: 8px;
}

.toggle-item:last-child {
  margin-bottom: 0;
}

.toggle-label {
  font-size: 14px;
  color: var(--text-primary);
}

.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;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-hover);
  transition: 0.3s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--text-muted);
  transition: 0.3s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
  background-color: var(--text-on-accent);
}

.language-selector {
  margin-top: 12px;
}

.language-select {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.language-select:hover {
  border-color: var(--accent-primary);
  background-color: var(--bg-hover);
}

.language-select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.language-select option {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 12px;
}

.group-description {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.styled-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.styled-checkbox input {
  display: none;
}

.checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.styled-checkbox input:checked + .checkbox-custom {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  border-color: var(--accent-primary);
}

.styled-checkbox input:checked + .checkbox-custom:after {
  content: '✓';
  color: var(--bg-primary);
  font-size: 12px;
  font-weight: bold;
}

.save-indicator {
  padding: 12px 16px;
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius);
  color: var(--accent-primary);
  font-size: 13px;
  text-align: center;
  margin-top: 16px;
}

.settings-message {
  padding: 12px 16px;
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius);
  color: var(--accent-primary);
  margin-bottom: 20px;
  font-size: 14px;
}

.settings-message.error {
  background: rgba(255, 107, 107, 0.1);
  border-color: var(--danger);
  color: var(--danger);
}

.save-status-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 8px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  margin: -24px -24px 20px -24px;
  display: flex;
  justify-content: flex-end;
}

.save-status {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.save-status.saving {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
}

.save-status.saving::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #ffc107;
  border-radius: 50%;
  animation: pulse 1s infinite;
}

.save-status.saved {
  background: rgba(0, 255, 136, 0.15);
  color: #00ff88;
}

.save-status.saved::before {
  content: '✓';
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* New Settings Styles */

.profile-media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.media-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.media-item label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.avatar-preview-wrapper,
.banner-preview-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.avatar-preview.large {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 3px solid var(--border-color);
}

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

.avatar-preview.large span {
  font-size: 48px;
  font-weight: 600;
  color: var(--text-muted);
}

.banner-preview-wrapper .banner-preview {
  width: 100%;
  height: 80px;
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid var(--border-color);
}

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

.banner-preview-wrapper .banner-preview span {
  font-size: 12px;
  color: var(--text-muted);
}

.form-group {
  margin-bottom: 20px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  transition: all 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.form-group input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.settings-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.info-card {
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  overflow: hidden;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 14px;
  color: var(--text-muted);
}

.info-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.info-input {
  width: 200px;
  padding: 8px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
}

.email-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.email-form input {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
}

.disable-2fa-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
}

.disable-2fa-form input {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
}

.danger-zone {
  border-color: rgba(255, 107, 107, 0.3);
}

.danger-zone h3 {
  color: var(--danger);
}

.danger-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
}

.danger-item strong {
  display: block;
  margin-bottom: 4px;
}

.danger-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.toggle-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toggle-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.btn-small {
  padding: 8px 16px;
  font-size: 13px;
}

.btn-danger {
  background: var(--danger);
  color: var(--text-on-accent);
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-danger:hover {
  background: #ff5252;
  transform: translateY(-1px);
}

.form-hint.error {
  color: var(--danger);
  margin-top: 8px;
}

/* Sound Settings */
.sound-volume-control {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
}

.sound-volume-control label {
  font-size: 13px;
  color: var(--text-secondary);
  min-width: 50px;
}

.sound-volume-control input[type="range"] {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  background: var(--border-color);
  border-radius: 2px;
  cursor: pointer;
}

.sound-volume-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--accent-primary);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s;
}

.sound-volume-control input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.sound-volume-control span {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 40px;
  text-align: right;
}

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

.sound-setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}

.sound-setting-item:hover {
  border-color: var(--accent-primary);
  background: var(--bg-hover);
}

.sound-setting-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sound-setting-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.sound-setting-current {
  font-size: 12px;
  color: var(--text-muted);
}

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

.sound-preview-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.sound-preview-btn:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.sound-selector-arrow {
  font-size: 18px;
  color: var(--text-muted);
}

/* Sound Selector Modal */
.sound-selector-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.15s ease-out;
}

.sound-selector-modal {
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.2s ease-out;
}

.sound-selector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.sound-selector-header h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.sound-selector-tabs {
  display: flex;
  padding: 0 20px;
  border-bottom: 1px solid var(--border-color);
}

.sound-selector-tabs .tab-btn {
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.sound-selector-tabs .tab-btn:hover {
  color: var(--text-primary);
}

.sound-selector-tabs .tab-btn.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

.sound-selector-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.preset-sounds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) var(--bg-tertiary);
}

.preset-sounds-grid::-webkit-scrollbar {
  width: 6px;
}

.preset-sounds-grid::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

.preset-sounds-grid::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 3px;
}

.preset-sounds-grid::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

.sound-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.sound-option:hover {
  border-color: var(--accent-primary);
  background: var(--bg-hover);
}

.sound-option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--bg-primary);
  border-radius: 50%;
  color: var(--accent-primary);
}

.sound-option-icon.silent {
  color: var(--text-muted);
  font-size: 24px;
}

.sound-option-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
}

.sound-option-desc {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

.sound-option.custom .sound-delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: var(--transition);
}

.sound-option.custom:hover .sound-delete-btn {
  opacity: 1;
}

.sound-option.custom .sound-delete-btn:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.custom-sounds-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.custom-sounds-hint {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

.sound-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--bg-tertiary);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.sound-upload-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.no-custom-sounds {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 20px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sound-option-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.sound-option-preview,
.sound-option-select {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.sound-option-preview:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.sound-option-select:hover {
  color: var(--success);
  border-color: var(--success);
  background: rgba(0, 255, 136, 0.1);
}

.sound-option.custom .sound-delete-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}

.sound-option.custom .sound-delete-btn:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(255, 107, 107, 0.1);
}

.sound-option-select {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--bg-primary);
}

.sound-option-select:hover {
  background: var(--accent-primary);
  filter: brightness(1.1);
}

/* QR Login Scanner Styles */
.section-description {
  color: var(--text-muted);
  margin-bottom: 20px;
  font-size: 14px;
}

.qr-scanner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  min-height: 300px;
}

.qr-scanner-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.qr-scanner-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  border-radius: 16px;
  color: var(--accent-primary);
}

.qr-scanner-icon svg {
  width: 48px;
  height: 48px;
}

.qr-scanner-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.qr-video-wrapper {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.qr-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qr-scan-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.qr-scan-frame {
  width: 200px;
  height: 200px;
  border: 3px solid var(--accent-primary);
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  animation: qrFramePulse 2s ease-in-out infinite;
}

@keyframes qrFramePulse {
  0%, 100% { border-color: var(--accent-primary); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5), 0 0 20px var(--accent-primary); }
  50% { border-color: var(--accent-secondary); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5), 0 0 30px var(--accent-secondary); }
}

.qr-scanning-hint {
  color: var(--text-muted);
  font-size: 14px;
}

.qr-scanned-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.qr-scanned-user {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--bg-primary);
  border-radius: 12px;
  width: 100%;
}

.qr-scanned-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.qr-scanned-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qr-scanned-avatar span {
  font-size: 24px;
  font-weight: 600;
  color: var(--bg-primary);
}

.qr-scanned-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qr-scanned-email {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.qr-scanned-status {
  font-size: 13px;
  color: var(--accent-primary);
}

.qr-authorize-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.qr-authorize-section p {
  color: var(--text-muted);
  font-size: 14px;
}

.authorize-btn {
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
}

.qr-approval-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-primary);
  font-size: 13px;
}

.pulse-animation {
  animation: pulse 1.5s ease-in-out infinite;
  color: var(--accent-primary);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.qr-success,
.qr-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

.qr-success-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 255, 136, 0.15);
  border-radius: 50%;
  color: var(--success);
}

.qr-success h3 {
  font-size: 20px;
  color: var(--success);
}

.qr-success p {
  color: var(--text-muted);
}

.qr-error-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 107, 107, 0.15);
  border-radius: 50%;
  color: var(--danger);
}

.qr-error h3 {
  font-size: 20px;
  color: var(--danger);
}

.qr-error p {
  color: var(--text-muted);
}

/* Account Info Styles */
.account-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.account-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
}

.account-info-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.account-info-value {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}

.account-info-value.mono {
  font-family: monospace;
  color: var(--accent-primary);
}

.friend-code-item {
  gap: 8px;
}

.friend-code-display {
  display: flex;
  align-items: center;
  gap: 12px;
}

.friend-code-value {
  font-family: monospace;
  font-size: 1.3em;
  font-weight: bold;
  letter-spacing: 3px;
  color: var(--accent-primary);
}

.btn-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-copy:hover {
  background: var(--accent-primary);
  color: var(--text-on-accent);
  border-color: var(--accent-primary);
}

.friend-code-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.settings-section .section-description {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 20px;
}

.unsaved-settings-banner {
  position: fixed;
  top: 0;
  left: 240px;
  right: 0;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--warning, #f59e0b);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 99999;
  animation: slideDown 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.unsaved-settings-content {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--warning, #f59e0b);
  font-weight: 500;
}

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

.unsaved-settings-actions .btn {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 768px) {
  .unsaved-settings-banner {
    left: 0;
    bottom: 60px;
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .unsaved-settings-content {
    flex-direction: column;
  }

  .unsaved-settings-actions {
    width: 100%;
  }

  .unsaved-settings-actions .btn {
    flex: 1;
  }
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.form-actions .btn {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-effects-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 24px;
  padding: 20px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
}

.profile-card-preview {
  width: 300px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s ease;
}

.profile-card-preview:hover {
  transform: translateY(-4px);
}

.settings-small-card-preview {
  width: 340px;
  border: 1px solid;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.settings-small-card-preview.glass {
  backdrop-filter: blur(16px);
}

.settings-small-card-banner {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

.settings-small-card-banner-accent {
  position: absolute;
  inset: 0;
  opacity: 0.92;
}

.settings-small-card-body {
  position: relative;
  margin-top: -24px;
  padding: 14px;
}

.settings-small-card-avatar {
  width: 74px;
  height: 74px;
  border-radius: 20px;
  border: 3px solid;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.04));
  box-shadow: 0 14px 28px rgba(0,0,0,0.25);
}

.settings-small-card-preview.center .settings-small-card-avatar {
  margin: 0 auto;
}

.settings-small-card-name {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 700;
}

.settings-small-card-subtext,
.settings-small-card-bio,
.settings-small-card-meta {
  font-size: 12px;
}

.settings-small-card-subtext {
  margin-top: 4px;
}

.settings-small-card-badges {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.settings-small-card-preview.center .settings-small-card-badges,
.settings-small-card-preview.center .settings-small-card-meta {
  justify-content: center;
}

.settings-small-card-badges span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
}

.settings-small-card-bio {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.28);
}

.settings-small-card-meta {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.settings-small-card-meta span {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.28);
}

.preview-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  margin: 0 auto 16px;
}

.preview-name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.preview-pronouns {
  font-size: 12px;
  margin-bottom: 12px;
}

.preview-about {
  font-size: 14px;
  color: var(--text-secondary);
}

.settings-group {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.settings-group:last-of-type {
  border-bottom: none;
}

.settings-group h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.settings-group .form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.settings-group .form-row label {
  flex: 0 0 140px;
  font-size: 13px;
  color: var(--text-secondary);
}

.settings-group .form-row select,
.settings-group .form-row input[type="color"],
.settings-group .form-row input[type="text"],
.settings-group .form-row input[type="number"] {
  flex: 1;
  max-width: 200px;
}

.settings-group input[type="range"] {
  flex: 1;
  max-width: 150px;
}

.settings-group input[type="range"] + span {
  width: 50px;
  text-align: right;
  font-size: 12px;
  color: var(--text-muted);
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.settings-actions .btn {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

@keyframes rainbow-border {
  0% { border-color: #ff0000; }
  16% { border-color: #ff8800; }
  33% { border-color: #ffff00; }
  50% { border-color: #00ff00; }
  66% { border-color: #0088ff; }
  83% { border-color: #8800ff; }
  100% { border-color: #ff0000; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.two-factor-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

.two-factor-status {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
  padding-left: 4px;
}

.two-factor-status .status-enabled {
  color: var(--accent-primary);
}

.warning-modal {
  text-align: center;
  padding: 32px;
}

.warning-modal .modal-icon {
  margin-bottom: 16px;
}

.warning-modal .modal-icon.warning {
  color: #ffaa00;
}

.warning-modal h3 {
  font-size: 20px;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.warning-modal p {
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.6;
}

.warning-modal .warning-note {
  font-size: 13px;
  color: var(--text-muted);
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  margin-bottom: 24px;
}

.warning-modal .modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.warning-modal .btn-danger {
  background: var(--danger);
  color: var(--text-on-accent);
}

.warning-modal .btn-danger:hover {
  background: #ff4757;
}

.settings-page .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  backdrop-filter: blur(4px);
}

.settings-page .modal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 32px;
  max-width: 450px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn-danger {
  background: var(--danger);
  color: var(--text-on-accent);
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
}

.btn-danger:hover {
  background: #ff4757;
}

.animation-components-list {
  margin-top: 12px;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
}

.animation-components-list .components-header {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-weight: 500;
}

.animation-components-list .toggle-item {
  background: var(--bg-secondary);
  padding: 10px 14px;
}

.animation-components-list .toggle-label {
  font-size: 13px;
}

.reduce-motion-slider {
  margin-top: 12px;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
}

.reduce-motion-slider .slider-label {
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 12px;
  font-weight: 500;
}

.reduce-motion-slider .motion-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-hover);
  appearance: none;
  cursor: pointer;
}

.reduce-motion-slider .motion-slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-primary);
  cursor: pointer;
  box-shadow: 0 0 10px var(--accent-glow);
}

.reduce-motion-slider .slider-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
}

.api-key-section {
  margin-top: 16px;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
}

.api-key-display {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.api-key-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.api-key-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  background: var(--bg-secondary);
  padding: 12px;
  border-radius: var(--radius);
  word-break: break-all;
  color: var(--accent-primary);
}

.api-key-warning {
  font-size: 12px;
  color: var(--danger);
}

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

.theme-data-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.theme-data-actions .btn {
  display: flex;
  align-items: center;
  gap: 8px;
}

.import-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.import-textarea {
  width: 100%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 12px;
  color: var(--text-primary);
  resize: vertical;
}

.import-textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
}

/* ============================================
   SETTINGS SUB-TABS (Appearance tab)
   ============================================ */
.settings-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  padding: 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) var(--bg-tertiary);
}

.settings-tabs::-webkit-scrollbar {
  height: 4px;
}

.settings-tabs::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

.settings-tabs::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 2px;
}

.settings-sub-tab {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.settings-sub-tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.settings-sub-tab.active {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 204, 106, 0.1) 100%);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

/* ============================================
   FONT SETTINGS
   ============================================ */
.font-preview-panel {
  margin-bottom: 24px;
}

.font-preview-display {
  padding: 24px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  text-align: center;
}

.font-preview-display .preview-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.font-preview-display .preview-text {
  display: block;
  font-size: 18px;
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: 8px;
}

.font-preview-display .preview-size {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}

.font-options-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
}

.font-options-list::-webkit-scrollbar {
  width: 6px;
}

.font-options-list::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

.font-options-list::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.font-option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  color: var(--text-primary);
}

.font-option-item:hover {
  border-color: var(--accent-primary);
  background: var(--bg-hover);
}

.font-option-item.active {
  border-color: var(--accent-primary);
  background: rgba(0, 255, 136, 0.1);
  box-shadow: 0 0 10px var(--accent-glow);
}

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

.font-active-indicator {
  color: var(--accent-primary);
  display: flex;
  align-items: center;
}

.size-options {
  display: flex;
  gap: 8px;
}

.size-btn {
  padding: 8px 20px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.size-btn:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.size-btn.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--bg-primary);
}

/* ============================================
   FORM HELPER CLASSES
   ============================================ */
.color-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-input-wrapper input[type="color"] {
  width: 50px;
  height: 36px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: none;
  padding: 2px;
}

.color-value {
  font-size: 12px;
  color: var(--text-muted);
  font-family: monospace;
}

.range-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.range-wrapper input[type="range"] {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  background: var(--border-color);
  border-radius: 2px;
  cursor: pointer;
}

.range-wrapper input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--accent-primary);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s;
}

.range-wrapper input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.range-value {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 40px;
  text-align: right;
}

.avatar-preview-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
}

.avatar-preview-row span {
  font-size: 13px;
  color: var(--text-muted);
}

/* ============================================
   THEME STORE FILTERS
   ============================================ */
.theme-store-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: all 0.2s ease;
}

.search-input:hover {
  border-color: var(--accent-primary);
}

.search-input:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.search-input svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.search-input input {
  flex: 1;
  border: none;
  background: none;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}

.search-input input::placeholder {
  color: var(--text-muted);
}

.theme-filter {
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  transition: all 0.2s ease;
}

.theme-filter:hover {
  border-color: var(--accent-primary);
}

.theme-filter:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ============================================
   SETTINGS TAB CONTENT (generic)
   ============================================ */
.settings-tab-content {
  animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
  .settings-tabs {
    padding: 6px;
    gap: 4px;
  }
  
  .settings-sub-tab {
    padding: 6px 12px;
    font-size: 12px;
  }
  
  .font-options-list {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }
  
  .chat-presets-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  
  .style-options-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }
  
  .alignment-options {
    flex-wrap: wrap;
  }
  
  .alignment-btn {
    flex: 1 1 calc(50% - 4px);
  }
  
  .background-options {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  
  .animation-options {
    grid-template-columns: 1fr;
  }
  
  .typography-options {
    grid-template-columns: 1fr;
  }
  
  .layout-options {
    grid-template-columns: 1fr;
  }
  
  .color-options {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}

/* ============================================
   CUSTOM ICONS
   ============================================ */
.custom-icons-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 20px 0;
}

.custom-icon-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: all 0.2s ease;
}

.custom-icon-item:hover {
  border-color: var(--accent-primary);
}

.icon-info {
  flex: 1;
}

.icon-info h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}

.icon-info p {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.icon-upload-area {
  margin-left: 16px;
}

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

.icon-preview img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  padding: 4px;
}

.icon-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 4px;
  color: var(--text-muted);
  font-size: 12px;
}

.icon-upload-placeholder:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: rgba(0, 255, 136, 0.05);
}

.icon-upload-placeholder svg {
  width: 24px;
  height: 24px;
}

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.btn-icon:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.btn-icon.danger:hover {
  background: rgba(255, 107, 107, 0.1);
  color: #ff6b6b;
}

.section-description {
  font-size: 13px;
  color: var(--text-muted);
  margin: -8px 0 20px 0;
}

.effect-option {
  padding: 8px 16px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.effect-option:hover {
  border-color: var(--accent-primary);
  background: rgba(0, 255, 136, 0.1);
}

.effect-option.active {
  border-color: var(--accent-primary);
  background: rgba(0, 255, 136, 0.15);
  box-shadow: 0 0 10px var(--accent-glow);
}

.tag-preview {
  transition: all 0.3s ease;
}

.danger-zone-section {
  max-width: 600px;
}

.danger-zone-card {
  background: var(--bg-secondary, var(--surface));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.danger-zone-card.critical {
  border-color: color-mix(in srgb, var(--danger, #ff4444) 40%, transparent);
  background: color-mix(in srgb, var(--danger, #ff4444) 5%, var(--bg-secondary, var(--surface)));
}

.danger-zone-card.deletion-scheduled {
  border-color: color-mix(in srgb, var(--warning, #ffaa00) 40%, transparent);
  background: color-mix(in srgb, var(--warning, #ffaa00) 5%, var(--bg-secondary, var(--surface)));
}

.danger-zone-card-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex: 1;
}

.danger-zone-card-header svg {
  color: var(--danger, #ff4444);
  flex-shrink: 0;
  margin-top: 2px;
}

.danger-zone-card.deletion-scheduled .danger-zone-card-header svg {
  color: var(--warning, #ffaa00);
}

.danger-zone-card-header h3 {
  margin: 0 0 4px 0;
  font-size: 15px;
  color: var(--text-primary);
}

.danger-zone-card-header p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.danger-zone-card .btn {
  flex-shrink: 0;
  align-self: center;
}

.danger-modal {
  background: var(--bg-primary, var(--surface));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  max-width: 440px;
  width: 90%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
}

.danger-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.danger-modal-header svg {
  color: var(--warning, #ffaa00);
}

.danger-modal-header.critical svg {
  color: var(--danger, #ff4444);
}

.danger-modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--text-primary);
}

.danger-modal > p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.danger-modal-field {
  margin-bottom: 16px;
}

.danger-modal-field label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.danger-modal-field input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-secondary, var(--surface-alt));
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.danger-modal-field input:focus {
  border-color: var(--accent-primary);
}

.danger-modal-error {
  color: var(--danger, #ff4444);
  font-size: 13px;
  margin: 0 0 16px 0;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--danger, #ff4444) 10%, transparent);
  border-radius: 6px;
}

.danger-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}
/* Avatar Upload Styles */
.media-upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 16px;
}

.media-upload-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.media-upload-item label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.avatar-upload-preview,
.banner-upload-preview {
  position: relative;
  cursor: pointer;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--border-color);
  transition: all 0.2s ease;
}

.avatar-upload-preview:hover,
.banner-upload-preview:hover {
  border-color: var(--accent-primary);
}

.avatar-upload-preview.drag-active,
.banner-upload-preview.drag-active {
  border-color: var(--accent-primary);
  background-color: rgba(0, 255, 136, 0.08);
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.2);
}

.avatar-upload-preview:hover .upload-overlay,
.banner-upload-preview:hover .upload-overlay {
  opacity: 1;
}

.upload-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
  color: var(--text-on-accent);
  font-size: 14px;
}

.upload-overlay span:first-child {
  font-size: 24px;
}

.avatar-display {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-tertiary);
}

.avatar-display img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-display span {
  font-size: 48px;
  font-weight: 600;
  color: var(--text-muted);
}

.avatar-large {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid var(--border-color);
}

.avatar-preview-small {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  margin-left: 12px;
}

.banner-display {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 14px;
  overflow: hidden;
}

.banner-display img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-preview-modal {
  width: 100%;
  height: 120px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.upload-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* Avatar Effects */
.avatar-effects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.avatar-effect-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
}

.avatar-effect-btn:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}

.avatar-effect-btn.active {
  border-color: var(--accent-primary);
  background: rgba(0, 255, 136, 0.1);
  box-shadow: 0 0 15px var(--accent-glow);
}

.effect-icon {
  font-size: 24px;
}

.effect-name {
  font-size: 11px;
  color: var(--text-muted);
}

.avatar-effect-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
}

.avatar-effect-preview span {
  font-size: 13px;
  color: var(--text-muted);
}

/* Avatar Animations */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spin-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

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

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  75% { transform: rotate(-15deg); }
}

@keyframes rainbow {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px var(--accent-primary); }
  50% { box-shadow: 0 0 25px var(--accent-primary), 0 0 50px var(--accent-primary); }
}

@keyframes tada {
  0%, 100% { transform: scale(1) rotate(0deg); }
  10%, 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(-3deg); }
  20%, 40%, 60%, 80% { transform: scale(1.1) rotate(3deg); }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}

@keyframes flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes swing {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  75% { transform: rotate(-15deg); }
}

@keyframes wobble {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px) rotate(-5deg); }
  75% { transform: translateX(10px) rotate(5deg); }
}

/* Theme Editor */
.theme-editor-panel {
  margin-top: 16px;
  padding: 20px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
}

.theme-colors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.color-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.color-input-group label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.color-input-group input[type="color"] {
  width: 100%;
  height: 40px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  background: none;
  padding: 0;
}

.theme-editor-preview {
  margin: 20px 0;
}

.theme-editor-preview h4 {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.mini-preview {
  padding: 16px;
  border: 1px solid;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Preview Modal */
.preview-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.preview-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 500px;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.preview-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.preview-modal-header h3 {
  margin: 0;
  font-size: 18px;
}

.preview-modal-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.avatar-preview-modal {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 4px solid var(--border-color);
}

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

.banner-preview-modal {
  width: 100%;
  height: 120px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--border-color);
}

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

.preview-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.preview-modal-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.upload-progress-bar {
  width: 100%;
  height: 24px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--accent-primary);
  transition: width 0.3s ease;
}

.upload-progress-bar span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--bg-primary);
}

/* Themes Grid */
.themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

/* Toggle Switch */
.toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  margin-bottom: 8px;
}

.toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.toggle-desc {
  font-size: 12px;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

/* Responsive */
@media (max-width: 768px) {
  .media-upload-grid {
    grid-template-columns: 1fr;
  }
  
  .avatar-effects-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
  
  .themes-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}

/* Cursor Effects Section */
.cursor-preview-panel {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.cursor-preview-display {
  text-align: center;
}

.cursor-preview-display .preview-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.cursor-demo-area {
  background: var(--bg-secondary);
  border: 2px dashed var(--border-color);
  border-radius: 8px;
  padding: 40px;
  font-size: 14px;
  color: var(--text-secondary);
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cursor-effects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.cursor-effect-card {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.cursor-effect-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cursor-effect-card.active {
  border-color: var(--accent-primary);
  background: rgba(0, 255, 136, 0.1);
}

.cursor-effect-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  margin-bottom: 12px;
}

.cursor-preview-icon {
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cursor-preview-icon.default {
  color: var(--text-secondary);
}

.cursor-preview-icon.pointer {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.cursor-preview-icon.crosshair {
  font-weight: bold;
  color: var(--danger);
}

.cursor-preview-icon.neon {
  animation: cursor-sparkle 1s ease-in-out infinite;
  filter: drop-shadow(0 0 8px var(--accent-primary));
}

.cursor-preview-icon.sparkle {
  animation: cursor-twinkle 0.8s ease-in-out infinite;
}

.cursor-preview-icon.trail {
  background: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cursor-preview-icon.laser {
  color: #00ffff;
  text-shadow: 0 0 10px #00ffff;
  animation: cursor-laser 0.5s ease-in-out infinite;
}

.cursor-preview-icon.star {
  color: #ffd700;
  text-shadow: 0 0 10px #ffd700;
  animation: cursor-spin 2s linear infinite;
}

.cursor-preview-icon.ghost {
  opacity: 0.6;
  animation: cursor-float 2s ease-in-out infinite;
}

.cursor-preview-icon.comet {
  color: #ff6b35;
  text-shadow: 0 0 15px #ff6b35;
  animation: cursor-trail 1s ease-out infinite;
}

.cursor-preview-icon.pixel {
  image-rendering: pixelated;
  filter: contrast(1.5);
}

.cursor-preview-icon.fire {
  color: #ff4500;
  text-shadow: 0 0 10px #ff4500, 0 0 20px #ff6600;
  animation: cursor-flicker 0.3s ease-in-out infinite;
}

.cursor-preview-icon.ice {
  color: #00bfff;
  text-shadow: 0 0 10px #00bfff, 0 0 20px #88ccff;
  animation: cursor-shimmer 2s ease-in-out infinite;
}

.cursor-preview-icon.cyber {
  color: #ff00ff;
  text-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff;
  animation: cursor-glitch 0.5s ease-in-out infinite;
}

.cursor-preview-icon.magic {
  color: #ffd700;
  text-shadow: 0 0 15px #ffd700, 0 0 30px #ff00ff;
  animation: cursor-magic 1.5s ease-in-out infinite;
}

@keyframes cursor-sparkle {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

@keyframes cursor-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(10deg); }
}

@keyframes cursor-laser {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes cursor-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes cursor-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes cursor-trail {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(20px); opacity: 0.5; }
}

@keyframes cursor-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes cursor-shimmer {
  0%, 100% { filter: brightness(1) hue-rotate(0deg); }
  50% { filter: brightness(1.3) hue-rotate(20deg); }
}

@keyframes cursor-glitch {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(2px, -2px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
}

@keyframes cursor-magic {
  0%, 100% { transform: rotate(-5deg) scale(1); }
  50% { transform: rotate(5deg) scale(1.1); }
}

.cursor-effect-info {
  text-align: center;
}

.cursor-effect-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.cursor-effect-desc {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}

.cursor-active-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: var(--accent-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-primary);
}

@media (max-width: 768px) {
  .cursor-effects-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* Name Effects Styles */
.name-effects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
  margin-bottom: 16px;
}

.name-effects-grid::-webkit-scrollbar {
  width: 6px;
}

.name-effects-grid::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
  border-radius: 3px;
}

.name-effects-grid::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.name-effect-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-primary);
}

.name-effect-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}

.name-effect-btn.active {
  background: var(--bg-tertiary);
  border-color: var(--accent-primary);
  box-shadow: 0 0 15px var(--accent-glow);
}

.name-effect-preview {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.name-effect-btn .effect-name {
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.name-effect-btn.active .effect-name {
  color: var(--accent-primary);
}

.name-effect-live-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
}

.name-effect-live-preview .preview-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.name-effect-live-preview .preview-name {
  font-size: 20px;
  font-weight: 700;
}

/* Improved Preview Modal Styles */
.preview-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.preview-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.preview-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}

.preview-modal-header .header-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.preview-modal-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0 0;
}

.preview-modal-header .close-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s ease;
}

.preview-modal-header .close-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.preview-modal-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

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

.avatar-display.avatar-preview-modal {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: 4px solid var(--accent-primary);
  box-shadow: 0 0 30px var(--accent-glow);
}

.avatar-display.avatar-preview-modal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-preview-badge {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-primary);
  color: var(--bg-primary);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.banner-preview-wrapper {
  position: relative;
  width: 100%;
}

.banner-display.banner-preview-modal {
  width: 100%;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border-color);
}

.banner-display.banner-preview-modal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-preview-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--text-on-accent);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(4px);
}

.upload-status {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upload-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.upload-progress-bar .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-text {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

.preview-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
}

.upload-actions,
.uploading-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.upload-actions .btn,
.uploading-actions .btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--text-on-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Preview Modal Responsive */
@media (max-width: 480px) {
  .preview-modal {
    width: 95%;
    margin: 16px;
  }
  
  .avatar-display.avatar-preview-modal {
    width: 140px;
    height: 140px;
  }
}
/* Theme Store Styles */
.theme-store-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.theme-search {
  flex: 1;
  min-width: 200px;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
}

.theme-search:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.theme-filter {
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
}

.theme-filter:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.theme-card {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.theme-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}

.theme-card.active {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px var(--accent-primary);
}

.theme-preview {
  height: 120px;
  overflow: hidden;
}

.preview-bar {
  height: 24px;
  width: 100%;
}

.preview-content {
  display: flex;
  height: 96px;
}

.preview-sidebar {
  width: 48px;
  height: 100%;
}

.preview-main {
  flex: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.preview-msg {
  height: 24px;
  border-radius: 4px;
}

.theme-info {
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.theme-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.custom-badge {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--accent-primary);
  color: var(--text-on-accent);
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 600;
}

.theme-author {
  font-size: 12px;
  color: var(--text-muted);
}

.theme-stats {
  display: flex;
  gap: 12px;
  padding: 0 12px 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.theme-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.theme-card:hover .theme-actions {
  opacity: 1;
}

.theme-actions button {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: rgba(0, 0, 0, 0.7);
  color: var(--text-on-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.2s ease;
}

.theme-actions button:hover {
  background: var(--accent-primary);
}

.theme-import-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}

/* Theme Editor Styles */
.theme-editor-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

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

.color-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.color-input-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.color-input-group input[type="color"] {
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
}

.color-input-group input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-input-group input[type="color"]::-webkit-color-swatch {
  border: 2px solid var(--border-color);
  border-radius: 8px;
}

.theme-editor-preview {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 20px;
}

.theme-editor-preview h4 {
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text-muted);
}

.mini-preview {
  border: 2px solid;
  border-radius: 8px;
  padding: 16px;
  min-height: 80px;
}

.theme-editor-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Preview Modal Styles */
.preview-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.preview-modal {
  background: var(--bg-secondary);
  border-radius: 16px;
  width: 90%;
  max-width: 500px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.preview-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.preview-modal-header h3 {
  font-size: 18px;
  font-weight: 600;
}

.close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

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

.preview-modal-content {
  padding: 24px;
  display: flex;
  justify-content: center;
}

.avatar-preview-modal {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--border-color);
}

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

.banner-preview-modal {
  width: 100%;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--border-color);
}

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

.preview-modal-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.upload-progress-bar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}

.upload-progress-bar .progress-fill {
  flex: 1;
  height: 8px;
  background: var(--accent-primary);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.upload-progress-bar span {
  font-size: 14px;
  color: var(--text-muted);
  min-width: 40px;
}

/* Effect Grid Styles */
.effects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.effect-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.effect-option:hover {
  border-color: var(--accent-primary);
  background: var(--bg-quaternary);
}

.effect-option.active {
  border-color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb, 0, 255, 136), 0.1);
}

.effect-option .effect-icon {
  font-size: 28px;
}

.effect-option .effect-name {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

/* Avatar Border Styles */
.border-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.border-preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.border-preset:hover {
  border-color: var(--accent-primary);
}

.border-preset.active {
  border-color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb, 0, 255, 136), 0.1);
}

.border-preset-icon {
  font-size: 24px;
}

.border-preset-name {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Glow Presets */
.glow-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.glow-preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.glow-preset:hover {
  border-color: var(--accent-primary);
}

.glow-preset.active {
  border-color: var(--accent-primary);
}

.glow-preview-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-secondary);
}

.glow-preset-name {
  font-size: 10px;
  color: var(--text-muted);
}

/* Font Preview */
.font-preview-text {
  font-size: 16px;
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  margin-top: 8px;
  color: var(--text-primary);
}

.font-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 8px;
}

.font-options-list::-webkit-scrollbar {
  width: 6px;
}

.font-options-list::-webkit-scrollbar-track {
  background: transparent;
}

.font-options-list::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.font-option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.font-option-item:hover {
  border-color: var(--accent-primary);
}

.font-option-item.active {
  border-color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb, 0, 255, 136), 0.1);
}

.font-option-name {
  font-size: 14px;
  font-weight: 500;
}

/* Notifications Settings */
.notifications-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Responsive */
@media (max-width: 768px) {
  .themes-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  
  .theme-colors-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  
  .theme-store-filters {
    flex-direction: column;
  }
}
/* Ultra Settings Styles - Beautiful & Detailed */

/* Animations */
@keyframes neon-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

@keyframes matrix-scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px var(--accent-primary); }
  50% { box-shadow: 0 0 40px var(--accent-primary), 0 0 60px var(--accent-primary); }
}

@keyframes slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Theme Card Enhancements */
.theme-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.05) 100%);
  pointer-events: none;
}

.theme-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.theme-card.active {
  box-shadow: 0 0 0 2px var(--accent-primary), 0 20px 40px rgba(0,0,0,0.3);
}

.theme-glow-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 10px var(--accent-primary);
  animation: glow-pulse 2s ease-in-out infinite;
}

.theme-preview {
  position: relative;
  height: 140px;
  overflow: hidden;
}

.theme-preview::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(transparent, rgba(0,0,0,0.3));
}

/* Font Options */
.font-options-list {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 8px;
}

.font-options-list::-webkit-scrollbar {
  width: 6px;
}

.font-options-list::-webkit-scrollbar-track {
  background: transparent;
}

.font-options-list::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.font-options-list::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

.font-option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 8px;
}

.font-option-item:hover {
  border-color: var(--accent-primary);
  background: var(--bg-quaternary);
  transform: translateX(4px);
}

.font-option-item.active {
  border-color: var(--accent-primary);
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb, 0, 255, 136), 0.1) 0%, transparent 100%);
  box-shadow: 0 0 20px rgba(var(--accent-primary-rgb, 0, 255, 136), 0.2);
}

.font-active-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: var(--bg-primary);
}

/* Font Preview Panel */
.font-preview-panel {
  background: var(--bg-tertiary);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  border: 1px solid var(--border-color);
}

.font-preview-display {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.preview-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
}

.preview-text {
  font-size: 24px;
  line-height: 1.4;
  color: var(--text-primary);
}

.preview-size {
  font-size: 14px;
  color: var(--text-muted);
}

/* Size Options */
.size-options {
  display: flex;
  gap: 8px;
}

.size-btn {
  flex: 1;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.size-btn:hover {
  border-color: var(--accent-primary);
}

.size-btn.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--bg-primary);
}

/* Avatar Effects Grid */
.avatar-effects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.avatar-effect-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.avatar-effect-btn:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.avatar-effect-btn.active {
  border-color: var(--accent-primary);
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb, 0, 255, 136), 0.15) 0%, transparent 100%);
  box-shadow: 0 0 20px rgba(var(--accent-primary-rgb, 0, 255, 136), 0.3);
}

.effect-preview {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-primary);
  opacity: 0.8;
}

.effect-name {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  font-weight: 500;
}

/* Avatar Preview Row */
.avatar-preview-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 12px;
}

.avatar-preview-row > span {
  font-size: 14px;
  color: var(--text-muted);
}

/* Color Input Wrapper */
.color-input-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.color-input-wrapper input[type="color"] {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  background: transparent;
  padding: 0;
}

.color-input-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-input-wrapper input[type="color"]::-webkit-color-swatch {
  border: 2px solid var(--border-color);
  border-radius: 12px;
}

.color-value {
  font-family: 'Source Code Pro', monospace;
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Range Wrapper */
.range-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.range-wrapper input[type="range"] {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  background: var(--bg-quaternary);
  border-radius: 3px;
  outline: none;
}

.range-wrapper input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-primary);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}

.range-wrapper input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.range-value {
  min-width: 45px;
  text-align: right;
  font-size: 13px;
  color: var(--text-muted);
  font-family: 'Source Code Pro', monospace;
}

/* Section Label */
.section-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: block;
}

/* Group Icon */
.group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  opacity: 0.7;
}

/* Settings Group */
.settings-group h3 {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary);
}

/* Search Input */
.search-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  flex: 1;
}

.search-input input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 14px;
}

.search-input input::placeholder {
  color: var(--text-muted);
}

.search-input svg {
  color: var(--text-muted);
}

/* Form Row */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

/* Toggle Switch Enhancements */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-quaternary);
  border: 2px solid var(--border-color);
  border-radius: 28px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(24px);
  background: var(--bg-primary);
}

/* Theme Editor Panel */
.theme-editor-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

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

.color-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.color-input-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.color-input-group input[type="color"] {
  width: 100%;
  height: 48px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  background: transparent;
  padding: 4px;
}

.color-input-group input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-input-group input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 8px;
}

.theme-editor-preview {
  background: var(--bg-tertiary);
  border-radius: 16px;
  padding: 24px;
}

.theme-editor-preview h4 {
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.mini-preview {
  border: 2px solid;
  border-radius: 12px;
  padding: 20px;
  min-height: 100px;
  transition: all 0.3s ease;
}

.theme-editor-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Theme Store Filters */
.theme-store-filters {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.theme-filter {
  padding: 12px 20px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  min-width: 140px;
}

.theme-filter:focus {
  outline: none;
  border-color: var(--accent-primary);
}

/* Badge Styles */
.custom-badge,
.default-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.custom-badge {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  color: var(--bg-primary);
}

.default-badge {
  background: var(--bg-quaternary);
  color: var(--text-muted);
}

/* Theme Stats */
.theme-stats {
  display: flex;
  gap: 12px;
  padding: 0 12px 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.theme-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Back Link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 12px;
  transition: color 0.2s ease;
}

.back-link:hover {
  color: var(--accent-primary);
}

/* Responsive */
@media (max-width: 768px) {
  .themes-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
  
  .theme-colors-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  
  .avatar-effects-grid {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .theme-store-filters {
    flex-direction: column;
  }
}
.shop-dm-context {
  flex-shrink: 0;
}

.shop-context-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin: 8px 12px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border-color, #2a2a3a);
  background: var(--bg-tertiary, #1a1a24);
}

.shop-context-banner.order-context {
  border-left: 3px solid var(--accent-primary, #00ff88);
}

.shop-context-banner.item-context {
  border-left: 3px solid var(--warning, #ffa502);
}

.shop-context-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm, 8px);
  background: rgba(0, 255, 136, 0.08);
  color: var(--accent-primary, #00ff88);
  flex-shrink: 0;
}

.shop-context-banner.item-context .shop-context-icon {
  background: rgba(255, 165, 2, 0.08);
  color: var(--warning, #ffa502);
}

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

.shop-context-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.shop-context-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #555566);
}

.shop-context-order-number {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  font-family: monospace;
}

.shop-context-status {
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
}

.shop-context-details {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shop-context-item-name {
  font-size: 13px;
  color: var(--text-secondary, #888899);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-context-price {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-primary, #00ff88);
  flex-shrink: 0;
}

.shop-context-view-order {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--accent-secondary, #00cc6a);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border-color, #2a2a3a);
  flex-shrink: 0;
  transition: var(--transition, all 0.2s ease);
}

.shop-context-view-order:hover {
  background: var(--bg-hover, #22222e);
  border-color: var(--accent-primary, #00ff88);
}

@media (max-width: 768px) {
  .shop-context-banner {
    margin: 6px 8px;
    padding: 8px 12px;
    gap: 8px;
  }

  .shop-context-view-order span {
    display: none;
  }
}
/* DM Page */
.dm-page { 
  flex: 1; 
  display: flex; 
  overflow: hidden; 
  min-height: 0;
  height: 100%;
  width: 100%;
  min-width: 0;
}
.dm-sidebar { 
  width: 320px !important;
  min-width: 320px !important;
  max-width: 320px !important;
  background: var(--bg-secondary); 
  border-right: 1px solid var(--border-color); 
  display: flex; 
  flex-direction: column; 
  overflow: hidden; 
}
.dm-sidebar-header {
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
}
.dm-sidebar-header h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.dm-new-chat-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-primary);
  border: none;
  border-radius: 50%;
  color: var(--bg-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.dm-new-chat-btn:hover {
  background: var(--accent-secondary);
  transform: scale(1.05);
}
.conversation-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.dm-user-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  margin-bottom: 2px;
}
.dm-user-item:hover {
  background: var(--bg-tertiary);
}
.dm-user-item.active {
  background: var(--bg-tertiary);
  border-left: 3px solid var(--accent-primary);
}
.dm-user-item.active .dm-user-name,
.dm-user-item.active .dm-user-username {
  color: var(--text-primary);
}
.dm-user-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}
.dm-user-status-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid var(--bg-secondary);
}
.dm-user-status-dot.online {
  background: #3ba55c;
}
.dm-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dm-user-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-user-username {
  font-size: 12px;
  color: var(--text-muted);
}
.dm-user-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.dm-unread-badge {
  background: var(--accent-primary);
  color: var(--bg-primary);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}
.dm-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-primary);
}
.dm-messages-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
}
.dm-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: 1;
}
.dm-header-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.dm-header-status {
  font-size: 12px;
  color: var(--text-muted);
}
.group-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.group-header-info .group-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: #0a0a0f;
}
.group-header-info .group-icon img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.group-header-info .group-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.group-header-info .group-description {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.group-header-info .member-count {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.message-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.date-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0;
}
.date-divider::before,
.date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}
.date-divider span {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Discord-style inline chat layout */
.message {
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.message:hover {
  background: rgba(255, 255, 255, 0.03);
}
.message.own {
  /* Keep inline, not reversed */
}
.message.selected {
  background: rgba(0, 255, 136, 0.08);
  border-left: 2px solid var(--accent, #00ff88);
  padding-left: 14px;
  border-radius: 4px;
}
.message-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.message.own .message-content {
  align-items: flex-start;
}
.message-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.message-author {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.message.own .message-author {
  display: flex;
}
.message-time {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.message-status {
  font-size: 11px;
  margin-left: 2px;
}
.message-status.sending {
  color: var(--text-muted);
  animation: pulse 1s infinite;
}
.message.sending .message-text,
.message.sending .message-author,
.message.sending .message-time {
  opacity: 0.6;
}
.message.sending {
  filter: grayscale(0.3);
}
.message-status.sent {
  color: var(--text-muted);
}
.message-status.delivered {
  color: var(--accent-primary);
}
@keyframes messageAppear {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes messageReplace {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.edited-tag {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 4px;
  font-style: italic;
}
.message-text {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: break-word;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
/* Remove bubble styling - use plain text */
.message.own .message-text {
  background: transparent;
  color: var(--text-primary);
  padding: 0;
  border-radius: 0;
}
.message:not(.own) .message-text {
  background: transparent;
  padding: 0;
  border-radius: 18px 18px 18px 4px;
}
.message-attachment {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.message-image {
  max-width: 300px;
  max-height: 200px;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.message-image:hover {
  opacity: 0.85;
}
.attachment-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.2s ease;
}
.attachment-file:hover {
  background: var(--bg-secondary);
}
.attachment-icon {
  font-size: 16px;
}
.attachment-name {
  font-size: 13px;
  font-weight: 500;
}
.dm-page .typing-indicator {
  padding: 12px 16px;
}
.message-input-form {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 16px 24px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}
.hidden-file-input {
  display: none;
}
.attach-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.attach-btn:hover:not(:disabled) {
  background: var(--bg-primary);
  color: var(--text-primary);
}
.attach-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.plus-icon {
  font-size: 20px;
  font-weight: 300;
}
.message-input {
  flex: 1;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  resize: none;
  line-height: 1.4;
  max-height: 200px;
  min-height: 24px;
  overflow-y: auto;
  scrollbar-width: none;
}
.message-input::-webkit-scrollbar {
  display: none;
}
.message-input::placeholder {
  color: var(--text-muted);
}
.message-input:focus {
  outline: none;
}
.message-input:disabled {
  opacity: 0.5;
}
.msg-char-count {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-end;
  padding-bottom: 12px;
}
.msg-char-count.over-limit {
  color: var(--warning, #fbbf24);
  font-weight: 600;
}
.send-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-primary);
  border: none;
  border-radius: 50%;
  color: var(--bg-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.send-btn:hover:not(:disabled) {
  background: var(--accent-secondary);
  transform: scale(1.05);
}
.send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.upload-preview-bar {
  padding: 12px 20px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 12px;
}
.upload-preview-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.upload-preview-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.upload-preview-item img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}
.upload-preview-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.upload-filename {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.upload-filesize {
  font-size: 11px;
  color: var(--text-muted);
}
.upload-progress-bar {
  width: 100px;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}
.upload-progress-fill {
  height: 100%;
  background: var(--accent-primary);
  transition: width 0.3s ease;
}
.upload-percent {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 40px;
}
.cancel-upload-btn {
  padding: 6px 12px;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
}
.cancel-upload-btn:hover {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* Loading & Error */
.dm-loading,
.dm-error {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--text-muted);
}
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* DM Context Menu */
.dm-context-menu {
  position: fixed;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 1000;
}
.context-menu-item {
  padding: 10px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  transition: background 0.15s ease;
}
.context-menu-item:hover {
  background: var(--bg-tertiary);
}
.context-menu-item.danger {
  color: #ed4245;
}
.context-menu-separator {
  height: 1px;
  background: var(--border-color);
  margin: 6px 0;
}

/* File Preview Modal */
.file-preview-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.file-preview-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  width: 90%;
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideIn 0.3s ease;
}
@keyframes slideIn {
  from { transform: scale(0.95) translateY(-10px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.file-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}
.file-preview-header span {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.close-preview-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s ease;
}
.close-preview-btn:hover {
  background: var(--bg-primary);
  color: var(--text-primary);
}
.file-preview-content {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: var(--bg-tertiary);
}
.file-preview-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  object-fit: contain;
}
.file-preview-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
}
.file-preview-icon span {
  font-size: 14px;
  word-break: break-all;
  text-align: center;
  max-width: 300px;
}
.file-preview-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.file-size {
  font-size: 12px;
  color: var(--text-muted);
}
.file-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.cancel-file-btn {
  padding: 10px 20px;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}
.cancel-file-btn:hover {
  background: var(--bg-primary);
  color: var(--text-primary);
}
.confirm-file-btn {
  padding: 10px 20px;
  background: var(--accent-primary);
  border: none;
  border-radius: 8px;
  color: var(--bg-primary);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.confirm-file-btn:hover:not(:disabled) {
  background: var(--accent-secondary);
}
.confirm-file-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Attachment Menu */
.attachment-button-container {
  position: relative;
}
.attachment-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 100;
}
.attachment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s ease;
  width: 100%;
  text-align: left;
}
.attachment-option:hover {
  background: var(--bg-tertiary);
}
.attachment-icon {
  font-size: 18px;
}
.attachment-label {
  flex: 1;
}

/* ============================================
   ENHANCED DM CHAT STYLES
   ============================================ */

/* DM Message bubbles */
.dm-page .message {
  position: relative;
  animation: messageSlideIn 0.15s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* DM message grouping */
.dm-page .message-group {
  margin-bottom: 2px;
}

.dm-page .message-group .message {
  padding-top: 2px;
  padding-bottom: 2px;
}

.dm-page .message-group .message:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* DM input area enhancement */
.dm-page .message-input-form {
  padding: 16px 24px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

.dm-page .message-input-container {
  background: var(--bg-tertiary);
  border: 2px solid transparent;
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dm-page .message-input-container:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
}

/* DM typing indicator */
.dm-page .typing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  font-size: 12px;
  color: var(--text-muted);
}

.dm-page .typing-dots span {
  width: 6px;
  height: 6px;
  background: var(--accent-primary);
  border-radius: 50%;
  animation: dmTypingBounce 1.4s infinite ease-in-out;
}

@keyframes dmTypingBounce {
  0%, 80%, 100% { 
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% { 
    transform: scale(1);
    opacity: 1;
  }
}

/* DM scrollbar */
.dm-page .messages-container::-webkit-scrollbar {
  width: 8px;
}

.dm-page .messages-container::-webkit-scrollbar-track {
  background: transparent;
}

.dm-page .messages-container::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: 4px;
}

.dm-page .messages-container::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

/* DM message status */
.dm-page .message-status {
  font-size: 11px;
  color: var(--text-muted);
}

/* Optimistic message sending state */
.dm-page .message.sending {
  opacity: 0.7;
  position: relative;
}

.dm-page .message.sending::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent-primary), transparent);
  animation: sendingPulse 1.5s ease-in-out infinite;
  border-radius: 1px;
}

.dm-page .message.sending .message-text,
.dm-page .message.sending .message-header {
  opacity: 0.7;
}

.dm-page .message.just-sent {
  animation: messageConfirmFlash 0.6s ease-out;
}

@keyframes sendingPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@keyframes messageConfirmFlash {
  0% { background: rgba(0, 255, 136, 0.15); }
  100% { background: transparent; }
}

@keyframes messageSendingSpin {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* Partner info bar */
.dm-partner-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.dm-partner-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.dm-partner-details {
  flex: 1;
}

.dm-partner-name {
  font-weight: 600;
  color: var(--text-primary);
}

.dm-partner-status {
  font-size: 12px;
  color: var(--text-muted);
}

/* Mobile DM optimizations */
@media (max-width: 768px) {
  .dm-page .message-input-form {
    padding: 8px 12px;
  }
  
  .dm-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
  }

  .dm-main {
    width: 100%;
  }

  .dm-messages-header {
    padding: 12px 16px;
    min-height: 56px;
  }

  .messages-container {
    padding: 12px;
    gap: 12px;
  }

  .dm-user-item {
    padding: 8px 10px;
  }

  .dm-user-name {
    font-size: 13px;
  }

  .dm-header-name {
    font-size: 14px;
  }

  .message {
    padding: 6px 12px;
    gap: 10px;
  }

  .message-image {
    max-width: 200px;
    max-height: 140px;
  }

  .message-input-form {
    padding: 12px 16px;
  }

  .message-input {
    font-size: 13px;
    padding: 10px 12px;
  }

  .dm-partner-info {
    padding: 10px 16px;
  }

  .file-preview-modal {
    width: 95%;
  }

  .new-dm-tool {
    top: 56px;
    left: 8px;
    right: 8px;
  }
}

@media (max-width: 480px) {
  .dm-sidebar-header {
    padding: 14px 16px;
    min-height: 52px;
  }
  .dm-sidebar-header h2 {
    font-size: 14px;
  }
  .dm-new-chat-btn {
    width: 32px;
    height: 32px;
  }
  .conversation-list {
    padding: 4px;
  }
  .dm-user-item {
    padding: 6px 8px;
    gap: 8px;
  }
  .dm-user-name {
    font-size: 12px;
  }
  .dm-user-username {
    font-size: 10px;
  }
  .dm-user-status-dot {
    width: 10px;
    height: 10px;
    border-width: 2px;
    bottom: 1px;
    right: 1px;
  }
  .dm-header-avatar {
    width: 32px !important;
    height: 32px !important;
  }
  .messages-container {
    padding: 8px;
    gap: 8px;
  }
  .message {
    padding: 4px 8px;
    gap: 8px;
  }
  .message-author {
    font-size: 13px;
  }
  .message-text {
    font-size: 13px;
  }
  .message-time {
    font-size: 10px;
  }
  .message-image {
    max-width: 160px;
    max-height: 120px;
  }
  .date-divider span {
    font-size: 10px;
  }
  .message-input-form {
    padding: 8px 12px;
  }
  .message-input {
    font-size: 12px;
    padding: 8px 10px;
  }
  .send-btn, .attach-btn {
    width: 32px;
    height: 32px;
  }
  .upload-preview-bar {
    padding: 8px 12px;
  }
  .upload-preview-item img {
    width: 32px;
    height: 32px;
  }
  .dm-partner-info {
    padding: 8px 12px;
  }
  .dm-partner-avatar {
    width: 32px;
    height: 32px;
  }
  .dm-partner-name {
    font-size: 13px;
  }
  .new-dm-tool {
    top: 50px;
    left: 4px;
    right: 4px;
    max-height: 300px;
  }
  .new-dm-tool .new-dm-item {
    padding: 8px 10px;
  }
  .file-preview-header {
    padding: 14px 16px;
  }
  .file-preview-header span {
    font-size: 16px;
  }
  .file-preview-content {
    padding: 16px;
    min-height: 140px;
  }
  .file-preview-footer {
    padding: 12px 16px;
    flex-direction: column;
    gap: 8px;
  }
  .file-preview-actions {
    width: 100%;
  }
  .confirm-file-btn, .cancel-file-btn {
    flex: 1;
    text-align: center;
  }
}

@media (max-width: 360px) {
  .dm-sidebar-header h2 {
    font-size: 13px;
  }
  .message {
    gap: 6px;
  }
  .message-image {
    max-width: 120px;
    max-height: 100px;
  }
  .dm-header-name {
    font-size: 13px;
  }
  .dm-header-status {
    font-size: 10px;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .messages-container {
    padding: 8px;
  }
  .message {
    padding: 3px 8px;
  }
  .message-input-form {
    padding: 6px 12px;
  }
  .dm-sidebar-header {
    padding: 10px 16px;
    min-height: 44px;
  }
}

/* New DM Tool */
.new-dm-tool {
  position: absolute;
  top: 60px;
  left: 10px;
  right: 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  z-index: 100;
  max-height: 400px;
  display: flex;
  flex-direction: column;
}

.new-dm-tool .new-dm-header {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
}

.new-dm-tool .new-dm-header input {
  flex: 1;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 8px 12px;
  color: var(--text-primary);
}

.new-dm-tool .new-dm-header button {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
}

.new-dm-tool .new-dm-list {
  overflow-y: auto;
  max-height: 320px;
}

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

.new-dm-tool .new-dm-item:hover {
  background: var(--bg-hover);
}

.new-dm-tool .new-dm-user-info {
  display: flex;
  flex-direction: column;
}

.new-dm-tool .new-dm-name {
  font-weight: 500;
  color: var(--text-primary);
}

.new-dm-tool .new-dm-username {
  font-size: 12px;
  color: var(--text-muted);
}.servers-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-y: auto;
  padding: 32px 40px;
  min-height: 0;
  height: 100%;
  width: 100%;
  background: var(--bg-primary);
}

.servers-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  flex-shrink: 0;
  gap: 20px;
}

.servers-title-section h1 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  margin: 0 0 6px 0;
}

.servers-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

.btn-create-server {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: var(--accent-primary);
  color: var(--text-on-accent);
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-create-server:hover {
  background: var(--accent-secondary, var(--accent-primary));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.btn-create-server:active {
  transform: translateY(0);
}

/* Stats Bar */
.servers-stats-bar {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-shrink: 0;
}

.servers-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  animation: serversStatFadeIn 0.4s ease forwards;
  opacity: 0;
  transform: translateY(10px);
}

@keyframes serversStatFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

.servers-stat-item svg {
  color: var(--accent-primary);
  flex-shrink: 0;
}

.servers-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.servers-stat-value.new-today {
  color: var(--accent-primary);
}

.servers-stat-label {
  font-size: 13px;
  color: var(--text-muted);
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: serversFadeIn 0.2s ease;
}

@keyframes serversFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes serversSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.create-server-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 32px;
  width: 100%;
  max-width: 480px;
  animation: serversSlideUp 0.3s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

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

.modal-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.modal-close:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--accent-primary);
}

.form-group textarea {
  resize: vertical;
  min-height: 60px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
}

.checkbox-label input[type="checkbox"] {
  width: auto;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: var(--border-color);
}

.btn-primary {
  background: var(--accent-primary);
  color: var(--text-on-accent);
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: var(--text-primary);
  border-radius: 50%;
  animation: serversSpin 0.6s linear infinite;
  vertical-align: middle;
}

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

/* Controls */
.servers-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.servers-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 4px;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.tab-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.tab-btn.active {
  color: var(--text-primary);
  background: var(--bg-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.tab-count {
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.tab-btn.active .tab-count {
  background: var(--accent-primary);
  color: var(--text-on-accent);
}

.servers-category-pill.active {
  background: var(--accent-primary);
  color: var(--text-on-accent);
  border-color: var(--accent-primary);
}

/* Spotlight Section */
.servers-spotlight {
  margin-bottom: 32px;
  animation: serversFadeIn 0.3s ease;
}

.servers-spotlight-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.servers-spotlight-header svg {
  color: #ffd700;
}

.servers-spotlight-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.servers-spotlight-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.servers-spotlight-scroll::-webkit-scrollbar {
  height: 4px;
}

.servers-spotlight-scroll::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.servers-spotlight-card {
  flex: 0 0 280px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  scroll-snap-align: start;
  animation: serversCardFadeIn 0.5s ease forwards;
  animation-delay: calc(var(--spotlight-index, 0) * 100ms);
  opacity: 0;
  transform: translateY(15px);
}

@keyframes serversCardFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

.servers-spotlight-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-primary);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.servers-spotlight-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, var(--accent-primary) 0%, transparent 60%);
  opacity: 0.08;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.servers-spotlight-card:hover .servers-spotlight-glow {
  opacity: 0.15;
}

.servers-spotlight-visual {
  position: relative;
  padding: 24px 20px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.servers-spotlight-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

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

.servers-spotlight-icon span {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-on-accent);
}

.servers-spotlight-featured-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: #ffd700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a2e;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

.servers-spotlight-info {
  padding: 0 20px 20px;
}

.servers-spotlight-info h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.servers-spotlight-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.servers-spotlight-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.servers-spotlight-members {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-muted);
}

.servers-spotlight-members svg {
  width: 14px;
  height: 14px;
}

.servers-spotlight-category {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  color: var(--accent-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.servers-spotlight-join-btn {
  width: 100%;
  padding: 10px;
  background: var(--accent-primary);
  border: none;
  border-radius: 10px;
  color: var(--text-on-accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.servers-spotlight-join-btn:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

.servers-spotlight-join-btn.joined {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Server Grid */
.servers-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.servers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding-bottom: 24px;
}

.server-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  animation: serversCardFadeIn 0.4s ease forwards;
  animation-delay: var(--card-delay, 0ms);
  opacity: 0;
  transform: translateY(12px);
}

.server-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-primary);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.server-card-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, var(--accent-primary) 0%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.server-card:hover .server-card-glow {
  opacity: 0.06;
}

.server-card-visual {
  position: relative;
  padding: 20px 20px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.server-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

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

.server-card-icon span {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-on-accent);
}

.servers-category-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  padding: 3px 8px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  color: var(--accent-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.servers-online-count {
  position: absolute;
  bottom: 8px;
  left: 56px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #22c55e;
}

.servers-online-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
  animation: serversPulse 2s ease-in-out infinite;
}

@keyframes serversPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.server-card-info {
  padding: 0 20px 20px;
}

.server-card-info h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.server-card-description {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

/* Channel Preview */
.servers-channel-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.servers-channel-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-primary);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

.servers-channel-tag svg {
  flex-shrink: 0;
  opacity: 0.6;
}

/* Presence */
.servers-presence {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.servers-presence-avatars {
  display: flex;
  align-items: center;
}

.servers-presence-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--bg-secondary);
  box-sizing: border-box;
  transition: transform 0.2s ease;
}

.server-card:hover .servers-presence-dot {
  transform: translateY(-2px);
}

.servers-presence-more {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 2px;
}

.servers-presence-count {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-muted);
  margin-left: auto;
}

.servers-presence-count svg {
  opacity: 0.6;
}

/* Card Meta */
.server-card-meta {
  display: flex;
  gap: 8px;
}

.btn-join {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: var(--accent-primary);
  border: none;
  border-radius: 10px;
  color: var(--text-on-accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-join:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

.btn-leave {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--danger);
  border-radius: 10px;
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-leave:hover {
  background: var(--danger);
  color: var(--text-on-accent);
}

/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
}

.empty-icon {
  margin-bottom: 20px;
  opacity: 0.4;
  color: var(--text-muted);
}

.empty-state h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.empty-state p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 24px;
  max-width: 400px;
}
.server-settings {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.server-settings .loading,
.server-settings .error {
  padding: 40px;
  text-align: center;
}

.settings-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.settings-header h1 {
  flex: 1;
}

.analytics-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  border: none;
  border-radius: var(--radius);
  color: var(--bg-primary);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.analytics-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--accent-glow);
}
}

.back-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 8px 16px;
  border-radius: var(--radius);
  cursor: pointer;
}

.back-btn:hover {
  background: var(--bg-hover);
}

.settings-header h1 {
  font-size: 20px;
}

.settings-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 24px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.settings-tabs .tab {
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: 10px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
  transition: var(--transition);
}

.settings-tabs .tab:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.settings-tabs .tab.active {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

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

.settings-section {
  max-width: 600px;
}

.settings-section h2 {
  font-size: 18px;
  margin-bottom: 20px;
}

.settings-section .form-group {
  margin-bottom: 16px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.checkbox-label input {
  width: 18px;
  height: 18px;
}

.danger-zone {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--danger);
}

.danger-zone h3 {
  color: var(--danger);
  margin-bottom: 12px;
}

.create-role-form {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.create-role-form input[type="text"] {
  flex: 1;
}

.create-role-form input[type="color"] {
  width: 50px;
  height: 42px;
  padding: 2px;
  cursor: pointer;
}

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

.role-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

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

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

.delete-btn {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 20px;
  cursor: pointer;
  opacity: 0.6;
}

.delete-btn:hover {
  opacity: 1;
}

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

.member-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

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

.member-role {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: capitalize;
}

.kick-btn {
  background: var(--danger);
  color: var(--text-on-accent);
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 12px;
}

.invite-link-box {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.invite-link-box input {
  flex: 1;
}

.invites-list {
  margin-top: 24px;
}

.invites-list h3 {
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--text-secondary);
}

.invite-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  margin-bottom: 8px;
}

.invite-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.invite-code {
  font-family: monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.invite-details {
  font-size: 12px;
  color: var(--text-muted);
}

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

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.invite-create-box {
  margin-bottom: 16px;
}

.no-invites {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
}

.section-description {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 20px;
}

.emote-create-form {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.emote-name-input {
  width: 150px;
}

.emote-url-input {
  flex: 1;
  min-width: 200px;
}

.emote-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  margin-bottom: 20px;
}

.emote-preview img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.emote-preview code {
  font-family: monospace;
  background: var(--bg-secondary);
  padding: 4px 8px;
  border-radius: 4px;
}

.emotes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
}

.emote-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: all 0.2s ease;
}

.emote-item:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.emote-item img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 8px;
}

.emote-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

.emote-creator {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.delete-emote-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--danger);
  border: none;
  color: var(--text-on-accent);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.emote-item:hover .delete-emote-btn {
  opacity: 1;
}

.no-emotes {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  color: var(--text-muted);
}

.no-emotes span {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* Slash Commands */
.command-create-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius);
}

.command-name-input,
.command-desc-input,
.command-response-input {
  padding: 10px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
}

.command-response-input {
  resize: vertical;
  min-height: 80px;
}

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

.command-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.command-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.command-item .command-name {
  font-weight: 600;
  color: var(--accent-primary);
}

.command-item .command-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.delete-command-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--danger);
  border: none;
  color: var(--text-on-accent);
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.command-item:hover .delete-command-btn {
  opacity: 1;
}

.no-commands {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  color: var(--text-muted);
}

.no-commands span {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* Permissions */
.permissions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.permission-group {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px;
}

.permission-group h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.permission-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.permission-toggle:hover {
  background: var(--bg-tertiary);
}

.permission-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent-primary);
  cursor: pointer;
}

.toggle-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toggle-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.toggle-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.permission-group .form-group {
  padding: 10px;
}

.permission-group .form-group label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.permission-group select {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13px;
}

.roles-management {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  margin-top: 20px;
}

.roles-sidebar {
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  padding: 16px;
}

.roles-sidebar h3 {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.roles-sidebar .create-role-form {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.roles-sidebar .create-role-form input[type="text"] {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13px;
}

.roles-sidebar .create-role-form input[type="color"] {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

.roles-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.role-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}

.role-item:hover {
  background: var(--bg-primary);
}

.role-item.selected {
  background: var(--accent-color);
  color: var(--bg-primary);
}

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

.role-item .role-name {
  flex: 1;
  font-size: 14px;
}

.role-item .delete-btn {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.6;
}

.role-item .delete-btn:hover {
  opacity: 1;
  color: #ff6b6b;
}

.roles-detail {
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  padding: 20px;
}

.role-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.role-color-lg {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.role-header h3 {
  flex: 1;
  font-size: 20px;
}

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

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

.permission-item {
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: 12px;
}

.permission-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.permission-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent-color);
}

.permission-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.permission-label strong {
  font-size: 14px;
  color: var(--text-primary);
}

.permission-label small {
  font-size: 12px;
  color: var(--text-secondary);
}

.permission-display {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.perm-status {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
}

.perm-status.allowed {
  background: rgba(0, 255, 136, 0.2);
  color: #00ff88;
}

.perm-status.denied {
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
}

.no-role-selected {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
}

/* Appearance Tab */
.appearance-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  margin-bottom: 24px;
}

.appearance-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 20px;
}

.appearance-card h3 {
  font-size: 16px;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.icon-preview {
  width: 128px;
  height: 128px;
  margin: 0 auto 16px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.icon-preview.drag-active {
  border-color: var(--accent-primary);
  background: rgba(0, 255, 136, 0.08);
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.2);
}

.server-icon-large {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.server-icon-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 700;
  color: var(--accent-primary);
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
}

.banner-preview {
  width: 100%;
  height: 120px;
  margin: 0 auto 16px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.banner-preview.drag-active {
  border-color: var(--accent-primary);
  background: rgba(0, 255, 136, 0.08);
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.2);
}

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

.banner-placeholder {
  color: var(--text-muted);
  font-size: 14px;
}

.upload-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 8px;
}

.upload-btn {
  cursor: pointer;
}

.upload-hint {
  display: block;
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
}

.upload-preview-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}

.upload-preview-section h3 {
  font-size: 16px;
  margin-bottom: 16px;
}

.upload-preview-container {
  display: flex;
  gap: 24px;
  align-items: center;
}

.upload-preview-container .preview-banner {
  width: 300px;
  height: 80px;
  border-radius: var(--radius);
  overflow: hidden;
}

.upload-preview-container .preview-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-preview-container .preview-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
  overflow: hidden;
}

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

.upload-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.upload-type-label {
  font-size: 14px;
  color: var(--text-secondary);
}

.layout-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 20px;
}

.layout-section h3 {
  font-size: 16px;
  margin-bottom: 16px;
}

.layout-section .form-group {
  margin-bottom: 16px;
}

.channels-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.channel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.channel-icon {
  font-size: 16px;
  width: 24px;
  text-align: center;
}

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

.channel-type {
  font-size: 12px;
  color: var(--text-muted);
  padding: 2px 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
}

.btn-icon {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 6px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-icon:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
}

.channel-permissions-panel {
  margin-top: 20px;
  padding: 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius);
}

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

.panel-header h3 {
  margin: 0;
}

.panel-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.channel-roles-permissions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.channel-role-perms {
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
}

.channel-role-perms .role-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 500;
}

.channel-role-perms .role-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

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

.perm-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
}

.perm-toggle input {
  cursor: pointer;
}

/* Moderation Settings */
.moderation-section {
  margin-bottom: 24px;
  padding: 20px;
  background: var(--bg-secondary);
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
}

.moderation-section h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
}

.setting-description {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}

.large-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}

.large-toggle:hover {
  background: var(--bg-hover);
}

.large-toggle input[type="checkbox"] {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.large-toggle .toggle-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.large-toggle strong {
  font-size: 15px;
  color: var(--text-primary);
}

.large-toggle small {
  font-size: 12px;
  color: var(--text-muted);
}

.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-list li {
  padding: 8px 0;
  padding-left: 24px;
  position: relative;
  font-size: 14px;
  color: var(--text-secondary);
}

.info-list li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent-primary);
  font-weight: bold;
}

.dashboard-sections-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.editor-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.dashboard-section-editor-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}

.section-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.section-card-drag {
  display: flex;
  gap: 2px;
}

.btn-icon {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.15s;
}

.btn-icon:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn-icon:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn-icon.danger:hover {
  color: #f04747;
  border-color: #f04747;
}

.section-card-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-type-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  background: var(--accent-primary);
  color: var(--bg-primary);
  border-radius: 4px;
  font-weight: 600;
}

.section-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
}

.section-status.enabled {
  color: var(--accent-primary);
  background: rgba(0, 255, 136, 0.1);
}

.section-status.disabled {
  color: var(--text-muted);
  background: var(--bg-tertiary);
}

.section-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section-card-body .form-group {
  margin: 0;
}

.section-card-body label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: block;
}

.section-card-body input,
.section-card-body textarea,
.section-card-body select {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
}

.section-card-body textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

.member-role-select {
  margin-top: 2px;
  padding: 4px 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
  outline: none;
  width: fit-content;
}

.member-role-select:focus {
  border-color: var(--accent-primary);
}

.owner-badge {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 8px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: var(--text-on-accent);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: fit-content;
}

.webhooks-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.webhook-form-card,
.webhook-edit-form {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

.webhook-form-card h3 {
  color: var(--text-primary);
  margin-bottom: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.form-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

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

.checkbox-inline label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
  font-size: 13px;
}

.webhooks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.webhook-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
}

.webhook-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.webhook-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.webhook-info h4 {
  color: var(--text-primary);
  margin: 0;
  font-size: 15px;
}

.webhook-status {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.webhook-status.active {
  background: rgba(0, 255, 136, 0.15);
  color: #00ff88;
}

.webhook-status.inactive {
  background: rgba(255, 107, 107, 0.15);
  color: var(--text-error, #ff6b6b);
}

.webhook-method {
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 11px;
  font-family: monospace;
}

.webhook-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.webhook-actions .btn-sm {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  cursor: pointer;
}

.webhook-actions .btn-sm:hover {
  border-color: var(--accent-primary);
}

.webhook-actions .btn-danger {
  color: var(--text-error, #ff6b6b);
  border-color: var(--text-error, #ff6b6b);
}

.webhook-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.webhook-url {
  font-family: monospace;
  word-break: break-all;
  max-width: 400px;
}

.webhook-last-status.ok {
  color: #00ff88;
}

.webhook-last-status.err {
  color: var(--text-error, #ff6b6b);
}

.webhook-stats {
  color: var(--text-secondary);
}

.webhook-description {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 4px 0 0;
}

.webhook-deliveries {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.webhook-deliveries h5 {
  color: var(--text-primary);
  margin-bottom: 8px;
}

.deliveries-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 8px;
}

.deliveries-table th {
  text-align: left;
  padding: 6px 8px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  font-weight: 500;
}

.deliveries-table td {
  padding: 6px 8px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

.deliveries-table tr.delivery-err td {
  color: var(--text-error, #ff6b6b);
}

.deliveries-table tr.delivery-ok td {
  color: var(--text-primary);
}

.btn-xs {
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  cursor: pointer;
}

.btn-xs:hover {
  border-color: var(--accent-primary);
}

.webhook-security-note {
  margin-top: 24px;
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.webhook-security-note h3 {
  color: var(--text-primary);
  font-size: 14px;
  margin-bottom: 8px;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}
}
.analytics-page {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-primary);
}

.analytics-loading,
.analytics-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
  color: var(--text-muted);
}

.analytics-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.analytics-header h1 {
  font-size: 24px;
  font-weight: 700;
}

.analytics-header .back-btn {
  padding: 8px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  cursor: pointer;
}

.analytics-content {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.analytics-overview {
  margin-bottom: 32px;
}

.analytics-overview h2,
.analytics-chart h2,
.analytics-section h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.stat-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}

.stat-icon {
  font-size: 28px;
}

.stat-card .stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent-primary);
}

.stat-card .stat-label {
  font-size: 13px;
  color: var(--text-muted);
}

.analytics-chart {
  margin-bottom: 32px;
}

.chart-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 200px;
  gap: 8px;
}

.bar-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.bar {
  width: 100%;
  background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
  border-radius: 6px 6px 0 0;
  min-height: 4px;
  position: relative;
  transition: all 0.3s;
  cursor: pointer;
}

.bar:hover {
  filter: brightness(1.2);
}

.bar-value {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-primary);
  opacity: 0;
  transition: opacity 0.2s;
}

.bar:hover .bar-value {
  opacity: 1;
}

.bar-label {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

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

.analytics-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
}

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

.top-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  transition: all 0.15s;
}

.top-item:hover {
  background: var(--bg-hover);
}

.top-rank {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-primary);
  min-width: 24px;
}

.top-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.top-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-avatar span {
  font-weight: 600;
  color: var(--accent-primary);
}

.top-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.top-count {
  font-size: 12px;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .analytics-columns {
    grid-template-columns: 1fr;
  }
}
.discovery-page {
  flex: 1;
  overflow-y: auto;
  padding: 40px;
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

.discovery-header {
  text-align: center;
  margin-bottom: 48px;
  position: relative;
}

.discovery-header::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(0, 255, 136, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.discovery-header h1 {
  font-size: 48px;
  font-weight: 900;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary, #00cc6a) 50%, var(--accent-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 60px var(--accent-glow);
  letter-spacing: -1px;
}

.discovery-header p {
  color: var(--text-secondary);
  font-size: 18px;
  max-width: 500px;
  margin: 0 auto;
}

.discovery-search {
  max-width: 680px;
  margin: 0 auto 32px;
  position: relative;
}

.discovery-search::before {
  content: '🔍';
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  opacity: 0.5;
}

.discovery-search .search-input {
  width: 100%;
  padding: 18px 24px 18px 56px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 16px;
  color: var(--text-primary);
  font-size: 17px;
  outline: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.discovery-search .search-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 
    0 0 0 4px rgba(0, 255, 136, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.discovery-search .search-input::placeholder {
  color: var(--text-muted);
}

.discovery-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 40px;
}

.category-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 50px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-pill:hover {
  background: var(--bg-tertiary);
  transform: translateY(-3px);
  border-color: var(--text-muted);
  color: var(--text-primary);
}

.category-pill.active {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary, #00cc6a));
  border-color: var(--accent-primary);
  color: var(--bg-primary);
  box-shadow: 0 8px 24px var(--accent-glow);
  transform: translateY(-2px);
}

.cat-icon {
  font-size: 18px;
}

.discovery-loading {
  text-align: center;
  padding: 80px;
  color: var(--text-muted);
}

.discovery-loading .spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 20px;
  box-shadow: 0 0 30px var(--accent-glow);
}

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

.discovery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.server-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.server-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary, #00cc6a));
  opacity: 0;
  transition: opacity 0.3s;
}

.server-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.35),
    0 0 0 1px var(--accent-primary);
  border-color: var(--accent-primary);
}

.server-card:hover::before {
  opacity: 1;
}

.server-card-banner {
  height: 140px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 204, 106, 0.15) 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.server-card-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
}

.server-card-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.server-card-placeholder {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 800;
  color: var(--accent-primary);
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 0 40px var(--accent-glow);
  position: relative;
  z-index: 1;
  border: 3px solid var(--bg-secondary);
}

.verified-badge {
  position: absolute;
  bottom: -12px;
  right: 20px;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary, #00cc6a));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--bg-primary);
  border: 4px solid var(--bg-secondary);
  box-shadow: 0 4px 16px var(--accent-glow);
  z-index: 2;
}

.server-card-content {
  padding: 24px;
}

.server-card-content h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.server-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

.server-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.member-count {
  font-size: 14px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.member-count::before {
  content: '👥';
}

.join-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary, #00cc6a));
  border: none;
  border-radius: 12px;
  color: var(--bg-primary);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.join-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.join-btn:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 24px var(--accent-glow),
    0 0 40px var(--accent-glow);
}

.join-btn:hover::before {
  left: 100%;
}

.join-btn:active {
  transform: translateY(0);
}

.no-servers {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 40px;
  color: var(--text-muted);
}

.no-servers span {
  font-size: 64px;
  display: block;
  margin-bottom: 24px;
  opacity: 0.3;
}

.no-servers p {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.no-servers .no-servers-hint {
  font-size: 15px;
  margin-top: 8px;
  opacity: 0.6;
}.purchase-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0a0a0f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.purchase-container {
  max-width: 500px;
  width: 100%;
}

.purchase-header {
  text-align: center;
  margin-bottom: 40px;
}

.purchase-header h1 {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #00ff88, #00cc6a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.purchase-header .tagline {
  font-size: 18px;
  color: var(--text-muted);
}

.tier-card {
  background: #151520;
  border: 1px solid #2a2a3e;
  border-radius: 20px;
  padding: 40px;
  text-align: center;
  position: relative;
}

.tier-card.featured {
  border-color: #00ff88;
  box-shadow: 0 0 40px rgba(0, 255, 136, 0.2);
}

.tier-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #00ff88, #00cc6a);
  color: #0a0a0f;
  padding: 6px 20px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

.tier-card h2 {
  font-size: 28px;
  color: var(--text-on-accent);
  margin-bottom: 20px;
}

.price {
  margin-bottom: 30px;
}

.price .currency {
  font-size: 24px;
  color: #00ff88;
  vertical-align: top;
}

.price .amount {
  font-size: 64px;
  font-weight: 800;
  color: var(--text-on-accent);
}

.price .period {
  font-size: 16px;
  color: var(--text-muted);
}

.features {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  text-align: left;
}

.features li {
  padding: 10px 0;
  color: var(--text-muted);
  font-size: 15px;
  border-bottom: 1px solid #2a2a3e;
}

.features li:last-child {
  border-bottom: none;
}

.email-form {
  text-align: left;
}

.email-form label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.email-form input {
  width: 100%;
  padding: 14px 16px;
  background: #0a0a0f;
  border: 1px solid #2a2a3e;
  border-radius: 10px;
  color: var(--text-on-accent);
  font-size: 15px;
  margin-bottom: 16px;
  outline: none;
  transition: border-color 0.2s;
}

.email-form input:focus {
  border-color: #00ff88;
}

.btn-purchase {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #00ff88, #00cc6a);
  border: none;
  border-radius: 10px;
  color: #0a0a0f;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-purchase:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 255, 136, 0.4);
}

.btn-purchase:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Checkout Section */
.checkout-card {
  background: #151520;
  border: 1px solid #2a2a3e;
  border-radius: 20px;
  padding: 30px;
}

.checkout-card h2 {
  font-size: 24px;
  color: var(--text-on-accent);
  margin-bottom: 24px;
  text-align: center;
}

.payment-amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #0a0a0f;
  border-radius: 10px;
  margin-bottom: 24px;
}

.payment-amount .label {
  color: var(--text-muted);
}

.payment-amount .value {
  font-size: 24px;
  font-weight: 700;
  color: #00ff88;
}

.qr-container {
  text-align: center;
  margin-bottom: 24px;
}

.qr-code {
  width: 200px;
  height: 200px;
  border-radius: 10px;
}

.wallet-address {
  margin-bottom: 24px;
}

.wallet-address label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.address-box {
  display: flex;
  gap: 8px;
}

.address-box code {
  flex: 1;
  padding: 12px;
  background: #0a0a0f;
  border: 1px solid #2a2a3e;
  border-radius: 8px;
  color: #00ff88;
  font-size: 12px;
  word-break: break-all;
}

.copy-btn {
  padding: 12px 16px;
  background: #2a2a3e;
  border: none;
  border-radius: 8px;
  color: var(--text-on-accent);
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.copy-btn:hover {
  background: #3a3a4e;
}

.instructions {
  background: #0a0a0f;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 24px;
}

.instructions h4 {
  font-size: 14px;
  color: var(--text-on-accent);
  margin-bottom: 12px;
}

.instructions ol {
  margin: 0;
  padding-left: 20px;
}

.instructions li {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.checkout-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.btn-check {
  flex: 1;
  padding: 14px;
  background: #2a2a3e;
  border: none;
  border-radius: 10px;
  color: var(--text-on-accent);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-check:hover {
  background: #3a3a4e;
}

.btn-simulate {
  flex: 1;
  padding: 14px;
  background: linear-gradient(135deg, #00ff88, #00cc6a);
  border: none;
  border-radius: 10px;
  color: #0a0a0f;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-simulate:hover:not(:disabled) {
  box-shadow: 0 4px 16px rgba(0, 255, 136, 0.4);
}

.btn-simulate:disabled,
.btn-check:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-cancel {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1px solid #2a2a3e;
  border-radius: 10px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-cancel:hover {
  border-color: #ff4444;
  color: #ff4444;
}

.status-note {
  text-align: center;
  margin-top: 20px;
}

.status-note p {
  font-size: 13px;
  color: #666;
  margin: 4px 0;
}

.purchase-footer {
  text-align: center;
  margin-top: 40px;
}

.purchase-footer p {
  color: #666;
  font-size: 14px;
}

.purchase-footer span {
  color: #00ff88;
  cursor: pointer;
  text-decoration: underline;
}

.purchase-footer .onion-note {
  margin-top: 16px;
  font-size: 12px;
  color: #444;
}

.polling-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #00ff88;
}

.polling-indicator {
  width: 10px;
  height: 10px;
  background: #00ff88;
  border-radius: 50%;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.success-message {
  text-align: center;
  padding: 20px;
}

.success-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #00ff88, #00cc6a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #0a0a0f;
  margin: 0 auto 20px;
}

.success-message h3 {
  font-size: 24px;
  color: var(--text-on-accent);
  margin-bottom: 10px;
}

.success-message p {
  color: var(--text-muted);
  margin-bottom: 20px;
}

.invite-code-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

.invite-code-display code {
  padding: 16px 24px;
  background: #0a0a0f;
  border: 2px solid #00ff88;
  border-radius: 10px;
  color: #00ff88;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
}

.invite-code-display button {
  padding: 12px 16px;
  background: #2a2a3e;
  border: none;
  border-radius: 8px;
  color: var(--text-on-accent);
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.invite-code-display button:hover {
  background: #3a3a4e;
}

.btn-register {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #00ff88, #00cc6a);
  border: none;
  border-radius: 10px;
  color: #0a0a0f;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-register:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 255, 136, 0.4);
}

.error-message {
  background: rgba(255, 68, 68, 0.1);
  border: 1px solid rgba(255, 68, 68, 0.3);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  color: #ff4444;
  font-size: 14px;
  text-align: center;
}

.btc-amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #0a0a0f;
  border-radius: 10px;
  margin-bottom: 16px;
}

.btc-amount .label {
  color: var(--text-muted);
  font-size: 14px;
}

.btc-amount .value-btc {
  font-size: 18px;
  font-weight: 700;
  color: #f7931a;
}

.timer-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(247, 147, 26, 0.1);
  border: 1px solid rgba(247, 147, 26, 0.3);
  border-radius: 10px;
  margin-bottom: 20px;
}

.timer-label {
  color: var(--text-muted);
  font-size: 13px;
}

.timer-value {
  font-size: 18px;
  font-weight: 700;
  color: #f7931a;
}

.timer-value.expiring {
  color: #ff4444;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.instructions li strong {
  color: #f7931a;
}
.invite-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
  padding: 20px;
}

.invite-card {
  width: 100%;
  max-width: 440px;
  background: #12121a;
  border: 1px solid #2a2a3a;
  border-radius: 16px;
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.invite-error-card {
  border-color: #ff4757;
}

.invite-header {
  margin-bottom: 24px;
}

.invite-server-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
  border: 3px solid #2a2a3a;
}

.invite-server-icon-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  color: #00ff88;
  background: #1a1a2e;
  border-color: #00ff88;
}

.invite-server-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-on-accent);
  margin: 0 0 8px 0;
}

.invite-created-by {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}

.invite-created-by strong {
  color: #00ff88;
}

.invite-info {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
  padding: 16px;
  background: #0e0e14;
  border-radius: 12px;
}

.invite-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.invite-info-label {
  color: #666;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.invite-info-value {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
}

.invite-join-btn {
  width: 100%;
  padding: 14px 24px;
  background: #5865f2;
  color: var(--text-on-accent);
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

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

.invite-join-btn:disabled {
  background: #3a3f7a;
  cursor: not-allowed;
}

.invite-join-error {
  background: rgba(255, 71, 87, 0.1);
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  color: #ff6b6b;
  font-size: 14px;
}

.invite-actions {
  margin-top: 8px;
}

.invite-login-prompt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.invite-login-prompt p {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}

.invite-login-btn {
  display: inline-block;
  padding: 12px 32px;
  background: #5865f2;
  color: var(--text-on-accent);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: background 0.15s;
}

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

.invite-register-link {
  color: #00ff88;
  text-decoration: none;
  font-size: 13px;
}

.invite-register-link:hover {
  text-decoration: underline;
}

.invite-error-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 71, 87, 0.15);
  color: #ff4757;
  font-size: 24px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.invite-error-text {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 12px 0 24px;
}

.invite-back-btn {
  display: inline-block;
  padding: 10px 24px;
  background: #2a2a3a;
  color: var(--text-muted);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: background 0.15s;
}

.invite-back-btn:hover {
  background: #3a3a4a;
}

.invite-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 0;
}

.invite-loading p {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}

.invite-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #2a2a3a;
  border-top-color: #00ff88;
  border-radius: 50%;
  animation: invite-spin 0.8s linear infinite;
}

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

.invite-success {
  padding: 24px 0;
}

.invite-success-icon {
  margin-bottom: 16px;
}

.invite-success h2 {
  color: var(--text-on-accent);
  font-size: 22px;
  margin: 0 0 8px;
}

.invite-success p {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}
.theme-settings {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.theme-settings .settings-header {
  padding: 20px 24px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.theme-settings .settings-header h1 {
  font-size: 24px;
  margin-bottom: 4px;
}

.theme-settings .settings-header p {
  color: var(--text-muted);
  font-size: 14px;
}

.theme-settings .settings-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 24px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.theme-settings .settings-tabs .tab {
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  transition: var(--transition);
}

.theme-settings .settings-tabs .tab:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.theme-settings .settings-tabs .tab.active {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

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

.themes-section .current-theme {
  margin-bottom: 32px;
}

.themes-section .current-theme h3 {
  font-size: 14px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.theme-preview-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.preview-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--bg-primary);
}

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

.preview-name {
  font-weight: 600;
  font-size: 16px;
}

.preview-desc {
  color: var(--text-muted);
  font-size: 13px;
}

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

.theme-card {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  padding: 12px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.theme-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}

.theme-card.active {
  border-color: var(--accent-primary);
  box-shadow: 0 0 20px var(--accent-glow);
}

.theme-preview {
  height: 80px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 12px;
}

.preview-dots {
  display: flex;
  gap: 6px;
}

.preview-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.preview-accent {
  height: 8px;
  border-radius: 4px;
  width: 60%;
}

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

.theme-name {
  font-weight: 600;
  font-size: 14px;
}

.theme-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.active-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--accent-primary);
  color: var(--bg-primary);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 10px;
  text-transform: uppercase;
}

.custom-section .custom-info {
  margin-bottom: 20px;
}

.custom-section .custom-info h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.custom-section .custom-info p {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 8px;
}

.custom-section .warning {
  color: var(--warning);
  font-size: 13px;
}

.custom-css-input {
  width: 100%;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 13px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px;
  color: var(--text-primary);
  resize: vertical;
  min-height: 300px;
}

.custom-css-input:focus {
  border-color: var(--accent-primary);
  outline: none;
}

.custom-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  justify-content: flex-end;
}
.user-settings {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: var(--surface-color);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.settings-header {
  margin-bottom: 30px;
  text-align: center;
}

.settings-header h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 10px;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.settings-header p {
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1.6;
}

.settings-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 2px;
}

.tab-button {
  padding: 12px 24px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: all 0.3s ease;
  position: relative;
}

.tab-button:hover {
  color: var(--text-color);
  background: rgba(var(--primary-color-rgb), 0.1);
}

.tab-button.active {
  color: var(--primary-color);
  background: rgba(var(--primary-color-rgb), 0.1);
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary-color);
  border-radius: 2px;
}

.settings-content {
  min-height: 600px;
}

/* Layout Tab Styles */
.settings-layout-tab {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.layout-selection h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 20px;
}

.layout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.layout-option {
  background: var(--surface-color);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.layout-option:hover {
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.15);
}

.layout-option.selected {
  border-color: var(--primary-color);
  background: rgba(var(--primary-color-rgb), 0.05);
}

.layout-option.selected::before {
  content: '✓';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: var(--primary-color);
  color: var(--text-on-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

.layout-preview {
  height: 120px;
  background: var(--background-color);
  border-radius: 8px;
  margin-bottom: 15px;
  padding: 10px;
  overflow: hidden;
  position: relative;
}

.preview-modern-minimal,
.preview-classic-bubble,
.preview-compact-pro,
.preview-social-media,
.preview-discord-style,
.preview-slack-style,
.preview-custom {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
}

.preview-message {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.preview-message.own {
  flex-direction: row-reverse;
}

.preview-avatar {
  width: 24px;
  height: 24px;
  background: var(--primary-color);
  border-radius: 50%;
  flex-shrink: 0;
}

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

.preview-text {
  font-size: 12px;
  color: var(--text-color);
  background: var(--surface-color);
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 2px;
}

.preview-time {
  font-size: 10px;
  color: var(--text-secondary);
}

.preview-message.own .preview-text {
  background: var(--primary-color);
  color: var(--text-on-accent);
}

/* Different layout preview styles */
.preview-classic-bubble .preview-text {
  border-radius: 12px;
}

.preview-compact-pro .preview-text {
  border-radius: 2px;
  font-size: 11px;
}

.preview-social-media {
  align-items: center;
}

.preview-social-media .preview-message {
  flex-direction: column;
  align-items: center;
}

.preview-discord-style .preview-avatar {
  width: 20px;
  height: 20px;
}

.preview-discord-style .preview-text {
  font-size: 11px;
  background: transparent;
  padding: 0;
}

.preview-slack-style .preview-text {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
}

.layout-info h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 8px;
}

.layout-info p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.custom-layout-editor {
  background: var(--surface-color);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 25px;
}

.custom-layout-editor h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 20px;
}

.editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.editor-section {
  background: var(--background-color);
  border-radius: 8px;
  padding: 20px;
}

.editor-section h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.editor-field {
  margin-bottom: 15px;
}

.editor-field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 5px;
}

.editor-field select,
.editor-field input[type="text"],
.editor-field input[type="color"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--surface-color);
  color: var(--text-color);
  font-size: 0.9rem;
  transition: border-color 0.3s ease;
}

.editor-field select:focus,
.editor-field input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.editor-field input[type="range"] {
  width: 100%;
  margin-bottom: 5px;
}

.editor-field input[type="checkbox"] {
  margin-right: 8px;
}

.display-location-settings {
  background: var(--surface-color);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 25px;
}

.display-location-settings h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 10px;
}

.display-location-settings p {
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.location-options {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.location-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-color);
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.3s ease;
}

.location-options label:hover {
  border-color: var(--primary-color);
  background: rgba(var(--primary-color-rgb), 0.05);
}

/* Styling Tab Styles */
.settings-styling-tab {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.settings-styling-tab h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 10px;
}

.settings-styling-tab p {
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.styling-editor {
  background: var(--surface-color);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 25px;
}

.styling-editor .editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.styling-preview {
  background: var(--surface-color);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 25px;
}

.styling-preview h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 20px;
}

.preview-mode-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.preview-mode-selector button {
  padding: 8px 16px;
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.3s ease;
}

.preview-mode-selector button:hover {
  border-color: var(--primary-color);
}

.preview-mode-selector button.active {
  background: var(--primary-color);
  color: var(--text-on-accent);
  border-color: var(--primary-color);
}

.preview-container {
  background: var(--background-color);
  border-radius: 8px;
  padding: 20px;
  min-height: 200px;
}

.preview-chat {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.preview-message {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.preview-message.own-message {
  flex-direction: row-reverse;
}

.preview-avatar {
  width: 32px;
  height: 32px;
  background: var(--primary-color);
  border-radius: 50%;
  flex-shrink: 0;
}

.preview-content {
  max-width: 70%;
}

.preview-sender {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.preview-text {
  font-size: 0.9rem;
  color: var(--text-color);
  background: var(--surface-color);
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 4px;
  word-wrap: break-word;
}

.preview-time {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.preview-message.own-message .preview-text {
  background: var(--primary-color);
  color: var(--text-on-accent);
}

/* Themes Tab Styles */
.settings-themes-tab {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.settings-themes-tab h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 10px;
}

.settings-themes-tab p {
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.theme-option {
  background: var(--surface-color);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.theme-option:hover {
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.15);
}

.theme-option.selected {
  border-color: var(--primary-color);
  background: rgba(var(--primary-color-rgb), 0.05);
}

.theme-option.selected::before {
  content: '✓';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: var(--primary-color);
  color: var(--text-on-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

.theme-preview {
  height: 80px;
  margin-bottom: 15px;
  border-radius: 8px;
  overflow: hidden;
}

.theme-colors {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px;
}

.color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.custom-theme .color-swatch {
  background: linear-gradient(45deg, 
    #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7, #dfe6e9);
}

.theme-info h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 10px;
}

.theme-color-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.color-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

.color-label {
  color: var(--text-secondary);
}

.color-value {
  font-family: monospace;
  color: var(--text-color);
  background: var(--background-color);
  padding: 2px 6px;
  border-radius: 4px;
}

.custom-theme-editor {
  background: var(--surface-color);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 25px;
}

.custom-theme-editor h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 20px;
}

.custom-theme-editor .editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.theme-preview-section {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--border-color);
}

.theme-preview-section h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 15px;
}

.theme-preview-container {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.preview-header {
  padding: 15px 20px;
  color: var(--text-on-accent);
}

.preview-header h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.preview-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.preview-button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  align-self: flex-start;
}

.preview-text {
  line-height: 1.6;
}

.preview-gradient {
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-accent);
  font-weight: 600;
}

/* Settings Actions */
.settings-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--border-color);
}

.save-button,
.reset-button {
  padding: 12px 30px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.save-button {
  background: var(--primary-color);
  color: var(--text-on-accent);
}

.save-button:hover {
  background: var(--primary-color-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3);
}

.reset-button {
  background: var(--surface-color);
  color: var(--text-color);
  border: 2px solid var(--border-color);
}

.reset-button:hover {
  border-color: var(--error-color);
  color: var(--error-color);
}

/* Responsive Design */
@media (max-width: 768px) {
  .user-settings {
    padding: 15px;
  }
  
  .settings-header h1 {
    font-size: 2rem;
  }
  
  .settings-tabs {
    flex-direction: column;
    gap: 5px;
  }
  
  .tab-button {
    border-radius: 6px;
  }
  
  .layout-grid,
  .theme-grid {
    grid-template-columns: 1fr;
  }
  
  .editor-grid,
  .styling-editor .editor-grid,
  .custom-theme-editor .editor-grid {
    grid-template-columns: 1fr;
  }
  
  .location-options {
    flex-direction: column;
    gap: 10px;
  }
  
  .preview-mode-selector {
    flex-direction: column;
  }
  
  .settings-actions {
    flex-direction: column;
  }
  
  .save-button,
  .reset-button {
    width: 100%;
  }
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.layout-option,
.theme-option {
  animation: fadeIn 0.3s ease;
}

/* Custom Scrollbar */
.user-settings::-webkit-scrollbar {
  width: 8px;
}

.user-settings::-webkit-scrollbar-track {
  background: var(--background-color);
}

.user-settings::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.user-settings::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

/* Focus States */
.editor-field select:focus,
.editor-field input:focus,
.preview-mode-selector button:focus,
.save-button:focus,
.reset-button:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Loading States */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--primary-color);
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.presence-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.presence-type-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}

.presence-type-btn:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.presence-type-btn.active {
  background: var(--accent-primary);
  color: var(--text-on-accent);
  border-color: var(--accent-primary);
}

.settings-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 120px;
}

.settings-select {
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
}

.settings-select:focus {
  border-color: var(--accent-primary);
  outline: none;
}

.settings-color {
  width: 40px;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  background: var(--bg-tertiary);
  cursor: pointer;
}

.settings-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 0;
}

.settings-toggle input[type="checkbox"] {
  accent-color: var(--accent-primary);
}

.toggle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 8px;
}

.settings-actions-inline {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-primary);
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}

.icon-btn:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.secondary-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  margin-top: 8px;
}

.secondary-btn:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}
.profile-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-height: 0;
  background: var(--bg-primary);
  position: relative;
  overflow: hidden;
  flex: 1;
}

.profile-back-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 100;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.profile-back-btn:hover {
  background: var(--bg-hover);
  transform: scale(1.05);
}

.profile-back-btn:active {
  transform: scale(0.95);
}

.profile-back-btn svg {
  stroke: var(--text-primary);
}

.profile-loading, .profile-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
  color: var(--text-secondary);
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--bg-tertiary);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.profile-banner {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(135deg, 
    var(--accent-primary) 0%, 
    var(--accent-secondary) 50%, 
    #9b59b6 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  flex-shrink: 0;
}

.profile-banner[style*="backgroundImage"] {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.1) 0%,
    rgba(0,0,0,0.4) 60%,
    var(--bg-primary) 100%
  );
}

.profile-content {
  flex: 1;
  position: relative;
  z-index: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 32px 32px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  min-height: 0;
  height: auto;
  -webkit-overflow-scrolling: touch;
}

.profile-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-top: 100px;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
  padding-bottom: 16px;
  flex-shrink: 0;
}

.profile-avatar-container {
  position: relative;
  flex-shrink: 0;
}

.profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-xl);
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 4px solid var(--bg-primary);
  transition: all 0.3s ease;
}

.profile-avatar:hover {
  transform: scale(1.05);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar span {
  font-size: 40px;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.status-indicator {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 4px solid var(--bg-primary);
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50% { box-shadow: 0 0 0 6px transparent; }
}

.avatar-ring {
  position: absolute;
  inset: -6px;
  border-radius: var(--radius-xl);
  border: 2px solid var(--accent-primary);
  opacity: 0.3;
  animation: ringPulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ringPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.1; transform: scale(1.05); }
}

.profile-info {
  flex: 1;
  min-width: 200px;
  padding-top: 20px;
}

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.profile-info h1,
.profile-info .profile-display-name {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

.username {
  color: var(--text-secondary);
  font-size: 16px;
  margin-bottom: 4px;
}

.pronouns {
  color: var(--text-muted);
  font-size: 14px;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
}

.role-icon {
  font-size: 14px;
}

.role-badge.badge-owner { background: linear-gradient(135deg, rgba(255,215,0,0.3), rgba(255,165,0,0.3)); border-color: gold; }
.role-badge.badge-admin { background: linear-gradient(135deg, rgba(147,112,219,0.3), rgba(138,43,226,0.3)); border-color: #9370db; }
.role-badge.badge-moderator { background: linear-gradient(135deg, rgba(0,191,255,0.3), rgba(0,139,139,0.3)); border-color: #00bfff; }
.role-badge.badge-verified { background: linear-gradient(135deg, rgba(0,255,136,0.3), rgba(0,204,106,0.3)); border-color: #00ff88; }

.profile-actions {
  display: flex;
  gap: 12px;
  padding-top: 20px;
  flex-wrap: wrap;
  position: relative;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.btn-glow {
  position: relative;
  overflow: hidden;
}

.btn-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: translateX(-100%);
  animation: btnShine 3s ease-in-out infinite;
}

@keyframes btnShine {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 8px 0;
  min-width: 180px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 100;
  animation: dropdownIn 0.2s ease;
}

@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdown-menu button {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s ease;
}

.dropdown-menu button:hover {
  background: var(--bg-hover);
}

.dropdown-menu button.danger {
  color: var(--danger);
}

.dropdown-divider {
  height: 1px;
  background: var(--border-color);
  margin: 8px 0;
}

.profile-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius);
  margin-bottom: 24px;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.profile-message button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 20px;
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
  margin-top: 24px;
}

.stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,255,136,0.15);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  color: var(--accent-primary);
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.stat-label {
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stat-sub {
  font-size: 12px;
  color: var(--accent-primary);
  margin-top: 8px;
}

.stat-bar {
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  margin-top: 12px;
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  border-radius: 2px;
  transition: width 1s ease;
}

.profile-badges-section {
  margin-bottom: 32px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.section-title svg {
  color: var(--accent-primary);
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.badge-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.badge-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--badge-gradient-start), var(--badge-gradient-end));
  opacity: 0.1;
}

.badge-card:hover {
  transform: translateY(-2px);
  border-color: var(--badge-color);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--badge-glow) 30%, transparent);
}

.badge-icon-wrapper {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: 12px;
  color: var(--badge-color);
  position: relative;
  z-index: 1;
}

.badge-icon-wrapper svg {
  color: var(--badge-color);
}

.badge-icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.badge-info {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.badge-name {
  font-weight: 600;
  color: var(--badge-color);
}

.badge-description {
  font-size: 12px;
  color: var(--text-muted);
}

.badge-tier-legendary {
  animation: legendaryGlow 2s ease-in-out infinite;
}

@keyframes legendaryGlow {
  0%, 100% { box-shadow: 0 0 20px var(--badge-glow); }
  50% { box-shadow: 0 0 40px var(--badge-glow); }
}

.profile-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}

.tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius);
  transition: all 0.2s ease;
  position: relative;
}

.tab:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.tab.active {
  color: var(--accent-primary);
  background: var(--bg-secondary);
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-primary);
  border-radius: 1px;
}

.profile-tab-content {
  min-height: 200px;
}

.about-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.custom-status-card {
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-icon {
  font-size: 20px;
}

.status-text {
  color: var(--text-primary);
  font-size: 15px;
}

.info-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.info-card h4 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.info-card p {
  color: var(--text-secondary);
  line-height: 1.6;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-secondary);
}

.info-item.link {
  text-decoration: none;
  transition: all 0.2s ease;
}

.info-item.link:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.info-item svg {
  color: var(--accent-primary);
  flex-shrink: 0;
}

.profile-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-field {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  align-items: center;
}

.field-icon {
  font-size: 18px;
}

.field-label {
  color: var(--text-muted);
  font-size: 13px;
}

.field-value {
  color: var(--text-primary);
  font-weight: 500;
}

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

.server-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all 0.3s ease;
}

.server-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,255,136,0.15);
}

.server-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

.server-icon span {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent-primary);
}

.server-name {
  color: var(--text-primary);
  font-weight: 500;
  text-align: center;
  word-break: break-word;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: var(--text-muted);
  gap: 16px;
}

.empty-state svg {
  opacity: 0.5;
}

.notes-section textarea {
  width: 100%;
  padding: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
}

.notes-section textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 400px;
  width: 90%;
}

.modal h3 {
  margin-bottom: 16px;
}

.modal textarea {
  width: 100%;
  padding: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: inherit;
  resize: vertical;
  margin-bottom: 16px;
}

.modal textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

@media (max-width: 1024px) {
  .profile-content {
    padding: 0 20px 24px;
  }
  .profile-info h1,
  .profile-info .profile-display-name {
    font-size: 26px;
  }
  .profile-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
  .badges-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .servers-section .servers-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}

@media (max-width: 768px) {
  .profile-banner {
    height: 140px;
  }
  
  .profile-header {
    padding-top: 70px;
    padding-bottom: 12px;
  }
  
  .profile-info {
    padding-top: 10px;
    min-width: 0;
    width: 100%;
  }
  
  .profile-name-row {
    justify-content: center;
  }
  
  .profile-actions {
    padding-top: 10px;
    justify-content: center;
    gap: 8px;
  }

  .action-buttons {
    width: 100%;
    justify-content: center;
  }
  
  .profile-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  
  .badges-grid {
    grid-template-columns: 1fr;
  }

  .profile-content {
    padding: 0 16px 20px;
  }

  .profile-avatar {
    width: 80px;
    height: 80px;
  }

  .profile-avatar span {
    font-size: 32px;
  }

  .status-indicator {
    width: 24px;
    height: 24px;
    border-width: 3px;
  }

  .profile-tabs {
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .profile-tabs::-webkit-scrollbar {
    display: none;
  }
  .tab {
    padding: 10px 14px;
    font-size: 13px;
    white-space: nowrap;
  }
  .tab svg {
    display: none;
  }
  .info-grid {
    grid-template-columns: 1fr;
  }
  .stat-card {
    padding: 14px;
  }
  .stat-value {
    font-size: 22px;
  }
  .profile-field {
    grid-template-columns: auto 1fr;
  }
  .servers-section .servers-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
  }
  .server-icon {
    width: 56px;
    height: 56px;
  }
  .server-card {
    padding: 14px;
  }
}

@media (max-width: 480px) {
  .profile-banner {
    height: 100px;
  }
  .profile-header {
    padding-top: 50px;
    gap: 12px;
  }
  .profile-avatar {
    width: 64px;
    height: 64px;
  }
  .profile-avatar span {
    font-size: 26px;
  }
  .status-indicator {
    width: 20px;
    height: 20px;
    bottom: 4px;
    right: 4px;
    border-width: 3px;
  }
  .profile-info h1,
  .profile-info .profile-display-name {
    font-size: 22px;
  }
  .username {
    font-size: 14px;
  }
  .profile-content {
    padding: 0 12px 16px;
  }
  .profile-stats-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .badge-card {
    padding: 12px;
  }
  .badge-icon-wrapper {
    width: 36px;
    height: 36px;
  }
  .tab {
    padding: 8px 10px;
    font-size: 12px;
  }
  .info-card {
    padding: 16px;
  }
  .modal {
    padding: 16px;
    width: 95%;
  }
  .empty-state {
    padding: 40px 20px;
  }
  .profile-message {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .profile-back-btn {
    top: 10px;
    left: 10px;
    width: 34px;
    height: 34px;
  }
  .servers-section .servers-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
  }
  .server-icon {
    width: 48px;
    height: 48px;
  }
  .server-icon span {
    font-size: 22px;
  }
  .server-card {
    padding: 12px 8px;
  }
  .server-name {
    font-size: 12px;
  }
  .role-badge {
    padding: 4px 10px;
    font-size: 11px;
  }
}

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

@keyframes profileCardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes profileCardGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.1); }
}

@keyframes profileCardShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.avatar-frame-glow {
  position: relative;
}

.avatar-frame-glow::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, var(--accent-primary), transparent);
  animation: rotate 3s linear infinite;
  z-index: -1;
}

.avatar-frame-diamond {
  transform: rotate(45deg);
  border-radius: 4px;
}

.avatar-frame-hexagon {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.avatar-frame-star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.twofactor-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--bg-primary);
}

.twofactor-container {
  width: 100%;
  max-width: 480px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 40px;
  animation: scaleIn 0.3s ease-out;
}

.twofactor-header {
  text-align: center;
  margin-bottom: 32px;
}

.twofactor-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.twofactor-header p {
  color: var(--text-secondary);
  font-size: 14px;
}

.setup-step {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.qr-section {
  text-align: center;
}

.qr-section h3 {
  font-size: 18px;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.qr-instructions {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 20px;
  line-height: 1.5;
}

.qr-code {
  width: 200px;
  height: 200px;
  border-radius: var(--radius);
  background: white;
  padding: 8px;
}

.manual-entry {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.manual-entry code {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  word-break: break-all;
  color: var(--accent-primary);
}

.copy-secret-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
}

.copy-secret-btn:hover {
  background: var(--accent-primary);
  color: var(--text-on-accent);
  border-color: var(--accent-primary);
}

.recovery-section h3 {
  font-size: 18px;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.recovery-warning {
  background: rgba(255, 165, 2, 0.1);
  border: 1px solid rgba(255, 165, 2, 0.3);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13px;
  color: #ffa502;
  margin-bottom: 20px;
  line-height: 1.5;
}

.recovery-keys {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.recovery-key {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-tertiary);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}

.key-number {
  color: var(--text-muted);
  font-size: 12px;
}

.recovery-key code {
  font-size: 12px;
  color: var(--accent-primary);
  letter-spacing: 1px;
}

.confirm-keys {
  margin-bottom: 20px;
}

.confirm-keys label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

.confirm-keys input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-primary);
}

.verify-step {
  text-align: center;
}

.verify-step h3 {
  font-size: 18px;
  margin-bottom: 12px;
}

.verify-instructions {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 24px;
}

.verify-step form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.code-input {
  text-align: center;
  font-size: 32px;
  letter-spacing: 8px;
  padding: 16px !important;
  font-family: 'JetBrains Mono', monospace;
}

.back-btn {
  margin-top: 16px;
}

.twofactor-footer {
  margin-top: 32px;
  text-align: center;
}

.security-note {
  font-size: 12px;
  color: var(--text-muted);
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.quick-switcher-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 100px;
  z-index: 9999;
}

.quick-switcher {
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border-color, #2a2a4a);
  border-radius: 12px;
  width: 600px;
  max-width: 90vw;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.qs-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color, #2a2a4a);
  padding: 8px;
  gap: 4px;
}

.qs-tabs button {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  color: var(--text-muted, #888);
  cursor: pointer;
  border-radius: 6px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.qs-tabs button:hover {
  background: var(--bg-primary, #0a0a15);
  color: var(--text-primary, #fff);
}

.qs-tabs button.active {
  background: var(--accent-primary, #00ff88);
  color: #000;
}

.qs-tab-icon {
  font-size: 14px;
}

.qs-search {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border-color, #2a2a4a);
  gap: 12px;
}

.qs-search-icon {
  font-size: 20px;
  color: var(--text-muted, #888);
}

.qs-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary, #fff);
  font-size: 16px;
  outline: none;
}

.qs-search input::placeholder {
  color: var(--text-muted, #666);
}

.qs-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.qs-empty {
  padding: 40px;
  text-align: center;
  color: var(--text-muted, #888);
}

.qs-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.qs-result:hover,
.qs-result.selected {
  background: var(--bg-primary, #0a0a15);
}

.qs-result-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.qs-result-icon-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-primary, #00ff88);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

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

.qs-result-name {
  font-weight: 500;
  color: var(--text-primary, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qs-result-preview {
  font-size: 12px;
  color: var(--text-muted, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qs-result-meta {
  font-size: 12px;
  color: var(--accent-primary, #00ff88);
}

.qs-result-type {
  font-size: 11px;
  color: var(--text-muted, #666);
  text-transform: uppercase;
  padding: 4px 8px;
  background: var(--bg-primary, #0a0a15);
  border-radius: 4px;
}

.qs-footer {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 12px;
  border-top: 1px solid var(--border-color, #2a2a4a);
  font-size: 12px;
  color: var(--text-muted, #888);
}

.qs-footer kbd {
  background: var(--bg-primary, #0a0a15);
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 4px;
  font-family: inherit;
}
.keyboard-shortcuts-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.keyboard-shortcuts-modal {
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border-color, #2a2a4a);
  border-radius: 12px;
  width: 560px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ks-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color, #2a2a4a);
}

.ks-header h2 {
  margin: 0;
  font-size: 20px;
}

.ks-tabs {
  display: flex;
  padding: 12px 24px;
  gap: 8px;
  border-bottom: 1px solid var(--border-color, #2a2a4a);
}

.ks-tabs button {
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: var(--text-muted, #888);
  cursor: pointer;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s;
}

.ks-tabs button:hover {
  background: var(--bg-primary, #0a0a15);
  color: var(--text-primary, #fff);
}

.ks-tabs button.active {
  background: var(--accent-primary, #00ff88);
  color: #000;
}

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

.ks-shortcut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color, #2a2a4a);
}

.ks-shortcut:last-child {
  border-bottom: none;
}

.ks-keys {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ks-keys kbd {
  background: var(--bg-primary, #0a0a15);
  border: 1px solid var(--border-color, #2a2a4a);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-primary, #fff);
}

.ks-plus {
  color: var(--text-muted, #666);
  margin: 0 4px;
  font-size: 12px;
}

.ks-desc {
  color: var(--text-muted, #888);
  font-size: 14px;
}

.ks-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color, #2a2a4a);
  text-align: center;
  color: var(--text-muted, #888);
  font-size: 13px;
}

.ks-footer kbd {
  background: var(--bg-primary, #0a0a15);
  border: 1px solid var(--border-color, #2a2a4a);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  margin: 0 4px;
}
.system-announcement-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease-out;
}

.system-announcement-overlay.closing {
  animation: fadeOut 0.3s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.system-announcement-modal {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 16px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(88, 101, 242, 0.2);
  animation: slideUp 0.4s ease-out;
}

.system-announcement-overlay.closing .system-announcement-modal {
  animation: slideDown 0.3s ease-out forwards;
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideDown {
  from { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to { 
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
}

.system-announcement-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border-bottom: 1px solid rgba(88, 101, 242, 0.3);
  background: rgba(88, 101, 242, 0.1);
}

.system-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #5865F2;
  box-shadow: 0 0 20px rgba(88, 101, 242, 0.5);
}

.system-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.system-header-text h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.system-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  background: linear-gradient(90deg, #5865F2, #7289DA);
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.system-announcement-body {
  padding: 24px;
}

.system-message {
  color: #B9BBBE;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.system-features {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 16px;
}

.system-features h3 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #5865F2;
}

.system-features ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.system-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  color: #DCDDDE;
  font-size: 14px;
}

.feature-icon {
  font-size: 14px;
}

.system-announcement-footer {
  padding: 20px 24px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid rgba(88, 101, 242, 0.2);
}

.system-acknowledge-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #5865F2, #7289DA);
  color: var(--text-primary);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.system-acknowledge-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(88, 101, 242, 0.4);
}

.system-acknowledge-btn:active {
  transform: translateY(0);
}.server-sidebar {
  width: 72px;
  height: 100vh;
  flex-shrink: 0;
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-color);
  overflow: hidden;
}

.server-sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.server-sidebar-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 8px;
}

.server-divider {
  width: 32px;
  height: 2px;
  background: var(--border-color);
  border-radius: 1px;
  margin: 4px 0;
}

.server-list-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 8px;
}

.server-list-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) var(--bg-secondary);
}

.server-list-scroll::-webkit-scrollbar {
  width: 4px;
}

.server-list-scroll::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

.server-list-scroll::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 2px;
}

.server-list-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

.server-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: var(--transition);
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.server-icon:hover {
  border-color: var(--accent-primary);
  border-radius: 16px;
  background: var(--accent-primary);
}

.server-icon.active {
  border-radius: 16px;
  background: var(--accent-primary);
}

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

.server-icon span {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.server-icon:hover span,
.server-icon.active span {
  color: var(--bg-primary);
}

.server-icon svg {
  width: 24px;
  height: 24px;
  color: var(--text-primary);
  transition: var(--transition);
}

.server-icon:hover svg,
.server-icon.active svg {
  color: var(--bg-primary);
}

.home-button {
  background: var(--accent-primary);
  border-radius: 16px;
}

.home-button:hover {
  background: var(--accent-secondary);
  border-radius: 16px;
}

.home-button.active {
  background: var(--accent-secondary);
  border-radius: 16px;
}

.home-button svg {
  color: var(--bg-primary);
}

.add-server-btn,
.discover-btn,
.create-group-btn {
  background: var(--bg-tertiary);
  border: 2px dashed var(--border-color);
}

.add-server-btn:hover,
.discover-btn:hover,
.create-group-btn:hover {
  border-style: solid;
  border-color: var(--accent-primary);
  border-radius: 16px;
  background: var(--accent-primary);
  box-shadow: 0 0 15px var(--accent-glow);
}

.create-group-btn {
  border-style: dotted;
}

.no-servers {
  padding: 20px 0;
  text-align: center;
}

.no-servers span {
  font-size: 11px;
  color: var(--text-muted);
}

.server-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.server-context-menu {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
  background: var(--bg-primary, #1a1a2e);
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 12px;
  padding: 8px;
  min-width: 280px;
  max-width: 340px;
  box-shadow: 
    0 16px 48px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 255, 136, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  z-index: 999999 !important;
  animation: contextMenuFadeIn 0.12s ease-out;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@keyframes contextMenuFadeIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.server-context-menu .context-header {
  padding: 12px 16px;
  margin-bottom: 4px;
  background: linear-gradient(180deg, rgba(0, 255, 136, 0.08) 0%, transparent 100%);
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid rgba(0, 255, 136, 0.15);
}

.server-context-menu .server-name {
  font-weight: 700;
  font-size: 15px;
  color: #00ff88;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

.server-context-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}

.server-context-menu button::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: transparent;
  transition: all 0.15s ease;
  border-radius: 0 2px 2px 0;
}

.server-context-menu button:hover {
  background: linear-gradient(90deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 255, 136, 0.05) 100%);
  color: #00ff88;
  transform: translateX(4px);
  padding-left: 20px;
}

.server-context-menu button:hover::before {
  background: #00ff88;
  width: 4px;
}

.server-context-menu button:active {
  transform: translateX(2px);
  padding-left: 18px;
}

.server-context-menu .menu-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  filter: grayscale(0.2);
}

.server-context-menu button:hover .menu-icon {
  filter: grayscale(0);
}

.server-context-menu .chevron {
  margin-left: auto;
  color: #666;
  font-size: 20px;
  font-weight: 300;
}

.server-context-menu button.danger {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.05);
}

.server-context-menu button.danger:hover {
  background: linear-gradient(90deg, rgba(255, 107, 107, 0.2) 0%, rgba(255, 107, 107, 0.08) 100%);
  color: #ff6b6b;
}

.server-context-menu button.danger::before {
  background: #ff6b6b;
}

.server-context-menu button.danger:hover::before {
  width: 4px;
  background: #ff6b6b;
}

.server-context-menu .context-divider {
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(0, 255, 136, 0.2) 20%, 
    rgba(0, 255, 136, 0.2) 80%, 
    transparent 100%);
  margin: 8px 8px;
}

.server-context-menu .context-divider {
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(0, 255, 136, 0.2) 20%, 
    rgba(0, 255, 136, 0.2) 80%, 
    transparent 100%);
  margin: 8px 8px;
}

.server-context-menu .context-submenu {
  position: absolute;
  left: 100%;
  top: 0;
  background: var(--bg-primary);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 8px;
  padding: 6px;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 1000000;
}

.server-context-menu button:hover .context-submenu {
  display: block;
}

/* ===== MOBILE: Fixed left sidebar (Discord-style) ===== */
@media (max-width: 768px) {
  .server-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    z-index: 1000;
    height: 100dvh;
    border-right: 1px solid var(--border-color);
    background: var(--bg-secondary);
  }

  .server-sidebar-inner {
    height: 100%;
  }

  .server-sidebar-top {
    padding: 8px 0;
    gap: 4px;
  }

  .server-divider {
    width: 24px;
    margin: 2px auto;
  }

  .server-list-scroll {
    padding: 0 6px;
    gap: 4px;
  }

  .server-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-width: 1.5px;
  }

  .server-icon span {
    font-size: 16px;
  }

  .server-icon svg {
    width: 18px;
    height: 18px;
  }

  .home-button {
    border-radius: 12px;
  }

  .home-button:hover {
    border-radius: 12px;
  }

  .home-button.active {
    border-radius: 12px;
  }

  .add-server-btn,
  .discover-btn,
  .create-group-btn {
    border-width: 1.5px;
  }

  .no-servers {
    padding: 12px 0;
  }

  .no-servers span {
    font-size: 10px;
  }
}
.quickbuy-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: quickbuyFadeIn 0.15s ease;
}

@keyframes quickbuyFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes quickbuySlideUp {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.quickbuy-modal {
  background: var(--bg-secondary, #12121a);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: 16px;
  width: 340px;
  max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 255, 136, 0.06);
  animation: quickbuySlideUp 0.2s ease;
  overflow: hidden;
}

.quickbuy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color, #2a2a3a);
}

.quickbuy-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #00ff88;
}

.quickbuy-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #e0e0e0);
}

.quickbuy-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: none;
  border: none;
  color: var(--text-muted, #888);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.quickbuy-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary, #e0e0e0);
}

.quickbuy-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 16px 0;
  padding: 8px 12px;
  background: rgba(255, 71, 87, 0.08);
  border: 1px solid rgba(255, 71, 87, 0.2);
  border-radius: 8px;
  color: #ff4757;
  font-size: 0.8rem;
}

.quickbuy-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text-muted, #888);
}

.quickbuy-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-muted, #888);
  font-size: 0.85rem;
}

.quickbuy-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
}

.quickbuy-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-primary, #0a0a0f);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-primary, #e0e0e0);
  font-size: 0;
}

.quickbuy-option:hover:not(:disabled) {
  border-color: rgba(0, 255, 136, 0.4);
  background: rgba(0, 255, 136, 0.04);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.quickbuy-option:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.quickbuy-option-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.quickbuy-option-number {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}

.quickbuy-option-credits {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.quickbuy-option-bonus {
  font-size: 0.65rem;
  font-weight: 700;
  color: #ffb74d;
  background: rgba(255, 183, 77, 0.1);
  border: 1px solid rgba(255, 183, 77, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: -4px;
}

.quickbuy-option-price {
  font-size: 0.9rem;
  font-weight: 700;
  color: #00ff88;
  white-space: nowrap;
}

.quickbuy-view-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 12px;
  background: none;
  border: none;
  border-top: 1px solid var(--border-color, #2a2a3a);
  color: #00ff88;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.quickbuy-view-all:hover {
  background: rgba(0, 255, 136, 0.06);
}.notifications-btn {
  position: relative;
  background: var(--bg-secondary);
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 18px;
}

.notifications-btn:hover {
  background: var(--bg-tertiary);
}

.notifications-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--danger);
  color: var(--text-on-accent);
  font-size: 10px;
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}

.notifications-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
}

.notifications-panel {
  width: 380px;
  max-width: 100%;
  background: var(--bg-primary);
  border-left: 1px solid var(--border-color);
  height: 100%;
  display: flex;
  flex-direction: column;
  animation: slideIn 0.2s ease-out;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.notifications-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
}

.notifications-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--text-primary);
}

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

.mark-all-btn {
  background: transparent;
  border: 1px solid var(--accent-primary);
  color: var(--accent-primary);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.mark-all-btn:hover {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  z-index: 10;
}

@media (max-width: 768px) {
  .notifications-panel {
    width: 100%;
    max-width: 100%;
    border-left: none;
  }
  .notifications-header {
    padding: 12px;
  }
  .notifications-header h3 {
    font-size: 16px;
  }
  .notification-item {
    padding: 10px;
    gap: 10px;
  }
  .notification-avatar {
    width: 36px;
    height: 36px;
  }
  .notification-sender {
    font-size: 13px;
  }
  .notification-content p {
    font-size: 12px;
  }
  .friend-request-actions {
    flex-direction: column;
    gap: 4px;
  }
  .accept-friend-btn, .decline-friend-btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .close-btn {
    font-size: 28px;
    width: 40px;
    height: 40px;
    top: 8px;
    right: 8px;
  }
  .notifications-overlay {
    background: rgba(0, 0, 0, 0.7);
  }
  .notifications-panel {
    width: 100%;
    max-width: 100%;
  }
  .notifications-btn {
    padding: 6px 10px;
    font-size: 16px;
  }
  .notifications-list {
    padding: 4px;
  }
  .notification-item.unread {
    border-left-width: 2px;
  }
  .notification-type-icon {
    width: 16px;
    height: 16px;
    font-size: 9px;
  }
  .notification-time {
    font-size: 10px;
  }
}

@media (max-width: 360px) {
  .notification-item {
    flex-direction: column;
    gap: 6px;
  }
  .notification-avatar {
    width: 32px;
    height: 32px;
  }
  .unread-dot {
    width: 6px;
    height: 6px;
  }
}

.close-btn:hover {
  color: var(--text-primary);
}

.notifications-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) var(--bg-secondary);
  min-height: 0;
  height: 100%;
}

.notifications-list::-webkit-scrollbar {
  width: 6px;
}

.notifications-list::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

.notifications-list::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 3px;
}

.notifications-list::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

.no-notifications {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 20px;
}

.notification-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}

.notification-item:hover {
  background: var(--bg-secondary);
}

.notification-item.unread {
  background: rgba(0, 255, 136, 0.05);
  border-left: 3px solid var(--accent-primary);
}

.notification-item.read {
  opacity: 0.7;
}

.unread-dot {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-primary);
}

.notification-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  cursor: pointer;
}

.notification-avatar:hover {
  opacity: 0.8;
}

.notification-avatar img,
.notification-avatar span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--text-secondary);
  object-fit: cover;
}

.notification-type-icon {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  border: 2px solid var(--bg-primary);
}

.notification-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notification-sender {
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 14px;
}

.notification-sender:hover {
  color: var(--accent-primary);
  text-decoration: underline;
}

.notification-content p {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 0;
}

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

.accept-friend-btn, .decline-friend-btn {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.accept-friend-btn {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.accept-friend-btn:hover {
  filter: brightness(1.1);
}

.decline-friend-btn {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.decline-friend-btn:hover {
  background: var(--bg-hover);
}

.notification-time {
  font-size: 11px;
  color: var(--text-muted);
}
.global-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.global-search-modal {
  width: 680px;
  max-width: 95vw;
  max-height: 75vh;
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  border-radius: 16px;
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideDown {
  from { 
    transform: translateY(-30px) scale(0.95); 
    opacity: 0; 
  }
  to { 
    transform: translateY(0) scale(1); 
    opacity: 1; 
  }
}

.global-search-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
}

.search-icon {
  color: var(--accent-primary);
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 0 8px var(--accent-glow));
}

.global-search-input {
  flex: 1;
  background: var(--bg-tertiary);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 14px 18px;
  color: var(--text-primary);
  font-size: 17px;
  outline: none;
  transition: all 0.2s ease;
}

.global-search-input::placeholder {
  color: var(--text-muted);
}

.global-search-input:focus {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px rgba(0, 255, 136, 0.1);
}

.global-search-input::placeholder {
  color: var(--text-muted);
}

.clear-search-btn {
  background: var(--bg-tertiary);
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.clear-search-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  transform: scale(1.05);
}

.global-search-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  overflow-x: auto;
}

.search-tab {
  padding: 10px 18px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  position: relative;
}

.search-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent-primary);
  transition: all 0.2s ease;
  transform: translateX(-50%);
  border-radius: 1px;
}

.search-tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.search-tab.active {
  background: var(--accent-primary);
  color: var(--bg-primary);
  box-shadow: 0 4px 15px var(--accent-glow);
}

.search-tab.active::after {
  display: none;
}

.global-search-results {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  min-height: 280px;
  max-height: 500px;
}

.search-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: var(--text-muted);
  gap: 16px;
}

.search-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  box-shadow: 0 0 20px var(--accent-glow);
}

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

.search-empty, .search-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  color: var(--text-muted);
  text-align: center;
}

.search-empty svg {
  margin-bottom: 20px;
  opacity: 0.4;
  width: 64px;
  height: 64px;
}

.search-empty p, .search-no-results p {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--text-secondary);
}

.search-empty span, .search-no-results span {
  font-size: 14px;
  opacity: 0.6;
}

.search-section {
  margin-bottom: 20px;
}

.search-section-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-primary);
  padding: 12px 16px 8px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-section-header::before {
  content: '';
  width: 3px;
  height: 12px;
  background: var(--accent-primary);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--accent-glow);
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 4px;
}

.search-result-item:hover {
  background: var(--bg-hover);
  transform: translateX(4px);
  box-shadow: 
    inset 3px 0 0 var(--accent-primary),
    0 2px 10px rgba(0, 0, 0, 0.2);
}

.result-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--border-color);
  transition: border-color 0.15s;
}

.search-result-item:hover .result-avatar {
  border-color: var(--accent-primary);
}

.result-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary, #00cc6a));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-primary);
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 15px var(--accent-glow);
}

.result-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.result-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.result-sub {
  font-size: 13px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-content {
  font-size: 14px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-context {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.message-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.result-time {
  font-size: 12px;
  color: var(--accent-primary);
  background: rgba(0, 255, 136, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
}

.global-search-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 14px 24px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.search-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.search-hint kbd {
  background: var(--bg-tertiary);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-family: inherit;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 0 var(--border-color);
}.friends-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.friends-search-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  width: 90%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  animation: slideUp 0.25s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.friends-search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}

.friends-search-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg-tertiary);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

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

.friends-search-tabs {
  display: flex;
  padding: 12px 16px;
  gap: 8px;
  border-bottom: 1px solid var(--border-color);
}

.tab-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tab-btn:hover {
  background: var(--bg-tertiary);
}

.tab-btn.active {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.tab-badge {
  background: var(--danger);
  color: var(--text-on-accent);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.tab-btn.active .tab-badge {
  background: var(--bg-primary);
  color: var(--accent-primary);
}

.tab-badge.pending {
  background: var(--warning);
}

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

.search-input-wrapper-modern {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.search-input-wrapper-modern svg {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
}

.search-input-modern {
  width: 100%;
  padding: 14px 40px 14px 44px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 15px;
  outline: none;
  transition: all 0.2s ease;
}

.search-input-modern:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
}

.search-input-modern::placeholder {
  color: var(--text-muted);
}

.clear-btn {
  position: absolute;
  right: 12px;
  width: 24px;
  height: 24px;
  border: none;
  background: var(--bg-hover);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
}

.result-item,
.request-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

.result-item:hover,
.request-item:hover {
  background: var(--bg-hover);
}

.result-avatar,
.request-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--accent-primary);
}

.result-avatar img,
.request-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--bg-primary);
}

.result-info,
.request-info {
  flex: 1;
  min-width: 0;
}

.result-name,
.request-name {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-username,
.request-username {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
}

.result-actions,
.request-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.add-friend-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--accent-primary);
  border: none;
  border-radius: 8px;
  color: var(--bg-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-friend-btn:hover {
  background: var(--accent-hover);
  transform: scale(1.02);
}

.add-friend-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.status-pending,
.status-friend,
.status-pending-them {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
}

.status-pending {
  background: var(--warning);
  color: var(--bg-primary);
}

.status-friend {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.status-pending-them {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

.request-message {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 4px;
}

.accept-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--accent-primary);
  border-radius: 8px;
  color: var(--bg-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.accept-btn:hover {
  background: var(--accent-hover);
  transform: scale(1.05);
}

.accept-btn:disabled {
  opacity: 0.5;
}

.decline-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--bg-tertiary);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.decline-btn:hover {
  background: var(--danger);
  color: var(--text-on-accent);
}

.decline-btn:disabled {
  opacity: 0.5;
}

.loading-state,
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 12px;
}

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

.loading-state p,
.empty-state p {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 500;
}

.empty-state span {
  color: var(--text-muted);
  font-size: 13px;
}

.friends-search-footer {
  padding: 12px 24px;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

.friends-search-footer p {
  color: var(--text-muted);
  font-size: 12px;
  margin: 0;
}

.requests-list {
  max-height: 400px;
  overflow-y: auto;
}

.requests-list .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.requests-list .empty-state p {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.requests-list .empty-state span {
  font-size: 13px;
  color: var(--text-muted);
}

.search-results {
  max-height: 400px;
  overflow-y: auto;
}.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--bg-secondary, #1e1f22);
  border-top: 1px solid var(--bg-tertiary, #2b2d31);
  z-index: 1000;
  padding: 0 env(safe-area-inset-bottom, 0);
  transition: transform 0.3s ease;
  overflow: hidden;
  max-width: 100vw;
}

.mobile-nav.hidden {
  transform: translateY(100%);
}

.mobile-nav.visible {
  transform: translateY(0);
}

.mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  color: var(--text-muted, #949ba4);
  transition: all 0.2s ease;
  padding: 8px 0;
  min-height: 56px;
}

.mobile-nav-item:active {
  transform: scale(0.95);
}

.mobile-nav-item.active {
  color: var(--accent, #00ff88);
}

.mobile-nav-item.active .mobile-nav-icon {
  transform: scale(1.1);
}

.mobile-nav-icon {
  font-size: 24px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.mobile-nav-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .mobile-nav {
    display: flex;
  }
}

@media (max-width: 480px) {
  .mobile-nav {
    height: 56px;
  }
  .mobile-nav-item {
    padding: 4px 0;
    min-height: 48px;
  }
  .mobile-nav-icon {
    font-size: 20px;
  }
  .mobile-nav-label {
    font-size: 9px;
  }
}

@media (max-width: 360px) {
  .mobile-nav-item {
    gap: 2px;
  }
  .mobile-nav-icon {
    font-size: 18px;
  }
  .mobile-nav-label {
    font-size: 8px;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .mobile-nav {
    height: 48px;
  }
  .mobile-nav-item {
    flex-direction: row;
    gap: 6px;
    min-height: 44px;
  }
  .mobile-nav-icon {
    font-size: 18px;
  }
  .mobile-nav-label {
    font-size: 10px;
  }
}
.layout {
  display: flex;
  flex-direction: row;
  height: 100vh;
  min-height: 100vh;
  width: 100vw;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  flex: 1;
  background: var(--bg-primary);
  box-sizing: border-box;
}

.layout > * {
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
}

/* ============================================
   RESPONSIVE LAYOUT - DISCORD-STYLE
   ============================================ */

/* Desktop breakpoints */
@media (min-width: 1280px) {
  .sidebar {
    width: 280px;
    min-width: 280px;
  }
  .sidebar-header {
    padding: 16px 20px;
  }
  .logo-text {
    font-size: 18px;
  }
}

@media (min-width: 1536px) {
  .sidebar {
    width: 300px;
    min-width: 300px;
  }
  .sidebar-header {
    padding: 20px 24px;
  }
  .logo-text {
    font-size: 20px;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .sidebar {
    width: 240px;
    min-width: 240px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar {
    width: 220px;
    min-width: 220px;
  }
  .sidebar-header {
    padding: 14px;
  }
  .logo-text {
    font-size: 15px;
  }
}

/* Responsive sidebar overlay: backdrop on mobile, hidden on desktop */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

@media (min-width: 768px) {
  .sidebar-overlay {
    display: none;
  }
  .mobile-nav {
    display: none !important;
  }
  .sidebar-mobile-toggle {
    display: none !important;
  }
}

.sidebar {
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  flex-shrink: 0;
  flex-grow: 0;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
}

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

.logo-text {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--accent-primary);
  text-shadow: 0 0 20px var(--accent-glow);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) var(--bg-secondary);
}

.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: var(--transition);
  margin: 2px 0;
  position: relative;
  overflow: hidden;
}

.nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  transition: var(--transition);
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--bg-hover);
  color: var(--accent-primary);
}

.nav-item.active::before {
  background: var(--accent-primary);
}

.nav-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.nav-label {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-divider {
  height: 1px;
  background: var(--border-color);
  margin: 12px 0;
}

.channel-category {
  margin-bottom: 16px;
}

.category-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  padding: 8px 12px;
  margin-bottom: 4px;
}

.channel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  margin: 2px 4px;
  position: relative;
}

.channel-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 0;
  background: var(--accent-primary);
  border-radius: 0 2px 2px 0;
  transition: var(--transition);
}

.channel-item:hover {
  background: var(--bg-hover);
}

.channel-item.active {
  background: var(--bg-hover);
}

.channel-item.active::before {
  height: 60%;
}

.channel-item.active .channel-name {
  color: var(--text-primary);
}

.channel-item .friend-nav-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.channel-item .friend-nav-name {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.channel-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.channel-item.active {
  background: var(--bg-tertiary);
  color: var(--accent-primary);
}

.channel-icon {
  font-size: 16px;
  opacity: 0.7;
}

.channel-name {
  font-size: 14px;
}

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--border-color);
  position: relative;
  z-index: 100000;
  overflow: visible;
}

.user-panel {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  pointer-events: auto;
  position: relative;
  z-index: 10;
  visibility: visible;
  opacity: 1;
}

@media (max-width: 480px) {
  .user-panel {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 48px;
    padding: 8px 12px;
  }
}

.user-panel:hover {
  background: var(--bg-hover);
}

.status-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid var(--bg-secondary);
  cursor: pointer;
  z-index: 1;
}

.status-indicator.online { background: var(--accent-primary); }
.status-indicator.idle { background: var(--warning); }
.status-indicator.dnd { background: var(--danger); }
.status-indicator.offline { background: var(--text-muted); }

.status-menu {
  position: absolute;
  bottom: 100%;
  left: 12px;
  right: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
}

.status-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.status-option:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.status-dot.online { background: var(--accent-primary); }
.status-dot.idle { background: var(--warning); }
.status-dot.dnd { background: var(--danger); }
.status-dot.offline { background: var(--text-muted); }

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

.user-name {
  font-size: 13px;
  font-weight: 500;
}

.user-badge {
  font-size: 10px;
  text-transform: uppercase;
}

.user-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  z-index: 100000;
  min-width: 200px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  display: block;
  visibility: visible;
  margin-bottom: 8px;
}

.user-menu-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.user-menu-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.user-settings-popup-overlay {
  position: fixed;
  z-index: 999999;
  animation: popupSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popupSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.user-settings-popup {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 80px rgba(0, 255, 136, 0.1);
  overflow: hidden;
  min-width: 220px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform-origin: bottom center;
}

.user-settings-popup::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--accent-primary) 20%, 
    var(--accent-primary) 80%, 
    transparent 100%);
  opacity: 0.5;
}

.popup-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  color: var(--text-primary);
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.popup-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent-primary);
  transform: scaleY(0);
  transition: transform 0.15s ease;
}

.popup-item:hover {
  background: var(--bg-hover);
  color: var(--accent-primary);
}

.popup-item:hover::before {
  transform: scaleY(1);
}

.popup-item svg {
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.popup-item:hover svg {
  opacity: 1;
  transform: scale(1.1);
}

.popup-item.danger {
  color: var(--danger);
}

.popup-item.danger:hover {
  background: rgba(255, 71, 87, 0.1);
  color: var(--danger);
}

.popup-item.danger::before {
  background: var(--danger);
}

.popup-item.danger svg {
  color: var(--danger);
}

.popup-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 0;
  position: relative;
}

.popup-divider::before {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--border-color) 20%, 
    var(--border-color) 80%, 
    transparent 100%);
}

.main-content-wrapper {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
}

.main-content {
  flex: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  width: 100%;
}

.sidebar-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.sidebar-mobile-toggle:hover {
  background: var(--bg-hover);
  color: var(--accent-primary);
}

.sidebar-mobile-toggle:active {
  transform: scale(0.95);
}

/* Members sidebar in main content wrapper - override mobile hide */
.main-content-wrapper .members-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}

.main-content-wrapper .members-sidebar-loading {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
}



.add-friend-section {
  padding: 8px 12px;
}

.add-friend-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.add-friend-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.friend-search-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.friend-search-input:focus {
  border-color: var(--accent-primary);
}

.friend-search-input::placeholder {
  color: var(--text-muted);
}

.friend-search-results {
  margin-top: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  max-height: 200px;
  overflow-y: auto;
}

.friend-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.friend-result-item:hover {
  background: var(--bg-hover);
}

.friend-result-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  color: var(--bg-primary);
}

.friend-result-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.friend-result-name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-result-username {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}

.friend-add-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-primary);
  border: none;
  color: var(--bg-primary);
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, background 0.2s;
}

.friend-add-btn:hover {
  transform: scale(1.1);
  background: var(--accent-secondary);
}

/* Custom Status Modal */
.custom-status-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.custom-status-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  width: 90%;
  max-width: 440px;
  overflow: hidden;
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.custom-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-tertiary);
}

.custom-status-header h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

.custom-status-header .close-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.2s;
}

.custom-status-header .close-btn:hover {
  background: var(--bg-hover);
  color: var(--danger);
}

.custom-status-content {
  padding: 24px;
}

.custom-status-input-group {
  position: relative;
  margin-bottom: 24px;
}

.custom-status-input-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.custom-status-input-group input {
  width: 100%;
  padding: 14px 16px;
  padding-right: 60px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 16px;
  transition: all 0.2s;
}

.custom-status-input-group input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 0, 255, 136), 0.2);
}

.custom-status-input-group input::placeholder {
  color: var(--text-muted);
}

.custom-status-input-group .char-count {
  position: absolute;
  right: 16px;
  bottom: 14px;
  font-size: 11px;
  color: var(--text-muted);
}

.custom-status-presets label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.preset-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preset-btn:hover {
  background: var(--bg-quaternary);
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}

.preset-btn span {
  font-size: 16px;
}

.custom-status-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-tertiary);
}

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

.btn-clear {
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--danger);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-clear:hover {
  background: var(--danger);
  color: var(--text-on-accent);
  border-color: var(--danger);
}

.btn-cancel {
  padding: 10px 20px;
  background: var(--bg-quaternary);
  border: none;
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-cancel:hover {
  background: var(--bg-hover);
}

.btn-save {
  padding: 10px 24px;
  background: var(--accent-primary);
  border: none;
  border-radius: 8px;
  color: var(--bg-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-save:hover:not(:disabled) {
  background: var(--accent-secondary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb, 0, 255, 136), 0.3);
}

.btn-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .preset-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Cursor Effects */
.cursor-trail-enabled {
  cursor: var(--cursor-type, pointer);
}

.cursor-trail-enabled * {
  cursor: var(--cursor-type, pointer);
}

/* Neon Glow Trail */
.cursor-trail-enabled.cursor-glow {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='8' fill='%2300ff88' filter='url(%23glow)'/%3E%3Cdefs%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='2' result='blur'/%3E%3CfeMerge%3E%3CfeMergeNode in='blur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E"), pointer;
}

/* Sparkle Trail Effect */
@keyframes sparkle-trail {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.8; }
  100% { transform: scale(0); opacity: 0; }
}

.cursor-sparkle-particle {
  position: fixed;
  pointer-events: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 10px var(--accent-primary), 0 0 20px var(--accent-primary);
  animation: sparkle-trail 0.6s ease-out forwards;
  z-index: 9999;
}

/* Rainbow Trail Effect */
@keyframes rainbow-fade {
  0% { transform: scale(1); opacity: 1; filter: hue-rotate(0deg); }
  100% { transform: scale(0); opacity: 0; filter: hue-rotate(360deg); }
}

.cursor-rainbow-particle {
  position: fixed;
  pointer-events: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: rainbow-fade 0.8s ease-out forwards;
  z-index: 9999;
}

/* Click Ripple Effect */
@keyframes click-ripple {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

.cursor-ripple {
  position: fixed;
  pointer-events: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--accent-primary);
  animation: click-ripple 0.4s ease-out forwards;
  z-index: 9999;
}

/* Star Burst Effect */
@keyframes star-burst {
  0% { transform: scale(0) rotate(0deg); opacity: 1; }
  50% { transform: scale(1) rotate(180deg); opacity: 0.8; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

.cursor-star-burst {
  position: fixed;
  pointer-events: none;
  width: 20px;
  height: 20px;
  background: var(--accent-primary);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: star-burst 0.5s ease-out forwards;
  z-index: 9999;
}

/* Ghost Trail Effect */
@keyframes ghost-fade {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.5); }
}

.cursor-ghost-particle {
  position: fixed;
  pointer-events: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
  animation: ghost-fade 0.8s ease-out forwards;
  z-index: 9999;
}

/* Laser Trail Effect */
@keyframes laser-trail {
  0% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(0.2); }
}

.cursor-laser-particle {
  position: fixed;
  pointer-events: none;
  width: 3px;
  height: 30px;
  background: linear-gradient(to bottom, var(--accent-primary), transparent);
  animation: laser-trail 0.3s ease-out forwards;
  z-index: 9999;
}

/* Cyber Glitch Effect */
@keyframes cyber-glitch {
  0%, 100% { transform: translate(0, 0); opacity: 1; }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(2px, -2px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
}

.cursor-glitch {
  position: fixed;
  pointer-events: none;
  width: 10px;
  height: 10px;
  background: var(--accent-primary);
  animation: cyber-glitch 0.2s ease-in-out;
  z-index: 9999;
}

/* Comet Effect */
@keyframes comet-trail {
  0% { transform: scale(1) translateX(0); opacity: 1; }
  100% { transform: scale(0.3) translateX(-50px); opacity: 0; }
}

.cursor-comet-particle {
  position: fixed;
  pointer-events: none;
  width: 15px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to left, var(--accent-primary), transparent);
  animation: comet-trail 0.5s ease-out forwards;
  z-index: 9999;
}

/* Flame Burst Effect */
@keyframes flame-burst {
  0% { transform: scale(0); opacity: 1; }
  50% { opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.cursor-flame {
  position: fixed;
  pointer-events: none;
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, #ff6600 0%, #ff3300 50%, transparent 70%);
  animation: flame-burst 0.4s ease-out forwards;
  z-index: 9999;
}

/* Ice Crystal Burst */
@keyframes crystal-burst {
  0% { transform: scale(0) rotate(0deg); opacity: 1; }
  100% { transform: scale(1.5) rotate(45deg); opacity: 0; }
}

.cursor-crystal {
  position: fixed;
  pointer-events: none;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #00ffff, #0088ff);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation: crystal-burst 0.4s ease-out forwards;
  z-index: 9999;
}

/* Magic Sparkle Burst */
@keyframes magic-burst {
  0% { transform: scale(0) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

.cursor-magic {
  position: fixed;
  pointer-events: none;
  width: 25px;
  height: 25px;
  background: radial-gradient(circle, #ffff00 0%, #ff00ff 50%, transparent 70%);
  clip-path: polygon(
    50% 0%, 55% 35%, 80% 20%, 65% 45%, 100% 50%, 
    65% 55%, 80% 80%, 55% 65%, 50% 100%, 
    45% 65%, 20% 80%, 35% 55%, 0% 50%, 
    35% 45%, 20% 20%, 45% 35%
  );
  animation: magic-burst 0.5s ease-out forwards;
  z-index: 9999;
}

/* Cursor Glow Effect */
.cursor-glow-effect {
  position: fixed;
  pointer-events: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-primary) 0%, transparent 70%);
  opacity: 0.5;
  transform: translate(-50%, -50%);
  z-index: 9998;
  animation: glow-pulse 1s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.3; }
}

/* Fire Particle Effect */
@keyframes fire-trail {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -60%) scale(1.3); }
  100% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
}

.cursor-fire-particle {
  position: fixed;
  pointer-events: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  animation: fire-trail 0.6s ease-out forwards;
  z-index: 9999;
}

/* Ice Particle Effect */
@keyframes ice-trail {
  0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0) rotate(180deg); opacity: 0; }
}

.cursor-ice-particle {
  position: fixed;
  pointer-events: none;
  width: 12px;
  height: 12px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation: ice-trail 0.8s ease-out forwards;
  z-index: 9999;
}

/* Pixel Particle Effect */
@keyframes pixel-trail {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
}

.cursor-pixel-particle {
  position: fixed;
  pointer-events: none;
  width: 4px;
  height: 4px;
  animation: pixel-trail 0.4s ease-out forwards;
  z-index: 9999;
  box-shadow: 
    4px 0 0 currentColor,
    -4px 0 0 currentColor,
    0 4px 0 currentColor,
    0 -4px 0 currentColor;
}

/* Flash Effect */
@keyframes flash-effect {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(2); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

.cursor-flash-effect {
  position: fixed;
  pointer-events: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  animation: flash-effect 0.3s ease-out forwards;
  z-index: 9999;
}

/* Explosion Effect */
@keyframes explosion-burst {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  50% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

.cursor-explosion {
  position: fixed;
  pointer-events: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: explosion-burst 0.5s ease-out forwards;
  z-index: 9999;
  box-shadow: 0 0 10px currentColor;
}

/* Pixel Burst Effect */
@keyframes pixel-burst-anim {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.cursor-pixel-burst {
  position: fixed;
  pointer-events: none;
  width: 4px;
  height: 4px;
  animation: pixel-burst-anim 0.3s ease-out forwards;
  z-index: 9999;
  box-shadow: 
    6px 0 0 currentColor,
    -6px 0 0 currentColor,
    0 6px 0 currentColor,
    0 -6px 0 currentColor;
}

/* Cursor Trail Container - ensure it works */
.cursor-trail-container {
  display: block !important;
}

/* ==================== MOBILE RESPONSIVE STYLES ==================== */

@media (max-width: 768px) {
  .layout {
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .sidebar {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    max-height: 50vh;
    padding-left: 56px;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    overflow-y: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
    transition: max-height 0.3s ease;
  }

  .sidebar.collapsed {
    max-height: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border-bottom: none;
  }

  .sidebar-header .sidebar-mobile-toggle {
    display: flex !important;
  }

  .main-sidebar-toggle {
    display: flex !important;
    position: fixed;
    top: 12px;
    left: 68px;
    z-index: 1000;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  .main-sidebar-toggle:hover {
    background: var(--bg-hover);
    color: var(--accent-primary);
  }

  .main-content-wrapper {
    padding-left: 56px;
  }

  .main-content {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .channel-sidebar {
    position: fixed;
    left: 0;
    width: 80px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--bg-tertiary);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 8px;
    height: 100vh;
    height: 100dvh;
    z-index: 100;
  }

  .channel-sidebar .server-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .channel-sidebar .server-icon:hover {
    border-radius: 16px;
  }

  .channel-sidebar .server-icon.active {
    border-radius: 16px;
    background: var(--accent-color);
  }

  .message-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary);
  }

  .message-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
  }

  .message-input-form {
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
    background: var(--bg-secondary);
    border-top: 1px solid var(--bg-tertiary);
  }

  .message-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 24px;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 16px;
    min-height: 44px;
  }

  .message-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-color);
  }

  .message-input::placeholder {
    color: var(--text-muted);
  }

  .message-actions {
    position: fixed;
    bottom: 80px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 50;
  }

  .message-action-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-color);
    border: none;
    color: var(--text-on-accent);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .message-action-btn:active {
    transform: scale(0.95);
  }

  .header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--bg-tertiary);
    min-height: 56px;
  }

  .header-back-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-primary);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .header-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
  }

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

  .header-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .member-list {
    display: none;
  }

  .member-list.visible {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-secondary);
    z-index: 1002;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .member-list.visible.open {
    transform: translateX(0);
  }

  .context-menu {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 8px;
    min-width: 280px;
    max-width: calc(100vw - 32px);
    z-index: 1001;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  }

  .context-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
    min-height: 48px;
  }

  .context-menu-item:hover,
  .context-menu-item:active {
    background: var(--bg-hover);
  }

  .context-menu-item.danger {
    color: #ff4757;
  }

  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(4px);
  }

  .modal-content {
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    background: var(--bg-secondary);
    border-radius: 16px 16px 0 0;
    padding: 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0));
    animation: slideUp 0.3s ease;
  }

  @keyframes slideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .emoji-picker {
    position: fixed;
    bottom: 80px;
    left: 0;
    right: 0;
    max-height: 60vh;
    border-radius: 16px 16px 0 0;
  }

  .reaction-picker {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
  }

  .search-bar {
    padding: 12px 16px;
    background: var(--bg-secondary);
  }

  .search-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 24px;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 16px;
    min-height: 44px;
  }

  .server-header {
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--bg-tertiary);
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .server-icon-large {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .server-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dm-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary) var(--bg-secondary);
  }
  
  .dm-list::-webkit-scrollbar {
    width: 6px;
  }
  
  .dm-list::-webkit-scrollbar-track {
    background: var(--bg-secondary);
  }
  
  .dm-list::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 3px;
  }
  
  .dm-list::-webkit-scrollbar-thumb:hover {
    background: var(--accent-secondary);
  }

  .dm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    min-height: 60px;
  }

  .dm-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
  }

  .dm-info {
    flex: 1;
    overflow: hidden;
  }

  .dm-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
  }

  .dm-preview {
    font-size: 13px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-menu {
    position: fixed;
    bottom: 80px;
    left: 16px;
    right: 16px;
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 8px;
    z-index: 1001;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  }

  .user-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    min-height: 48px;
  }

  .status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
    border: 3px solid var(--bg-secondary);
  }

  .status-indicator.online {
    background: #3ba55c;
  }

  .status-indicator.offline {
    background: #747f8d;
  }

  .status-indicator.idle {
    background: #faa61a;
  }

  .status-indicator.dnd {
    background: #ed4245;
  }

  .mention-badge {
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: var(--accent-color);
    color: var(--text-on-accent);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
  }

  .typing-indicator {
    padding: 8px 16px;
    font-size: 12px;
    color: var(--text-muted);
  }

  .message-group {
    margin-bottom: 16px;
  }

  .message-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px 0;
  }

  .message-date-label {
    background: var(--bg-tertiary);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    color: var(--text-muted);
  }

  .reply-indicator {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-left: 3px solid var(--accent-color);
    border-radius: 4px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .reply-indicator:hover {
    background: var(--bg-hover);
  }

  .reply-indicator-bar {
    width: 3px;
    height: 100%;
    background: var(--accent-color);
    border-radius: 2px;
    margin-right: 12px;
  }

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

  .reply-indicator-author {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-color);
    margin-right: 8px;
  }

  .reply-indicator-text {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .reply-indicator-close {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 8px;
  }

  .reply-indicator-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }

  .message-reply-reference {
    display: flex;
    align-items: flex-start;
    padding: 6px 12px;
    margin-bottom: 4px;
    background: var(--bg-hover);
    border-left: 3px solid var(--accent-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .message-reply-reference:hover {
    background: var(--bg-active);
  }

  .message-reply-reference.deleted {
    opacity: 0.6;
  }

  .reply-reference-icon {
    flex-shrink: 0;
    color: var(--accent-color);
    margin-right: 8px;
    margin-top: 2px;
  }

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

  .reply-reference-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
  }

  .reply-author-avatar-placeholder {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-muted);
  }

  .reply-author-avatar-placeholder.deleted-icon {
    background: transparent;
  }

  .reply-author-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
  }

  .reply-author-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-color);
  }

  .reply-content-preview {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }

  .reply-content-preview.deleted {
    font-style: italic;
    color: var(--text-muted);
  }

  @keyframes highlight-pulse {
    0%, 100% { background: transparent; }
    50% { background: var(--bg-hover); }
  }

  .highlight-reply {
    animation: highlight-pulse 1s ease-in-out 2;
  }

  .reply-preview-text {
    font-size: 13px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .message-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: var(--bg-tertiary);
    border-radius: 24px;
    padding: 4px;
    padding-left: 16px;
  }

  .send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-color);
    border: none;
    color: var(--text-on-accent);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }

  .send-btn:disabled {
    background: var(--bg-hover);
    color: var(--text-muted);
    cursor: not-allowed;
  }

  .scroll-to-bottom {
    position: fixed;
    bottom: 88px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-color);
    border: none;
    color: var(--text-on-accent);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 50;
  }

  .floating-picker {
    position: fixed;
    bottom: 88px;
    right: 16px;
    z-index: 100;
  }

  .attachment-menu {
    position: fixed;
    bottom: 88px;
    left: 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    z-index: 100;
  }

  .attachment-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    min-width: 160px;
    min-height: 48px;
  }

  .attachment-option:hover,
  .attachment-option:active {
    background: var(--bg-hover);
  }

  .upload-preview {
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    margin-bottom: 8px;
  }

  .typing-users {
    padding: 4px 16px;
    font-size: 12px;
    color: var(--text-muted);
    min-height: 24px;
  }
}

@media (max-width: 480px) {
  .close-btn {
    font-size: 28px;
    width: 40px;
    height: 40px;
    top: 8px;
    right: 8px;
  }
  
  .notifications-panel,
  .modal,
  .popup,
  .profile-popup {
    width: 95% !important;
    max-width: 95% !important;
    margin: 10px !important;
    padding: 12px !important;
    font-size: 14px;
  }
  
  .channel-sidebar {
    width: 64px;
  }

  .channel-sidebar .server-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .modal-content {
    max-height: 85vh;
  }

  .context-menu {
    left: 16px;
    right: 16px;
    transform: none;
    bottom: 88px;
  }
}

/* Voice Channel Styles */
.channel-item-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.channel-item-wrapper .channel-item {
  flex: 1;
}

.voice-user-count {
  background: #3ba55d;
  color: var(--text-on-accent);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: auto;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.voice-join-btn {
  background: none;
  border: none;
  color: #3ba55d;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: all 0.2s;
  margin-left: 4px;
}

.voice-join-btn:hover {
  background: #3ba55d;
  color: var(--text-on-accent);
}

.channel-item.active .voice-join-btn {
  color: var(--text-on-accent);
}

.voice-users-in-channel {
  margin-left: 28px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.voice-user-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.voice-user-mini:hover {
  background: rgba(255, 255, 255, 0.05);
}

.speaking-indicator-mini {
  width: 8px;
  height: 8px;
  background: #3ba55d;
  border-radius: 50%;
  animation: pulse 1s infinite;
}

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

/* ===============================
   Create Group Modal - Full Overhaul
   =============================== */

.create-group-modal {
  background: var(--bg-primary, #1a1a2e);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  width: 520px;
  max-width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 255, 136, 0.05);
  animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.create-group-modal::-webkit-scrollbar { width: 6px; }
.create-group-modal::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

@keyframes modalSlideUp {
  from { transform: translateY(30px) scale(0.97); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Header */
.create-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 4px;
}

.create-group-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-primary, #00ff88), var(--accent-secondary, #00d4ff));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.create-group-header .close-btn {
  background: rgba(255,255,255,0.05);
  border: none;
  color: var(--text-muted, #888);
  font-size: 22px;
  cursor: pointer;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: all 0.2s;
}

.create-group-header .close-btn:hover {
  background: rgba(255,68,68,0.2);
  color: var(--danger, #ff4444);
  transform: rotate(90deg);
}

/* ===== Progress ===== */
.create-group-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px 12px;
}

.progress-step {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.2s;
}

.progress-step:hover { background: rgba(255,255,255,0.03); }

.step-number {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.progress-step.active .step-number {
  background: linear-gradient(135deg, var(--accent-primary, #00ff88), var(--accent-secondary, #00d4ff));
  color: #000;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
  transform: scale(1.1);
}

.step-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, rgba(255,255,255,0.5));
  transition: color 0.2s;
}

.progress-step.active .step-label { color: var(--text-primary); }

.progress-line {
  width: 28px;
  height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ===== Step Content ===== */
.create-group-step {
  padding: 0 24px 24px;
}

.create-group-step .form-group {
  margin-bottom: 16px;
}

.create-group-step .form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, rgba(255,255,255,0.6));
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.required { color: var(--danger, #ff6b6b); }
.optional { color: var(--text-muted, rgba(255,255,255,0.3)); font-weight: 400; text-transform: none; letter-spacing: 0; }

.create-group-step .form-group input[type="text"],
.create-group-step .form-group textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-tertiary, rgba(0,0,0,0.3));
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
  box-sizing: border-box;
}

.create-group-step .form-group input[type="text"]:focus,
.create-group-step .form-group textarea:focus {
  border-color: var(--accent-primary, rgba(0, 255, 136, 0.4));
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.05);
}

.create-group-step .form-group textarea {
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}

.char-count {
  display: block;
  text-align: right;
  font-size: 11px;
  color: var(--text-muted, rgba(255,255,255,0.3));
  margin-top: 4px;
}

/* ===== Group Icon ===== */
.group-icon-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}

.group-icon-preview {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  border: 3px dashed var(--border-color, rgba(255,255,255,0.15));
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

.group-icon-preview:hover {
  border-color: var(--accent-primary, rgba(0, 255, 136, 0.5));
  transform: scale(1.08);
  box-shadow: 0 0 30px rgba(0, 255, 136, 0.15);
}

.group-icon-preview.drag-active {
  border-color: var(--accent-primary);
  background: rgba(0, 255, 136, 0.08);
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
  transform: scale(1.08);
}

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

.group-icon-letter {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.group-icon-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.group-icon-overlay svg {
  width: 28px;
  height: 28px;
  color: var(--text-on-accent);
}

.group-icon-preview:hover .group-icon-overlay { opacity: 1; }

.group-icon-hint {
  font-size: 12px;
  color: var(--text-muted, rgba(255,255,255,0.3));
}

/* ===== Color Picker ===== */
.color-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.color-option {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
  position: relative;
}

.color-option:hover { transform: scale(1.2); z-index: 1; }

.color-option.selected {
  border-color: var(--text-primary);
  box-shadow: 0 0 16px rgba(255,255,255,0.25);
  transform: scale(1.15);
  z-index: 1;
}

/* ===== Category Grid ===== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 4px;
}

.category-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  background: var(--bg-tertiary, rgba(0,0,0,0.2));
  border: 1px solid var(--border-color, rgba(255,255,255,0.06));
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.category-option:hover {
  background: var(--bg-quaternary, rgba(255,255,255,0.05));
  border-color: var(--border-color, rgba(255,255,255,0.12));
}

.category-option.selected {
  background: color-mix(in srgb, var(--accent-primary, #00ff88) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent-primary, #00ff88) 40%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent-primary, #00ff88) 5%, transparent);
}

.category-icon { font-size: 22px; display: flex; align-items: center; justify-content: center; color: var(--text-muted, rgba(255,255,255,0.7)); }
.category-label { font-size: 11px; font-weight: 500; color: var(--text-muted, rgba(255,255,255,0.7)); }
.category-option.selected .category-icon { color: var(--accent-primary, #00ff88); }
.category-option.selected .category-label { color: var(--accent-primary, #00ff88); }

/* ===== Tags ===== */
.tags-input-wrap {
  display: flex;
  gap: 6px;
}

.tags-input-wrap input { flex: 1; }

.tag-add-btn {
  background: color-mix(in srgb, var(--accent-primary, #00ff88) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-primary, #00ff88) 30%, transparent);
  color: var(--accent-primary, #00ff88);
  width: 36px;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.tag-add-btn:hover { background: color-mix(in srgb, var(--accent-primary, #00ff88) 25%, transparent); }

.tags-display {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.tag-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--accent-primary, #00ff88) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-primary, #00ff88) 20%, transparent);
  border-radius: 20px;
  font-size: 12px;
  color: var(--accent-primary, #00ff88);
  animation: chipPop 0.2s ease-out;
}

.tag-chip button {
  background: none;
  border: none;
  color: var(--text-muted, rgba(255,255,255,0.4));
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}

.tag-chip button:hover { color: var(--danger, #ff6b6b); }

/* ===== Member Limit Slider ===== */
.member-limit-section {
  margin-bottom: 16px;
}

.member-limit-section label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, rgba(255,255,255,0.6));
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.member-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.1);
  outline: none;
}

.member-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary, #00ff88), var(--accent-secondary, #00d4ff));
  cursor: pointer;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent-primary, #00ff88) 30%, transparent);
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted, rgba(255,255,255,0.3));
  margin-top: 4px;
}

/* ===== Members ===== */
.selected-members {
  margin-bottom: 14px;
}

.selected-members > label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, rgba(255,255,255,0.6));
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.selected-members .badge {
  background: color-mix(in srgb, var(--accent-primary, #00ff88) 15%, transparent);
  color: var(--accent-primary, #00ff88);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: none;
  letter-spacing: 0;
}

.members-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 40px;
  padding: 8px;
  background: var(--bg-tertiary, rgba(0,0,0,0.15));
  border-radius: 10px;
  border: 1px dashed var(--border-color, rgba(255,255,255,0.06));
}

.member-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-quaternary, rgba(255,255,255,0.06));
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 20px;
  padding: 3px 8px 3px 3px;
  font-size: 13px;
  cursor: pointer;
  animation: chipPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: all 0.15s;
}

.member-chip:hover { background: var(--bg-secondary, rgba(255,255,255,0.1)); }

.member-chip .avatar { width: 24px; height: 24px; border-radius: 50%; }

.member-chip-name { color: var(--text-primary); }

.member-chip-role {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-secondary, #00d4ff);
  background: color-mix(in srgb, var(--accent-secondary, #00d4ff) 12%, transparent);
  padding: 1px 6px;
  border-radius: 6px;
}

.member-remove {
  background: none;
  border: none;
  color: var(--text-muted, rgba(255,255,255,0.3));
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  transition: all 0.15s;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-remove:hover { background: rgba(255,68,68,0.2); color: var(--danger, #ff4444); }

.no-members-hint {
  color: var(--text-muted, rgba(255,255,255,0.3));
  font-size: 13px;
  font-style: italic;
  padding: 8px;
  width: 100%;
  text-align: center;
}

/* ===== Member Search ===== */
.member-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: rgba(255,255,255,0.3);
  pointer-events: none;
}

.member-search-input {
  width: 100%;
  padding: 11px 14px 11px 38px !important;
}

.search-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.3);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 6px;
  transition: color 0.15s;
}

.search-clear:hover { color: var(--text-on-accent); }

/* ===== Search Results ===== */
.search-results-dropdown {
  background: var(--bg-tertiary, rgba(0,0,0,0.4));
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 10px;
  margin-top: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.12s;
}

.search-result-item:hover { background: rgba(255,255,255,0.05); }
.search-result-item:active { background: rgba(255,255,255,0.08); }

.search-result-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.search-result-avatar-wrap .avatar { width: 34px; height: 34px; border-radius: 50%; }

.online-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--bg-primary, #1a1a2e);
  background: #444;
}

.online-dot.online { background: #3ba55d; box-shadow: 0 0 6px rgba(59, 165, 93, 0.5); }

.search-result-item .user-info { flex: 1; min-width: 0; }

.search-result-item .display-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.search-result-item .username {
  display: block;
  font-size: 12px;
  color: var(--text-muted, rgba(255,255,255,0.4));
}

.search-result-item .add-btn {
  background: linear-gradient(135deg, var(--accent-primary, #00ff88), var(--accent-secondary, #00d4ff));
  color: #000;
  border: none;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.search-result-item .add-btn:hover { transform: scale(1.15); box-shadow: 0 0 16px color-mix(in srgb, var(--accent-primary, #00ff88) 30%, transparent); }

.search-no-results {
  padding: 12px;
  color: var(--text-muted, rgba(255,255,255,0.3));
  font-size: 13px;
  text-align: center;
}

/* ===== Review Card ===== */
.review-card {
  background: var(--bg-tertiary, rgba(0,0,0,0.2));
  border: 1px solid var(--border-color, rgba(255,255,255,0.06));
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  position: relative;
}

.review-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.4), rgba(0,0,0,0.15));
}

.review-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-tertiary, rgba(0,0,0,0.3));
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

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

.review-header-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review-name { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.review-meta { font-size: 12px; color: var(--text-muted, rgba(255,255,255,0.6)); }

.review-description {
  padding: 14px 20px;
  font-size: 13px;
  color: var(--text-muted, rgba(255,255,255,0.7));
  border-top: 1px solid var(--border-color, rgba(255,255,255,0.04));
  line-height: 1.5;
}

.review-tags {
  padding: 0 20px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.review-tag {
  font-size: 11px;
  color: var(--accent-primary, #00ff88);
  background: color-mix(in srgb, var(--accent-primary, #00ff88) 8%, transparent);
  padding: 3px 10px;
  border-radius: 12px;
}

.review-members {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border-color, rgba(255,255,255,0.04));
}

.review-section-title {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, rgba(255,255,255,0.4));
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.review-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 14px;
  color: var(--text-primary);
}

.review-member-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.review-member-row .avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }

.review-role-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: auto;
  background: color-mix(in srgb, var(--accent-primary, #00ff88) 15%, transparent);
  color: var(--accent-primary, #00ff88);
}

/* ===== Toggle ===== */
.toggle-group { margin-bottom: 16px; }

.toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg-tertiary, rgba(0,0,0,0.2));
  border: 1px solid var(--border-color, rgba(255,255,255,0.06));
  border-radius: 10px;
}

.toggle-info { display: flex; flex-direction: column; gap: 2px; }
.toggle-info span { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.toggle-info small { font-size: 12px; color: var(--text-muted, rgba(255,255,255,0.4)); }

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}

.toggle-switch input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 24px;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  bottom: 2px;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(135deg, var(--accent-primary, #00ff88), var(--accent-secondary, #00d4ff));
  border-color: transparent;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* ===== Modal Actions ===== */
.create-group-step .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color, rgba(255,255,255,0.04));
}

.create-group-step .btn {
  padding: 10px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.create-group-step .btn-primary {
  background: linear-gradient(135deg, var(--accent-primary, #00ff88), var(--accent-secondary, #00d4ff));
  color: #000;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-primary, #00ff88) 20%, transparent);
}

.create-group-step .btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--accent-primary, #00ff88) 30%, transparent);
}

.create-group-step .btn-primary:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.create-group-step .btn-secondary {
  background: var(--bg-quaternary, rgba(255,255,255,0.06));
  color: var(--text-muted, rgba(255,255,255,0.7));
}

.create-group-step .btn-secondary:hover {
  background: var(--bg-tertiary, rgba(255,255,255,0.1));
  color: var(--text-primary);
}

.create-btn { font-size: 15px !important; padding: 12px 28px !important; }

.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

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

/* ===== Error ===== */
.create-group-error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--danger, #ff4444) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger, #ff4444) 20%, transparent);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 24px 12px;
  font-size: 13px;
  color: var(--danger, #ff6b6b);
  animation: shake 0.3s ease-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ===== Animations ===== */
@keyframes chipPop {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.store-nav-item .nav-icon {
  color: var(--accent-primary);
}

.store-nav-item:hover .nav-icon {
  filter: drop-shadow(0 0 4px var(--accent-glow));
}

.store-nav-item.active .nav-icon {
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
.admin-page {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  background: var(--bg-primary);
  min-height: 0;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Admin table scrolling */
.admin-users .admin-table tbody,
.admin-invites .admin-table tbody,
.admin-audit .admin-table tbody,
.admin-ipfilters .admin-table tbody {
  display: block;
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) var(--bg-tertiary);
}

.admin-users .admin-table tbody::-webkit-scrollbar,
.admin-invites .admin-table tbody::-webkit-scrollbar,
.admin-audit .admin-table tbody::-webkit-scrollbar,
.admin-ipfilters .admin-table tbody::-webkit-scrollbar {
  width: 8px;
}

.admin-users .admin-table tbody::-webkit-scrollbar-track,
.admin-invites .admin-table tbody::-webkit-scrollbar-track,
.admin-audit .admin-table tbody::-webkit-scrollbar-track,
.admin-ipfilters .admin-table tbody::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

.admin-users .admin-table tbody::-webkit-scrollbar-thumb,
.admin-invites .admin-table tbody::-webkit-scrollbar-thumb,
.admin-audit .admin-table tbody::-webkit-scrollbar-thumb,
.admin-ipfilters .admin-table tbody::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 4px;
}

.admin-users .admin-table tbody::-webkit-scrollbar-thumb:hover,
.admin-invites .admin-table tbody::-webkit-scrollbar-thumb:hover,
.admin-audit .admin-table tbody::-webkit-scrollbar-thumb:hover,
.admin-ipfilters .admin-table tbody::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

.admin-users .admin-table tbody::-webkit-scrollbar-thumb,
.admin-invites .admin-table tbody::-webkit-scrollbar-thumb,
.admin-audit .admin-table tbody::-webkit-scrollbar-thumb,
.admin-ipfilters .admin-table tbody::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 3px;
}

.admin-users .admin-table thead,
.admin-invites .admin-table thead,
.admin-audit .admin-table thead,
.admin-ipfilters .admin-table thead {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.admin-users .admin-table tbody tr,
.admin-invites .admin-table tbody tr,
.admin-audit .admin-table tbody tr,
.admin-ipfilters .admin-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.admin-header-content h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.admin-header-content p {
  font-size: 14px;
  color: var(--text-muted);
}

.admin-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  background: var(--bg-secondary);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.admin-tab {
  padding: 10px 20px;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.admin-tab:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.admin-tab.active {
  background: var(--accent-color);
  color: var(--text-on-accent);
}

.admin-content {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.admin-overview {
  padding: 8px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.stat-icon {
  font-size: 32px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: 12px;
}

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

.stat-info .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent-color);
  line-height: 1.2;
}

.stat-info .stat-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.admin-actions-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
}

.admin-actions-section h3 {
  font-size: 16px;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
}

.btn-primary {
  background: var(--accent-color);
  color: var(--text-on-accent);
}

.btn-primary:hover {
  filter: brightness(1.1);
}

.btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background: var(--bg-hover);
}

.btn-outline {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.btn-outline:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn-small {
  padding: 6px 12px;
  font-size: 12px;
  background: var(--accent-color);
  color: var(--text-on-accent);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.btn-danger {
  background: var(--danger);
  color: var(--text-on-accent);
}

.admin-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.filters-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 12px;
}

.search-input-wrapper input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  width: 200px;
}

.search-input-wrapper input::placeholder {
  color: var(--text-muted);
}

.filters-row select {
  padding: 8px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.assign-all-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #00D9FF, #0066FF);
  border: none;
  color: var(--text-on-accent);
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.assign-all-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 217, 255, 0.3);
}

.results-count {
  font-size: 13px;
  color: var(--text-muted);
}

/* Admin tables with scrolling tbody */
.admin-table-wrapper {
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  margin-bottom: 16px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  display: flex;
  flex-direction: column;
  max-height: 600px;
}

.admin-table thead {
  flex-shrink: 0;
  display: table;
  width: 100%;
  table-layout: fixed;
}

.admin-table tbody {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: block;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-color) var(--bg-tertiary);
  max-height: 500px;
}

.admin-table tbody::-webkit-scrollbar {
  width: 8px;
}

.admin-table tbody::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

.admin-table tbody::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 4px;
}

.admin-table tbody::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

.admin-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.admin-table thead tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.admin-table th,
.admin-table td {
  padding: 12px 16px;
  text-align: left;
}

.admin-table th {
  background: var(--bg-tertiary);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.admin-table td {
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
}

.admin-table tbody tr {
  transition: background 0.15s ease;
}

.admin-table tbody tr:hover {
  background: var(--bg-hover);
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.admin-table tr.inactive-row {
  opacity: 0.6;
}

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

.user-cell .username {
  font-weight: 600;
  color: var(--text-primary);
}

.user-cell .email {
  font-size: 12px;
  color: var(--text-muted);
}

.tier-select,
.status-select {
  padding: 6px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}

.tier-select.tier-owner,
.tier-select.tier-admin {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.tier-select.tier-moderator {
  color: #9b59b6;
  border-color: #9b59b6;
}

.tier-select.tier-verified {
  color: #3498db;
  border-color: #3498db;
}

.trust-high {
  color: var(--success);
  font-weight: 600;
}

.risk-high {
  color: var(--danger);
  font-weight: 600;
}

.status-select.status-banned,
.status-select.status-suspended {
  color: var(--danger);
  border-color: var(--danger);
}

.status-select.status-active {
  color: var(--success);
  border-color: var(--success);
}

.action-buttons-cell {
  display: flex;
  gap: 8px;
}

.action-btn {
  padding: 6px 12px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.action-btn.primary {
  background: var(--accent-color);
  color: var(--text-on-accent);
  border-color: var(--accent-color);
}

.action-btn.primary:hover {
  filter: brightness(1.1);
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
}

.pagination button {
  padding: 8px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pagination button:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination span {
  font-size: 14px;
  color: var(--text-muted);
}

.admin-unauthorized {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  text-align: center;
  gap: 16px;
}

.admin-unauthorized .unauthorized-icon {
  color: var(--danger);
  opacity: 0.8;
}

.admin-unauthorized h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 24px;
}

.admin-unauthorized p {
  color: var(--text-muted);
  margin: 0;
}

.admin-unauthorized .unauthorized-info {
  background: var(--bg-secondary);
  padding: 16px 24px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.admin-unauthorized .unauthorized-info p {
  margin: 0;
  font-size: 14px;
}

.admin-unauthorized a {
  margin-top: 8px;
}

.admin-section-restricted {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-muted);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

.modal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  max-width: 700px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
  font-size: 18px;
  color: var(--text-primary);
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.modal-body {
  padding: 24px;
}

.user-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-item label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-item .detail-value {
  font-size: 14px;
  color: var(--text-primary);
}

.detail-item code {
  font-size: 12px;
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--accent-color);
}

.user-badges-section {
  margin-bottom: 24px;
}

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

.user-badges-section h3 {
  font-size: 16px;
  color: var(--text-primary);
}

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

.no-badges {
  color: var(--text-muted);
  font-size: 14px;
  padding: 16px;
  text-align: center;
  background: var(--bg-tertiary);
  border-radius: 8px;
}

.user-badge-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.user-badge-item.tier-legendary {
  border-color: #FFD700;
}

.user-badge-item.tier-epic {
  border-color: #9b59b6;
}

.user-badge-item.tier-rare {
  border-color: #3498db;
}

.badge-icon-small {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.badge-icon-small svg {
  width: 24px;
  height: 24px;
}

.badge-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.badge-details .badge-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.badge-details .badge-tier-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.revoke-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
}

.revoke-btn:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--text-on-accent);
}

.user-messages-section h3 {
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.no-messages {
  color: var(--text-muted);
  font-size: 14px;
  padding: 16px;
  text-align: center;
  background: var(--bg-tertiary);
  border-radius: 8px;
}

.user-messages-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.user-message-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  font-size: 13px;
}

.user-message-item .msg-channel {
  color: var(--accent-color);
  font-weight: 600;
  flex-shrink: 0;
}

.user-message-item .msg-content {
  flex: 1;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-message-item .msg-date {
  color: var(--text-muted);
  font-size: 11px;
  flex-shrink: 0;
}

.admin-badges {
  padding: 8px 0;
}

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

.badge-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  gap: 16px;
  transition: all 0.2s ease;
}

.badge-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.badge-card.tier-legendary {
  border-color: #FFD700;
  background: linear-gradient(135deg, var(--bg-secondary), rgba(255, 215, 0, 0.1));
}

.badge-card.tier-epic {
  border-color: #9b59b6;
  background: linear-gradient(135deg, var(--bg-secondary), rgba(155, 89, 182, 0.1));
}

.badge-card.tier-rare {
  border-color: #3498db;
  background: linear-gradient(135deg, var(--bg-secondary), rgba(52, 152, 219, 0.1));
}

.badge-card.tier-uncommon {
  border-color: #2ecc71;
}

.badge-card.tier-bronze {
  border-color: #cd7f32;
}

.badge-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.badge-icon svg {
  width: 40px;
  height: 40px;
}

.badge-info h4 {
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.badge-info p {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
  line-height: 1.4;
}

.badge-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.badge-meta span {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  color: var(--text-muted);
}

.badge-meta .badge-tier {
  text-transform: uppercase;
  font-weight: 600;
}

.badge-meta .badge-tier.tier-legendary { color: #FFD700; }
.badge-meta .badge-tier.tier-epic { color: #9b59b6; }
.badge-meta .badge-tier.tier-rare { color: #3498db; }
.badge-meta .badge-tier.tier-uncommon { color: #2ecc71; }
.badge-meta .badge-tier.tier-bronze { color: #cd7f32; }

.badge-meta .badge-weight {
  color: var(--success);
}

.admin-audit .time-cell {
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-muted);
}

.admin-audit .action-code {
  font-size: 11px;
  background: var(--bg-tertiary);
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--accent-color);
}

.admin-audit .details-cell {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-audit .ip-cell {
  font-family: monospace;
  font-size: 11px;
  color: var(--text-muted);
}

.admin-audit .system {
  color: var(--text-muted);
  font-style: italic;
}

/* Admin audit table scrolling */
.admin-audit .admin-table {
  max-height: 600px;
}

.admin-audit .admin-table tbody {
  max-height: 500px;
}

/* Admin invites scrolling */
.admin-invites .admin-table {
  max-height: 500px;
}

.admin-invites .admin-table tbody {
  max-height: 400px;
}

/* Admin users scrolling */
.admin-users .admin-table {
  max-height: 600px;
}

.admin-users .admin-table tbody {
  max-height: 500px;
}

/* Admin badges grid scrolling */
.admin-badges .badges-grid {
  max-height: calc(100vh - 300px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-color) var(--bg-secondary);
  padding-right: 8px;
}

.admin-badges .badges-grid::-webkit-scrollbar {
  width: 6px;
}

.admin-badges .badges-grid::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

.admin-badges .badges-grid::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 3px;
}

.admin-badges .badges-grid::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

.invite-generator {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.invite-generator h3 {
  font-size: 16px;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.invite-actions-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.invite-maintenance {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
}

.invite-maintenance h3 {
  font-size: 16px;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.maintenance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.maintenance-actions .btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

.generator-controls {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.generator-controls .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.generator-controls .form-group label {
  font-size: 13px;
  color: var(--text-muted);
}

.generator-controls .form-group input {
  width: 100px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 8px;
  font-size: 14px;
}

.invite-code {
  font-size: 12px;
  background: var(--bg-tertiary);
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--accent-color);
}

.status-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.status-badge .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-badge.status-active {
  background: rgba(46, 204, 113, 0.2);
  color: #2ecc71;
}

.status-badge.status-revoked {
  background: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
}

.status-badge.status-spent {
  background: rgba(155, 89, 182, 0.2);
  color: #9b59b6;
}

.status-badge.status-expired {
  background: rgba(241, 196, 15, 0.2);
  color: #f1c40f;
}

.invite-row-spent td,
.invite-row-expired td,
.invite-row-revoked td {
  opacity: 0.6;
}

.action-buttons {
  display: flex;
  gap: 6px;
}

.tier-badge {
  padding: 3px 8px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  font-size: 11px;
  text-transform: capitalize;
}

.archived-invites-modal .modal-body {
  max-height: 500px;
  overflow-y: auto;
}

.archive-info {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: 8px;
}

.empty-cell {
  text-align: center;
  color: var(--text-muted);
  padding: 24px !important;
}

.admin-table tr:hover td {
  background: var(--bg-hover);
}

.badge-select-modal .modal-body {
  max-height: 400px;
  overflow-y: auto;
}

.badge-select-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.badge-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.badge-select-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.badge-select-item:hover {
  background: var(--bg-hover);
  border-color: var(--accent-color);
}

.badge-select-item.selected {
  background: var(--accent-color);
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 255, 136, 0.05));
  border-color: var(--accent-primary);
}

.badge-select-item.has-badge {
  opacity: 0.6;
  cursor: not-allowed;
}

.badge-select-item.has-badge:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
}

.badge-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.badge-select-item.selected .badge-checkbox {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

.badge-checkbox span {
  color: var(--bg-primary);
  font-size: 12px;
  font-weight: bold;
}

.badge-select-modal .modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
}

.badge-select-modal .modal-footer .btn {
  min-width: 150px;
}

.badge-select-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.badge-select-info .badge-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.badge-select-info .badge-tier-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.has-badge-label {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 2px 6px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .admin-page {
    padding: 16px;
  }

  .admin-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .admin-tabs {
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .user-detail-grid {
    grid-template-columns: 1fr;
  }

  .badges-grid {
    grid-template-columns: 1fr;
  }

  .badge-select-grid {
    grid-template-columns: 1fr;
  }

  .filters-row {
    width: 100%;
  }

  .filters-row select,
  .filters-row .search-input-wrapper {
    flex: 1;
  }

  .admin-table {
    display: block;
    overflow-x: auto;
  }
}

.admin-filters {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.admin-filters .search-box {
  flex: 1;
  min-width: 200px;
}

.admin-filters .search-box input {
  width: 100%;
  padding: 10px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
}

.admin-filters select {
  padding: 10px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  min-width: 150px;
}

.admin-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius);
}

.admin-pagination button {
  padding: 8px 16px;
  background: var(--accent-primary);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
}

.admin-pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-pagination button:hover:not(:disabled) {
  filter: brightness(1.1);
}

.admin-pagination span {
  color: var(--text-muted);
  font-size: 14px;
}

.user-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-cell .user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.user-cell .user-info {
  display: flex;
  flex-direction: column;
}

.user-cell .username {
  font-weight: 600;
  color: var(--text-primary);
}

.user-cell .display-name {
  font-size: 12px;
  color: var(--text-muted);
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.status-badge.active {
  background: rgba(0, 255, 136, 0.2);
  color: #00ff88;
}

.status-badge.suspended {
  background: rgba(255, 170, 0, 0.2);
  color: #ffaa00;
}

.status-badge.banned {
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
}

.trust-score {
  font-weight: 600;
  color: var(--accent-primary);
}

.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-suspend {
  background: var(--warning);
  color: var(--text-on-accent);
}

.btn-warning {
  background: #ffaa00;
  color: var(--text-on-accent);
}

.warning-text {
  padding: 12px;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  color: var(--danger);
  font-size: 13px;
  margin-top: 12px;
}

.action-modal .form-group {
  margin-bottom: 16px;
}

.action-modal .form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-primary);
}

.action-modal .form-group select,
.action-modal .form-group textarea {
  width: 100%;
  padding: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
}

.action-modal .form-group textarea {
  resize: vertical;
  min-height: 100px;
}

/* IP Filters */
.admin-ipfilters {
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ipfilter-section h3 {
  font-size: 16px;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.admin-ipfilters .admin-table {
  max-height: 500px;
}

.admin-ipfilters .admin-table tbody {
  max-height: 400px;
}

.user-ip-usernames {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-ipfilters .admin-table {
  max-height: 500px;
}

.admin-ipfilters .admin-table tbody {
  max-height: 400px;
}

.ipfilter-actions-bar {
  margin-bottom: 24px;
}

.ipfilter-add-form {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
}

.ipfilter-add-form h3 {
  font-size: 16px;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.add-form-controls {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.add-form-controls .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.add-form-controls .form-group label {
  font-size: 13px;
  color: var(--text-muted);
}

.add-form-controls .form-group input,
.add-form-controls .form-group select {
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 8px;
  font-size: 14px;
}

.add-form-controls .form-group input {
  min-width: 180px;
}

.add-form-controls .form-group select {
  min-width: 140px;
  cursor: pointer;
}

.ipfilter-row-blacklist td {
  border-left: 3px solid var(--danger);
}

.ipfilter-row-whitelist td {
  border-left: 3px solid var(--success);
}

.status-badge.status-danger {
  background: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
}

.status-badge.status-success {
  background: rgba(46, 204, 113, 0.2);
  color: #2ecc71;
}

.status-badge.status-inactive {
  background: rgba(149, 165, 166, 0.2);
  color: var(--text-muted);
}

.action-btn.warning {
  background: rgba(241, 196, 15, 0.2);
  color: #f1c40f;
  border-color: rgba(241, 196, 15, 0.3);
}

.action-btn.warning:hover {
  background: rgba(241, 196, 15, 0.3);
}

.action-btn.success {
  background: rgba(46, 204, 113, 0.2);
  color: #2ecc71;
  border-color: rgba(46, 204, 113, 0.3);
}

.action-btn.success:hover {
  background: rgba(46, 204, 113, 0.3);
}

.action-btn.danger {
  background: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
  border-color: rgba(231, 76, 60, 0.3);
}

.action-btn.danger:hover {
  background: rgba(231, 76, 60, 0.3);
}

.action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.server-admin {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary);
}

.loading-state,
.unauthorized-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
  color: var(--text-secondary);
}

.unauthorized-state svg {
  color: var(--danger);
}

.unauthorized-state h2 {
  margin: 0;
  color: var(--text-primary);
}

.server-admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.server-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.server-icon,
.server-icon-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  background: var(--accent-primary);
  color: var(--bg-primary);
}

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

.server-info h1 {
  margin: 0;
  font-size: 20px;
  color: var(--text-primary);
}

.member-count {
  font-size: 13px;
  color: var(--text-muted);
}

.server-admin-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 24px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.server-admin-tabs .tab {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.server-admin-tabs .tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.server-admin-tabs .tab.active {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

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

.settings-section,
.members-section,
.roles-section {
  max-width: 800px;
}

.settings-section h2,
.section-header h2 {
  margin: 0 0 20px;
  font-size: 18px;
  color: var(--text-primary);
}

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

.search-input {
  width: 100%;
  max-width: 300px;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
}

.search-input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-group input[type="text"],
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.form-group input:disabled,
.form-group textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-label input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-primary);
}

.form-actions {
  margin-top: 24px;
}

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

.member-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.member-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-avatar span {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg-secondary);
}

.status-dot.online { background: #00ff88; }
.status-dot.idle { background: #ffa502; }
.status-dot.dnd { background: #ff4757; }
.status-dot.offline { background: #747574; }

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

.member-name {
  display: block;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-username {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: normal;
}

.member-role {
  font-size: 11px;
  padding: 2px 6px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  color: var(--text-secondary);
  text-transform: capitalize;
}

.member-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.member-actions select {
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 12px;
}

.btn {
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-sm {
  padding: 6px 10px;
  font-size: 12px;
}

.btn-primary {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.btn-primary:hover {
  filter: brightness(1.1);
}

.btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background: var(--bg-hover);
}

.btn-warning {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

.btn-warning:hover {
  background: rgba(255, 193, 7, 0.3);
}

.btn-danger {
  background: rgba(255, 71, 71, 0.2);
  color: #ff4757;
}

.btn-danger:hover {
  background: rgba(255, 71, 71, 0.3);
}

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

.role-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.role-color {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
}

.role-info {
  flex: 1;
}

.role-name {
  display: block;
  font-weight: 500;
  color: var(--text-primary);
}

.role-count {
  font-size: 12px;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .member-item {
    flex-wrap: wrap;
  }
  
  .member-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 8px;
  }
}
.notification-settings {
  padding: 24px;
  max-width: 800px;
  margin: 0 auto;
  height: 100%;
  overflow-y: auto;
}

.notification-settings h2 {
  color: var(--text-primary, #e0e0e0);
  margin-bottom: 24px;
  font-size: 20px;
}

.notification-settings h3 {
  color: var(--text-primary, #e0e0e0);
  margin-bottom: 12px;
  font-size: 16px;
}

.notification-category {
  background: var(--bg-secondary, #12121a);
  border-radius: var(--radius, 12px);
  padding: 16px;
  margin-bottom: 16px;
}

.notification-category-title {
  color: var(--text-primary, #e0e0e0);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.notification-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color, #2a2a3a);
}

.notification-row:last-child {
  border-bottom: none;
}

.notification-row-label {
  color: var(--text-secondary, #888899);
  font-size: 14px;
}

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

.notification-toggle input[type="checkbox"] {
  accent-color: var(--accent-primary, #00ff88);
  width: 16px;
  height: 16px;
}

.notification-save-btn {
  background: var(--accent-primary, #00ff88);
  color: var(--bg-primary, #0a0a0f);
  border: none;
  border-radius: var(--radius-sm, 8px);
  padding: 10px 24px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 16px;
  transition: var(--transition, all 0.2s ease);
}

.notification-save-btn:hover {
  opacity: 0.9;
}

.notification-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.store-home {
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow-y: auto;
  
}

.store-credit-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(18, 18, 26, 0.85);
  border-bottom: 1px solid var(--border-color);
  padding: 12px 24px;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

.store-credit-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.store-credit-bar-balance {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-primary);
  font-size: 0.9rem;
  font-weight: 700;
}

.store-credit-bar-balance svg {
  color: var(--accent-primary);
}

.store-credit-bar-buy {
  background: var(--accent-primary);
  color: var(--bg-primary);
  border: none;
  border-radius: var(--radius-xl);
  padding: 8px 20px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 0.3px;
}

.store-credit-bar-buy:hover {
  background: var(--accent-secondary);
  transform: translateY(-1px);
  box-shadow: 0 4px 24px var(--accent-glow);
}

.store-hero {
  position: relative;
  padding: 80px 24px 56px;
  overflow: hidden;
  background: linear-gradient(
    160deg,
    var(--bg-secondary) 0%,
    var(--bg-primary) 40%,
    rgba(0, 255, 136, 0.04) 70%,
    var(--bg-primary) 100%
  );
}

.store-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
  pointer-events: none;
}

.store-hero::after {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 65%);
  opacity: 0.35;
  pointer-events: none;
  animation: hero-glow 4s ease-in-out infinite alternate;
}

@keyframes hero-glow {
  0% {
    opacity: 0.25;
    transform: translateX(-50%) scale(1);
  }
  100% {
    opacity: 0.45;
    transform: translateX(-50%) scale(1.1);
  }
}

.store-hero-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.store-hero-title {
  font-size: 3rem;
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 0%, var(--accent-primary) 50%, #00cec9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.store-hero-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin: 0 0 32px;
  line-height: 1.6;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.store-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(18, 18, 26, 0.6);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 14px 22px;
  transition: all 0.3s ease;
  max-width: 520px;
  margin: 0 auto;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.3);
}

.store-search:focus-within {
  border-color: var(--accent-primary);
  box-shadow:
    0 0 0 3px var(--accent-glow),
    0 4px 32px rgba(0, 0, 0, 0.3);
  background: rgba(18, 18, 26, 0.8);
}

.store-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.store-search input::placeholder {
  color: var(--text-muted);
}

.store-search svg {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.store-search:focus-within svg {
  color: var(--accent-primary);
}

.store-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.store-search-clear:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.store-categories {
  display: flex;
  gap: 8px;
  padding: 16px 24px;
  overflow-x: auto;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.store-categories::-webkit-scrollbar {
  display: none;
}

.store-category-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.store-category-pill:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.1);
}

.store-category-pill.active {
  background: rgba(0, 255, 136, 0.12);
  border-color: rgba(0, 255, 136, 0.35);
  color: var(--accent-primary);
  box-shadow: 0 0 16px rgba(0, 255, 136, 0.15);
}

.store-category-pill.active svg {
  color: var(--accent-primary);
}

.store-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
}

.store-section {
  margin-bottom: 48px;
}

.store-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.store-section-header h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

.store-section-header h2 svg {
  color: var(--accent-primary);
}

.store-section-link {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--accent-primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.store-section-link:hover {
  text-decoration: underline;
  gap: 6px;
}

.store-role-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  border-radius: var(--radius-lg);
  margin-bottom: 36px;
  transition: all 0.3s ease;
}

.store-role-cta.status-none {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.08) 0%, rgba(0, 255, 136, 0.02) 100%);
  border: 1px solid rgba(0, 255, 136, 0.2);
}

.store-role-cta.status-pending {
  background: linear-gradient(135deg, rgba(255, 165, 2, 0.08) 0%, rgba(255, 165, 2, 0.02) 100%);
  border: 1px solid rgba(255, 165, 2, 0.2);
}

.store-role-cta.status-approved {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 255, 136, 0.03) 100%);
  border: 1px solid rgba(0, 255, 136, 0.3);
}

.store-role-cta.status-rejected {
  background: linear-gradient(135deg, rgba(255, 71, 87, 0.08) 0%, rgba(255, 71, 87, 0.02) 100%);
  border: 1px solid rgba(255, 71, 87, 0.2);
}

.store-role-cta-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.status-none .store-role-cta-icon {
  background: rgba(0, 255, 136, 0.15);
  color: var(--accent-primary);
}

.status-pending .store-role-cta-icon {
  background: rgba(255, 165, 2, 0.15);
  color: var(--warning);
}

.status-approved .store-role-cta-icon {
  background: rgba(0, 255, 136, 0.2);
  color: var(--accent-primary);
}

.status-rejected .store-role-cta-icon {
  background: rgba(255, 71, 87, 0.15);
  color: var(--danger);
}

.store-role-cta-text {
  flex: 1;
  min-width: 0;
}

.store-role-cta-text h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.store-role-cta-text p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.store-role-cta-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-primary);
  color: var(--bg-primary);
  border: none;
  border-radius: var(--radius);
  padding: 11px 22px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.store-role-cta-btn:hover {
  background: var(--accent-secondary);
  transform: translateY(-1px);
  box-shadow: 0 4px 24px var(--accent-glow);
}

.store-shops-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.store-shops-row::-webkit-scrollbar {
  display: none;
}

.shop-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  transition: all 0.25s ease;
  min-width: 280px;
  flex-shrink: 0;
}

.shop-card:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px var(--accent-primary),
    0 8px 32px rgba(0, 255, 136, 0.08);
}

.shop-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.shop-card-info h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-card-info p {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-card-count {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.shop-card-count svg {
  color: var(--text-muted);
}

.shop-card-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.shop-card:hover .shop-card-arrow {
  color: var(--accent-primary);
  transform: translateX(3px);
}

.store-items-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.item-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s ease;
}

.item-card:hover {
  background: var(--bg-hover);
  border-color: rgba(0, 255, 136, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

.item-card-thumbnail {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-tertiary);
  overflow: hidden;
}

.item-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.item-card:hover .item-card-thumbnail img {
  transform: scale(1.06);
}

.item-card-thumbnail::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(10, 10, 15, 0.6), transparent);
  pointer-events: none;
}

.item-card-thumbnail-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-muted);
}

.item-type-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.item-type-badge.digital {
  background: rgba(0, 255, 136, 0.2);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.15);
}

.item-type-badge.physical {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.15);
}

.item-type-badge.server-perk {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.15);
}

.item-type-badge.service {
  background: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.15);
}

.stock-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  z-index: 2;
}

.stock-badge.in {
  background: rgba(0, 255, 136, 0.25);
  color: #00ff88;
}

.stock-badge.low {
  background: rgba(255, 165, 2, 0.25);
  color: #ffa502;
}

.stock-badge.out {
  background: rgba(255, 71, 87, 0.25);
  color: #ff4757;
}

.item-card-info {
  padding: 14px;
}

.item-card-name {
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0 0 8px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.65em;
}

.item-card-seller {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.item-card-seller span {
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.item-card-price {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent-primary);
}

.item-card-price svg {
  color: var(--accent-primary);
}

.item-card-price-usd {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 2px;
}

.rating-mini {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  color: var(--warning);
  font-weight: 500;
}

.rating-mini svg {
  color: var(--warning);
}

.credit-promo-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.credit-promo-row::-webkit-scrollbar {
  display: none;
}

.credit-promo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px 32px 24px;
  min-width: 170px;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.credit-promo-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent-primary), #00cec9);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.credit-promo-card:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 8px 32px rgba(0, 255, 136, 0.15);
}

.credit-promo-card:hover::before {
  opacity: 1;
}

.credit-promo-card:hover .credit-promo-inner {
  background: var(--bg-secondary);
}

.credit-promo-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--bg-secondary);
  margin: -1px;
  padding: 0;
  border-radius: var(--radius-lg);
}

.credit-promo-bonus {
  position: absolute;
  top: -10px;
  right: 8px;
  background: linear-gradient(135deg, var(--accent-primary), #00cec9);
  color: var(--bg-primary);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  z-index: 2;
  letter-spacing: 0.3px;
}

.credit-promo-amount {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--accent-primary);
  line-height: 1.1;
}

.credit-promo-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.credit-promo-price {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 6px;
}

.credit-promo-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-primary);
  color: var(--bg-primary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: var(--radius-sm);
  margin-top: 8px;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;
}

.credit-promo-card:hover .credit-promo-buy {
  background: var(--accent-secondary);
  box-shadow: 0 2px 12px var(--accent-glow);
}

.store-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 64px 24px;
  color: var(--text-muted);
  text-align: center;
}

.store-empty svg {
  opacity: 0.4;
}

.store-empty p {
  font-size: 0.9rem;
  margin: 0;
  color: var(--text-secondary);
  max-width: 300px;
}

.store-empty .store-empty-cta {
  background: var(--accent-primary);
  color: var(--bg-primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 24px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 4px;
}

.store-empty .store-empty-cta:hover {
  background: var(--accent-secondary);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--accent-glow);
}

.shop-card.skeleton,
.item-card.skeleton {
  cursor: default;
  pointer-events: none;
}

.shop-card.skeleton *,
.item-card.skeleton * {
  color: transparent !important;
}

.skeleton-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  flex-shrink: 0;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-line {
  height: 10px;
  border-radius: 6px;
  background: var(--bg-tertiary);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-line.w40 {
  width: 40px;
}

.skeleton-line.w50 {
  width: 50px;
}

.skeleton-line.w60 {
  width: 60px;
}

.skeleton-line.w70 {
  width: 70px;
}

.skeleton-line.w80 {
  width: 80px;
}

.skeleton-rect {
  aspect-ratio: 16 / 9;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.7;
  }
}

@media (max-width: 1024px) {
  .store-items-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .store-hero {
    padding: 48px 16px 40px;
  }

  .store-hero::after {
    width: 400px;
    height: 280px;
  }

  .store-hero-title {
    font-size: 2rem;
  }

  .store-hero-subtitle {
    font-size: 0.9rem;
    margin-bottom: 24px;
  }

  .store-search {
    padding: 12px 16px;
  }

  .store-content {
    padding: 20px 16px;
  }

  .store-section {
    margin-bottom: 40px;
  }

  .store-items-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .item-card-info {
    padding: 10px;
  }

  .store-role-cta {
    flex-direction: column;
    text-align: center;
    padding: 24px;
    gap: 16px;
  }

  .store-role-cta-icon {
    width: 44px;
    height: 44px;
  }

  .store-role-cta-btn {
    width: 100%;
    justify-content: center;
  }

  .credit-promo-card {
    min-width: 150px;
    padding: 24px 24px 20px;
  }

  .credit-promo-amount {
    font-size: 1.35rem;
  }

  .store-section-header h2 {
    font-size: 1.15rem;
  }
}

@media (max-width: 480px) {
  .store-hero {
    padding: 36px 16px 32px;
  }

  .store-hero-title {
    font-size: 1.65rem;
  }

  .store-credit-bar {
    padding: 10px 14px;
  }

  .store-items-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .store-categories {
    padding: 12px 14px;
    gap: 6px;
  }

  .store-category-pill {
    padding: 7px 14px;
    font-size: 0.8rem;
  }

  .item-card-name {
    font-size: 0.82rem;
  }

  .item-card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .credit-promo-row {
    gap: 10px;
  }

  .credit-promo-card {
    min-width: 130px;
    padding: 20px 18px 16px;
  }

  .credit-promo-amount {
    font-size: 1.2rem;
  }

  .shop-card {
    min-width: 250px;
    padding: 14px 16px;
  }
}@keyframes creditsGlow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes alertSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.3);
  }
  50% {
    box-shadow: 0 0 16px 4px rgba(0, 255, 136, 0.15);
  }
}

.credits-store {
  height: 100%;
  overflow-y: auto;
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 32px;
  max-width: 1040px;
  margin: 0 auto;
}

.credits-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  animation: alertSlideIn 0.3s ease;
  backdrop-filter: blur(12px);
}

.credits-alert.success {
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.25);
  color: #00ff88;
}

.credits-alert.error {
  background: rgba(255, 71, 87, 0.08);
  border: 1px solid rgba(255, 71, 87, 0.25);
  color: #ff4757;
}

.credits-alert-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}

.credits-alert-icon-wrap.success-icon {
  background: rgba(0, 255, 136, 0.15);
}

.credits-alert-icon-wrap.error-icon {
  background: rgba(255, 71, 87, 0.15);
}

.credits-alert-text {
  flex: 1;
}

.credits-alert-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.5;
  border-radius: 6px;
  transition: all 0.2s ease;
  padding: 0;
}

.credits-alert-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.05);
}

.credit-balance-display {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.06) 0%, rgba(0, 255, 136, 0.02) 50%, rgba(0, 255, 136, 0.04) 100%);
  border: 1px solid rgba(0, 255, 136, 0.18);
  border-radius: 16px;
  padding: 36px 32px;
  margin-bottom: 40px;
  overflow: hidden;
}

.credit-balance-glow {
  position: absolute;
  top: 50%;
  left: 40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(0, 255, 136, 0.25) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(0, -50%);
  animation: creditsGlow 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.credit-balance-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 255, 136, 0.05) 100%);
  color: #00ff88;
  flex-shrink: 0;
  z-index: 1;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.credit-balance-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
}

.credit-balance-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
}

.credit-balance-amount {
  font-size: 3.5rem;
  font-weight: 800;
  color: #00ff88;
  line-height: 1;
  text-shadow: 0 0 40px rgba(0, 255, 136, 0.35), 0 0 80px rgba(0, 255, 136, 0.12);
}

.credit-balance-sub {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
}

.credits-section {
  margin-bottom: 48px;
}

.credits-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.credits-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--text-primary);
}

.credits-section-header .credits-section-title {
  margin-bottom: 0;
}

.credits-section-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: #00ff88;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 6px 12px;
  border-radius: 6px;
}

.credits-section-link:hover {
  background: rgba(0, 255, 136, 0.08);
}

.credits-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--text-muted);
  text-align: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
}

.credits-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(0, 255, 136, 0.08);
  color: #00ff88;
}

.credits-empty p {
  margin: 0;
  font-size: 0.9rem;
}

.credit-packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.credit-package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 32px 20px 20px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible;
}

.credit-package-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  border-radius: 14px 14px 0 0;
  transition: background 0.25s ease;
}

.credit-package-card:hover {
  border-color: rgba(0, 255, 136, 0.4);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 24px rgba(0, 255, 136, 0.08);
  transform: translateY(-4px);
}

.credit-package-card:hover::before {
  background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.5), transparent);
}

.credit-package-card.best-value {
  border-color: rgba(0, 255, 136, 0.4);
  background: linear-gradient(180deg, rgba(0, 255, 136, 0.06) 0%, var(--bg-secondary) 60%);
  box-shadow: 0 0 32px rgba(0, 255, 136, 0.08);
}

.credit-package-card.best-value::before {
  background: linear-gradient(90deg, #00ff88, #00cc6a, #00ff88);
}

.best-value-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: linear-gradient(135deg, #00ff88, #00cc6a);
  color: #0a0a0f;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 14px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0, 255, 136, 0.3);
  z-index: 2;
}

.bonus-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 183, 77, 0.12);
  border: 1px solid rgba(255, 183, 77, 0.25);
  color: #ffb74d;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: 2px;
}

.credit-package-credits {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
  margin-top: 8px;
}

.credit-package-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.credit-package-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: #00ff88;
  margin-top: 8px;
}

.credit-package-rate {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.credit-package-buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  margin-top: 12px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 255, 136, 0.08));
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 10px;
  color: #00ff88;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.credit-package-buy-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.25), rgba(0, 255, 136, 0.15));
  box-shadow: 0 4px 16px rgba(0, 255, 136, 0.2);
  transform: translateY(-1px);
}

.credit-package-buy-btn:active:not(:disabled) {
  transform: translateY(0);
}

.credit-package-buy-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.best-value .credit-package-buy-btn {
  background: linear-gradient(135deg, #00ff88, #00cc6a);
  border-color: transparent;
  color: #0a0a0f;
  animation: pulseGlow 2.5s ease-in-out infinite;
}

.best-value .credit-package-buy-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #00ff99, #00dd7a);
  box-shadow: 0 6px 24px rgba(0, 255, 136, 0.35);
}

.credit-history-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}

.credit-history-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  transition: background 0.15s ease;
}

.credit-history-item:hover {
  background: rgba(255, 255, 255, 0.02);
}

.credit-history-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
}

.credit-history-item-icon.positive {
  background: rgba(0, 255, 136, 0.1);
  color: #00ff88;
}

.credit-history-item-icon.negative {
  background: rgba(255, 71, 87, 0.1);
  color: #ff4757;
}

.credit-history-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.credit-history-item-desc {
  font-size: 0.875rem;
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.credit-history-item-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.credit-history-item-amount {
  font-size: 0.9rem;
  font-weight: 700;
  flex-shrink: 0;
}

.credit-history-item-amount.positive {
  color: #00ff88;
}

.credit-history-item-amount.negative {
  color: #ff4757;
}

.credit-info {
  background: transparent;
  border: none;
  padding: 0;
}

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

.credit-info-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 24px 20px;
  transition: border-color 0.2s ease;
}

.credit-info-card:hover {
  border-color: rgba(0, 255, 136, 0.25);
}

.credit-info-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 255, 136, 0.08);
  color: #00ff88;
}

.credit-info-card h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.credit-info-card p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.skeleton-pulse {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, rgba(255, 255, 255, 0.05) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

.skeleton-circle-lg {
  width: 72px;
  height: 72px;
  border-radius: 18px;
}

.skeleton-line-sm {
  width: 80px;
  height: 14px;
}

.skeleton-line-xl {
  width: 160px;
  height: 32px;
}

.skeleton-line-xs {
  width: 60px;
  height: 12px;
}

.skeleton-line-title {
  width: 140px;
  height: 20px;
  margin-bottom: 20px;
}

.skeleton-block-amount {
  width: 80px;
  height: 40px;
}

.skeleton-block-label {
  width: 60px;
  height: 12px;
}

.skeleton-block-price {
  width: 70px;
  height: 20px;
}

.skeleton-block-rate {
  width: 90px;
  height: 10px;
}

.skeleton-block-btn {
  width: 100%;
  height: 40px;
  margin-top: 12px;
}

.skeleton-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 32px 20px 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
}

.credits-skeleton-balance {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 36px 32px;
  margin-bottom: 40px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
}

.skeleton-pulse-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (max-width: 768px) {
  .credits-store {
    padding: 16px;
  }

  .credit-balance-display {
    padding: 24px 20px;
    gap: 16px;
  }

  .credit-balance-amount {
    font-size: 2.5rem;
  }

  .credit-balance-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }

  .credit-packages-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .credit-info-grid {
    grid-template-columns: 1fr;
  }

  .credit-package-credits {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .credit-packages-grid {
    grid-template-columns: 1fr;
  }
}.credit-history {
  height: 100%;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px 40px;
  
  gap: 20px;
}

.credit-history-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 14px;
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.history-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.history-header-left h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.current-balance {
  font-size: 14px;
  color: var(--text-muted);
}

.current-balance strong {
  color: #00ff88;
}

.csv-export-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 6px);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.csv-export-btn:hover {
  border-color: #00ff88;
  color: #00ff88;
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.15);
}

.history-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 71, 87, 0.1);
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-radius: var(--radius-sm, 6px);
  color: var(--danger, #ff4757);
  font-size: 13px;
}

.history-error button {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--danger, #ff4757);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}

.history-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius, 8px);
  padding: 4px;
  overflow-x: auto;
  flex-shrink: 0;
}

.filter-tab {
  padding: 7px 14px;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 6px);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.filter-tab:hover {
  background: var(--bg-tertiary, #1e1e2e);
  color: var(--text-primary);
}

.filter-tab.active {
  background: #00ff88;
  color: #0a0a0f;
}

.history-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 6px);
  padding: 0 12px;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  transition: all 0.15s ease;
}

.history-search:focus-within {
  border-color: #00ff88;
  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.15);
}

.history-search input {
  background: none;
  border: none;
  color: var(--text-primary);
  padding: 8px 4px;
  font-size: 13px;
  width: 100%;
  outline: none;
}

.history-search input::placeholder {
  color: var(--text-muted);
}

.history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 12px;
  color: var(--text-muted);
}

.history-empty svg {
  opacity: 0.4;
}

.history-empty h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
}

.history-empty p {
  font-size: 14px;
  margin: 0;
  max-width: 360px;
  text-align: center;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.history-entry {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 6px);
  transition: all 0.15s ease;
}

.history-entry:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.02));
  border-color: rgba(255, 255, 255, 0.08);
}

.entry-type-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.entry-type-icon.positive {
  background: rgba(0, 255, 136, 0.12);
  color: #00ff88;
}

.entry-type-icon.negative {
  background: rgba(255, 71, 87, 0.12);
  color: #ff4757;
}

.entry-type-icon.default {
  background: var(--bg-tertiary, #1e1e2e);
  color: var(--text-muted);
}

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

.entry-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.type-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.type-badge.positive {
  background: rgba(0, 255, 136, 0.1);
  color: #00ff88;
}

.type-badge.negative {
  background: rgba(255, 71, 87, 0.1);
  color: #ff4757;
}

.type-badge.default {
  background: var(--bg-tertiary, #1e1e2e);
  color: var(--text-muted);
}

.entry-date {
  font-size: 11px;
  color: var(--text-muted);
}

.entry-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entry-amounts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.entry-amount {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.amount-positive {
  color: #00ff88;
}

.amount-negative {
  color: #ff4757;
}

.entry-balance {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.history-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 0;
}

.page-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 6px);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.page-btn:hover:not(:disabled) {
  border-color: #00ff88;
  color: #00ff88;
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.page-info {
  font-size: 13px;
  color: var(--text-muted);
}

@media screen and (max-width: 900px) {
  .credit-history {
    padding: 20px 16px;
  }

  .history-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .history-search {
    max-width: none;
  }
}

@media screen and (max-width: 600px) {
  .credit-history {
    padding: 16px 12px;
  }

  .history-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .history-header-left h1 {
    font-size: 20px;
  }

  .history-entry {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .entry-amounts {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    justify-content: space-between;
  }

  .filter-tab {
    padding: 6px 10px;
    font-size: 11px;
  }

  .history-pagination {
    flex-wrap: wrap;
  }
}
.sf {
  height: 100%;
  overflow-y: auto;
  background: var(--bg-primary, #0a0a0f);
  color: var(--text-primary, #e0e0e8);
  
}

.sf-loading,
.sf-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 16px;
  color: var(--text-secondary, #9999aa);
}

.sf-loading__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color, #2a2a3a);
  border-top-color: #00ff88;
  border-radius: 50%;
  animation: sf-spin 0.8s linear infinite;
}

.sf-loading__spinner-sm {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color, #2a2a3a);
  border-top-color: #00ff88;
  border-radius: 50%;
  animation: sf-spin 0.8s linear infinite;
  display: inline-block;
}

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

.sf-error__icon {
  color: var(--accent-primary, #00ff88);
  opacity: 0.6;
}

.sf-error h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary, #e0e0e8);
  margin: 0;
}

.sf-error p {
  color: var(--text-secondary, #9999aa);
  margin: 0;
}

.sf-error__btn {
  background: var(--accent-primary, #00ff88);
  color: var(--bg-primary, #0a0a0f);
  border: none;
  padding: 10px 28px;
  border-radius: var(--radius-sm, 8px);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition, all 0.2s ease);
  margin-top: 8px;
}

.sf-error__btn:hover {
  background: var(--accent-secondary, #00cc6e);
  box-shadow: 0 4px 20px rgba(0, 255, 136, 0.3);
  transform: translateY(-1px);
}

.sf-hero {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  background: var(--bg-secondary, #12121c);
}

.sf-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sf-hero__gradient {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #12121c 0%, #0d0d1a 40%, #1a1a2e 70%, #0a0a0f 100%);
}

.sf-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--bg-primary, #0a0a0f) 0%,
    rgba(10, 10, 15, 0.85) 35%,
    rgba(10, 10, 15, 0.4) 100%
  );
}

.sf-hero__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 28px;
  display: flex;
  align-items: flex-end;
  gap: 24px;
  z-index: 2;
}

.sf-hero__icon-wrap {
  position: relative;
  flex-shrink: 0;
}

.sf-hero__icon {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-lg, 16px);
  border: 3px solid var(--bg-primary, #0a0a0f);
  object-fit: cover;
  display: block;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.sf-hero__icon-placeholder {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-lg, 16px);
  border: 3px solid var(--bg-primary, #0a0a0f);
  background: var(--bg-tertiary, #1a1a28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #555566);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.sf-hero__verified-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-primary, #00ff88);
  color: var(--bg-primary, #0a0a0f);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 255, 136, 0.4);
}

.sf-hero__text {
  flex: 1;
  min-width: 0;
  padding-bottom: 4px;
}

.sf-hero__name {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.sf-hero__verified-inline {
  color: var(--accent-primary, #00ff88);
}

.sf-hero__desc {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
  margin: 0 0 12px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 600px;
}

.sf-hero__seller-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sf-hero__seller-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-primary, #00ff88);
}

.sf-hero__seller-verified {
  color: var(--accent-primary, #00ff88);
}

.sf-hero__contact-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: rgba(0, 255, 136, 0.12);
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: var(--radius-sm, 8px);
  color: var(--accent-primary, #00ff88);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition, all 0.2s ease);
  margin-left: 4px;
}

.sf-hero__contact-btn:hover {
  background: rgba(0, 255, 136, 0.22);
  border-color: var(--accent-primary, #00ff88);
  box-shadow: 0 0 16px rgba(0, 255, 136, 0.2);
}

.sf-suspended {
  max-width: 1200px;
  margin: 20px auto 0;
  padding: 0 32px;
}

.sf-suspended__inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  background: rgba(255, 71, 87, 0.06);
  border: 1px solid rgba(255, 71, 87, 0.25);
  border-radius: var(--radius, 12px);
  border-left: 4px solid #ff4757;
  color: #ff4757;
}

.sf-suspended__inner svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.sf-suspended__text strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.sf-suspended__text p {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 71, 87, 0.75);
  line-height: 1.5;
}

.sf-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 80px;
}

.sf-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}

.sf-stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--bg-secondary, #12121c);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius, 12px);
  transition: var(--transition, all 0.2s ease);
}

.sf-stat-card:hover {
  border-color: rgba(0, 255, 136, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.sf-stat-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm, 8px);
  background: rgba(0, 255, 136, 0.08);
  color: var(--accent-primary, #00ff88);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sf-stat-card__icon--star {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}

.sf-stat-card__data {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sf-stat-card__value {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary, #e0e0e8);
  letter-spacing: -0.02em;
}

.sf-stat-card__label {
  font-size: 0.72rem;
  color: var(--text-muted, #555566);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

.sf-owner-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.sf-owner-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition, all 0.2s ease);
  font-family: inherit;
}

.sf-owner-btn--edit {
  background: var(--bg-tertiary, #1a1a28);
  border: 1px solid var(--border-color, #2a2a3a);
  color: var(--text-secondary, #9999aa);
}

.sf-owner-btn--edit:hover {
  background: var(--bg-hover, #22222e);
  color: var(--accent-primary, #00ff88);
  border-color: rgba(0, 255, 136, 0.3);
}

.sf-owner-btn--add {
  background: var(--accent-primary, #00ff88);
  border: 1px solid var(--accent-primary, #00ff88);
  color: var(--bg-primary, #0a0a0f);
}

.sf-owner-btn--add:hover {
  background: var(--accent-secondary, #00cc6e);
  box-shadow: 0 4px 20px rgba(0, 255, 136, 0.3);
  transform: translateY(-1px);
}

.sf-filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 28px;
}

.sf-filters__tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.sf-filters__tabs::-webkit-scrollbar {
  display: none;
}

.sf-filter-pill {
  background: var(--bg-tertiary, #1a1a28);
  color: var(--text-secondary, #9999aa);
  border: 1px solid var(--border-color, #2a2a3a);
  padding: 8px 18px;
  border-radius: 100px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  transition: var(--transition, all 0.2s ease);
  font-family: inherit;
}

.sf-filter-pill:hover {
  background: var(--bg-hover, #22222e);
  color: var(--text-primary, #e0e0e8);
  border-color: rgba(255, 255, 255, 0.1);
}

.sf-filter-pill--active {
  background: var(--accent-primary, #00ff88);
  color: var(--bg-primary, #0a0a0f);
  border-color: var(--accent-primary, #00ff88);
  font-weight: 700;
}

.sf-filter-pill--active:hover {
  background: var(--accent-secondary, #00cc6e);
  color: var(--bg-primary, #0a0a0f);
  border-color: var(--accent-secondary, #00cc6e);
}

.sf-filters__actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.sf-search {
  position: relative;
  flex: 1;
  max-width: 320px;
}

.sf-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted, #555566);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.sf-search input {
  width: 100%;
  background: var(--bg-tertiary, #1a1a28);
  border: 1px solid var(--border-color, #2a2a3a);
  color: var(--text-primary, #e0e0e8);
  padding: 10px 14px 10px 42px;
  border-radius: 100px;
  font-size: 0.85rem;
  transition: var(--transition, all 0.2s ease);
  font-family: inherit;
}

.sf-search input::placeholder {
  color: var(--text-muted, #555566);
}

.sf-search input:focus {
  outline: none;
  border-color: var(--accent-primary, #00ff88);
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.12);
}

.sf-sort {
  background: var(--bg-tertiary, #1a1a28);
  border: 1px solid var(--border-color, #2a2a3a);
  color: var(--text-secondary, #9999aa);
  padding: 10px 14px;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition, all 0.2s ease);
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239999aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.sf-sort:focus {
  outline: none;
  border-color: var(--accent-primary, #00ff88);
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.12);
}

.sf-sort option {
  background: var(--bg-secondary, #12121c);
  color: var(--text-primary, #e0e0e8);
}

.sf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.sf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  color: var(--text-muted, #555566);
  gap: 12px;
  margin-top: 40px;
}

.sf-empty h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-secondary, #9999aa);
  margin: 0;
}

.sf-empty p {
  font-size: 0.9rem;
  margin: 0;
}

.sf-item-card {
  background: var(--bg-secondary, #12121c);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius, 12px);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition, all 0.2s ease);
}

.sf-item-card:hover {
  border-color: rgba(0, 255, 136, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 255, 136, 0.1);
  transform: translateY(-4px);
}

.sf-item-card__thumb {
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--bg-tertiary, #1a1a28);
  overflow: hidden;
  position: relative;
}

.sf-item-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sf-item-card:hover .sf-item-card__thumb img {
  transform: scale(1.06);
}

.sf-item-card__thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #555566);
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--bg-tertiary, #1a1a28) 0%, var(--bg-secondary, #12121c) 100%);
}

.sf-type-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  backdrop-filter: blur(8px);
}

.sf-type-badge--digital {
  background: rgba(0, 255, 136, 0.15);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.25);
}

.sf-type-badge--physical {
  background: rgba(255, 165, 2, 0.15);
  color: #ffa502;
  border: 1px solid rgba(255, 165, 2, 0.25);
}

.sf-type-badge--server_perk {
  background: rgba(88, 101, 242, 0.15);
  color: #5865f2;
  border: 1px solid rgba(88, 101, 242, 0.25);
}

.sf-type-badge--service {
  background: rgba(255, 71, 87, 0.15);
  color: #ff4757;
  border: 1px solid rgba(255, 71, 87, 0.25);
}

.sf-stock-indicator {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

.sf-stock-indicator--in {
  background: rgba(0, 255, 136, 0.15);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.25);
}

.sf-stock-indicator--low {
  background: rgba(255, 165, 2, 0.15);
  color: #ffa502;
  border: 1px solid rgba(255, 165, 2, 0.25);
}

.sf-stock-indicator--out {
  background: rgba(255, 71, 87, 0.15);
  color: #ff4757;
  border: 1px solid rgba(255, 71, 87, 0.25);
}

.sf-item-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sf-item-card__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary, #e0e0e8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.sf-item-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.sf-item-card__price {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent-primary, #00ff88);
  letter-spacing: -0.02em;
}

.sf-item-card__price-unit {
  font-size: 0.72rem;
  color: var(--text-muted, #555566);
  font-weight: 500;
  margin-left: 3px;
}

.sf-item-card__price-local {
  font-size: 0.78rem;
  color: var(--text-muted, #555566);
  font-weight: 400;
}

.sf-item-card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sf-rating-stars {
  display: flex;
  align-items: center;
  gap: 1px;
}

.sf-rating-stars__star {
  display: flex;
  align-items: center;
}

.sf-rating-stars__star--filled {
  color: #ffc107;
}

.sf-rating-stars__star--empty {
  color: var(--text-muted, #555566);
  opacity: 0.25;
}

.sf-item-card__review-count {
  font-size: 0.72rem;
  color: var(--text-muted, #555566);
  margin-left: 2px;
}

.sf-load-more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.sf-load-more__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 36px;
  background: var(--bg-secondary, #12121c);
  border: 1px solid var(--border-color, #2a2a3a);
  color: var(--text-secondary, #9999aa);
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition, all 0.2s ease);
  font-family: inherit;
}

.sf-load-more__btn:hover:not(:disabled) {
  background: var(--bg-hover, #22222e);
  color: var(--accent-primary, #00ff88);
  border-color: rgba(0, 255, 136, 0.35);
  box-shadow: 0 4px 20px rgba(0, 255, 136, 0.15);
}

.sf-load-more__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 1024px) {
  .sf-hero {
    height: 260px;
  }

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

@media (max-width: 768px) {
  .sf-hero {
    height: 220px;
  }

  .sf-hero__content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px 20px;
  }

  .sf-hero__icon {
    width: 80px;
    height: 80px;
  }

  .sf-hero__icon-placeholder {
    width: 80px;
    height: 80px;
  }

  .sf-hero__name {
    font-size: 1.5rem;
    justify-content: center;
  }

  .sf-hero__desc {
    max-width: 100%;
  }

  .sf-hero__seller-row {
    justify-content: center;
    flex-wrap: wrap;
  }

  .sf-body {
    padding: 0 20px 60px;
  }

  .sf-stats-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .sf-stat-card {
    padding: 14px 16px;
    gap: 12px;
  }

  .sf-stat-card__value {
    font-size: 1.1rem;
  }

  .sf-stat-card__icon {
    width: 38px;
    height: 38px;
  }

  .sf-owner-actions {
    justify-content: center;
  }

  .sf-filters__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .sf-search {
    max-width: 100%;
  }

  .sf-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
  }

  .sf-item-card__body {
    padding: 12px;
  }

  .sf-item-card__name {
    font-size: 0.85rem;
  }

  .sf-item-card__price {
    font-size: 0.95rem;
  }

  .sf-suspended__inner {
    padding: 14px 16px;
  }
}

@media (max-width: 480px) {
  .sf-hero {
    height: 180px;
  }

  .sf-hero__icon {
    width: 64px;
    height: 64px;
  }

  .sf-hero__icon-placeholder {
    width: 64px;
    height: 64px;
  }

  .sf-hero__name {
    font-size: 1.25rem;
  }

  .sf-hero__desc {
    font-size: 0.85rem;
  }

  .sf-hero__content {
    padding: 0 16px 16px;
  }

  .sf-body {
    padding: 0 16px 48px;
  }

  .sf-stats-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sf-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .sf-owner-actions {
    flex-direction: column;
  }

  .sf-owner-btn {
    justify-content: center;
  }

  .sf-suspended {
    padding: 0 16px;
  }
}@keyframes pdp-image-fade {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pdp-modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

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

.pdp-page {
  height: 100%;
  overflow-y: auto;
  background: var(--bg-primary, #0a0a0f);
  color: var(--text-primary, #e0e0e8);
  
}

.pdp-page__loading,
.pdp-page__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 16px;
  color: var(--text-secondary, #9999aa);
}

.pdp-page__loading-spinner {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary, #00ff88);
}

.pdp-page__error p {
  color: var(--danger, #ff4757);
  font-size: 1.1rem;
  margin: 0;
}

.pdp-page__error-btn {
  background: var(--accent-primary, #00ff88);
  color: var(--bg-primary, #0a0a0f);
  border: none;
  padding: 10px 24px;
  border-radius: var(--radius, 8px);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.pdp-page__error-btn:hover {
  background: var(--accent-secondary, #00cc6e);
  box-shadow: 0 0 20px var(--accent-glow, rgba(0, 255, 136, 0.25));
}

.pdp-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 0;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: start;
}

.pdp-gallery {
  position: sticky;
  top: 24px;
}

.pdp-gallery__viewport {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--bg-secondary, #12121c);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  border: 1px solid var(--border-color, #1e1e2e);
  margin-bottom: 12px;
  position: relative;
}

.pdp-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: pdp-image-fade 0.3s ease-out;
}

.pdp-gallery__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: rgba(255, 255, 255, 0.08);
}

.pdp-gallery__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary, #00ff88) transparent;
}

.pdp-gallery__thumbs::-webkit-scrollbar {
  height: 4px;
}

.pdp-gallery__thumbs::-webkit-scrollbar-thumb {
  background: var(--accent-primary, #00ff88);
  border-radius: 4px;
}

.pdp-gallery__thumb {
  width: 72px;
  height: 54px;
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid var(--border-color, #1e1e2e);
  transition: all 0.2s ease;
  flex-shrink: 0;
  background: var(--bg-tertiary, #1a1a28);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdp-gallery__thumb:hover {
  border-color: var(--text-muted, #555566);
}

.pdp-gallery__thumb--active {
  border-color: var(--accent-primary, #00ff88);
  box-shadow: 0 0 12px var(--accent-glow, rgba(0, 255, 136, 0.2));
}

.pdp-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pdp-info__badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.pdp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pdp-badge--digital {
  background: rgba(0, 255, 136, 0.15);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.25);
}

.pdp-badge--physical {
  background: rgba(255, 165, 2, 0.15);
  color: #ffa502;
  border: 1px solid rgba(255, 165, 2, 0.25);
}

.pdp-badge--server_perk {
  background: rgba(88, 101, 242, 0.15);
  color: #5865f2;
  border: 1px solid rgba(88, 101, 242, 0.25);
}

.pdp-badge--service {
  background: rgba(255, 71, 87, 0.15);
  color: #ff4757;
  border: 1px solid rgba(255, 71, 87, 0.25);
}

.pdp-badge--category {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary, #9999aa);
  border: 1px solid var(--border-color, #1e1e2e);
}

.pdp-badge--oos {
  background: rgba(255, 71, 87, 0.15);
  color: #ff4757;
  border: 1px solid rgba(255, 71, 87, 0.3);
}

.pdp-badge--card {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 0.6rem;
  padding: 2px 8px;
}

.pdp-info__name {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text-primary, #e0e0e8);
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

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

.pdp-info__rating-val {
  font-size: 1rem;
  font-weight: 700;
  color: #ffc107;
}

.pdp-info__rating-count {
  font-size: 0.85rem;
  color: var(--text-muted, #555566);
}

.pdp-info__rating-none {
  font-size: 0.85rem;
  color: var(--text-muted, #555566);
  font-style: italic;
}

.pdp-info__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 0;
  border-top: 1px solid var(--border-color, #1e1e2e);
  border-bottom: 1px solid var(--border-color, #1e1e2e);
}

.pdp-info__price-credits {
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent-primary, #00ff88);
  line-height: 1;
}

.pdp-info__price-unit {
  font-size: 0.9rem;
  color: var(--text-muted, #555566);
  font-weight: 400;
}

.pdp-info__price-local {
  font-size: 0.85rem;
  color: var(--text-muted, #555566);
  margin-top: 4px;
}

.pdp-info__stock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 500;
}

.pdp-info__stock--ok {
  color: var(--accent-primary, #00ff88);
}

.pdp-info__stock--low {
  color: #ffa502;
}

.pdp-info__limit {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--text-secondary, #9999aa);
}

.pdp-info__limit--reached {
  color: var(--danger, #ff4757);
}

.pdp-info__seller {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-secondary, #12121c);
  border: 1px solid var(--border-color, #1e1e2e);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pdp-info__seller:hover {
  border-color: var(--accent-primary, #00ff88);
  background: rgba(0, 255, 136, 0.03);
  box-shadow: 0 0 16px var(--accent-glow, rgba(0, 255, 136, 0.08));
}

.pdp-info__seller-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pdp-info__seller-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent-primary, #00ff88);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pdp-info__verified {
  color: var(--accent-primary, #00ff88);
  flex-shrink: 0;
}

.pdp-info__seller-visit {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.8rem;
  color: var(--text-muted, #555566);
  font-weight: 500;
  transition: color 0.2s ease;
}

.pdp-info__seller:hover .pdp-info__seller-visit {
  color: var(--accent-primary, #00ff88);
}

.pdp-buy {
  padding: 20px;
  background: var(--bg-secondary, #12121c);
  border: 1px solid var(--border-color, #1e1e2e);
  border-radius: var(--radius-lg, 12px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pdp-buy__btn {
  width: 100%;
  padding: 16px 24px;
  background: var(--accent-primary, #00ff88);
  color: var(--bg-primary, #0a0a0f);
  border: none;
  border-radius: var(--radius, 8px);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pdp-buy__btn:hover:not(:disabled) {
  background: var(--accent-secondary, #00cc6e);
  box-shadow: 0 4px 24px var(--accent-glow, rgba(0, 255, 136, 0.3));
  transform: translateY(-1px);
}

.pdp-buy__btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 12px var(--accent-glow, rgba(0, 255, 136, 0.2));
}

.pdp-buy__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pdp-buy__btn--loading {
  background: var(--bg-tertiary, #1a1a28);
  color: var(--text-secondary, #9999aa);
}

.pdp-buy__btn--success {
  background: #00ff88 !important;
  color: var(--bg-primary, #0a0a0f) !important;
  opacity: 1 !important;
}

.pdp-buy__msg {
  font-size: 0.85rem;
  text-align: center;
  margin: 0;
}

.pdp-buy__msg--error {
  color: var(--danger, #ff4757);
}

.pdp-buy__msg--success {
  color: var(--accent-primary, #00ff88);
}

.pdp-buy__msg--login {
  color: #ffa502;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.pdp-buy__verify-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255, 165, 2, 0.08);
  border: 1px solid rgba(255, 165, 2, 0.25);
  border-radius: var(--radius, 8px);
  color: #ffa502;
  font-size: 0.88rem;
  line-height: 1.5;
}

.pdp-buy__delivery {
  padding: 14px;
  background: rgba(0, 255, 136, 0.06);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: var(--radius-sm, 6px);
}

.pdp-buy__delivery h4 {
  color: var(--accent-primary, #00ff88);
  margin: 0 0 6px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pdp-buy__delivery p {
  color: var(--text-secondary, #9999aa);
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
}

.pdp-info__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  background: transparent;
  border: 1px solid var(--border-color, #1e1e2e);
  border-radius: var(--radius, 8px);
  color: var(--text-secondary, #9999aa);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pdp-info__contact:hover {
  background: var(--bg-secondary, #12121c);
  color: var(--accent-primary, #00ff88);
  border-color: var(--accent-primary, #00ff88);
}

.pdp-info__edit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: 1px dashed var(--border-color, #1e1e2e);
  border-radius: var(--radius, 8px);
  color: var(--text-muted, #555566);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pdp-info__edit:hover {
  color: var(--accent-primary, #00ff88);
  border-color: var(--accent-primary, #00ff88);
  background: rgba(0, 255, 136, 0.03);
}

.pdp-info__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--bg-secondary, #12121c);
  border: 1px solid var(--border-color, #1e1e2e);
  border-radius: var(--radius, 8px);
}

.pdp-info__meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-secondary, #9999aa);
}

.pdp-info__meta-row strong {
  color: var(--text-primary, #e0e0e8);
}

.pdp-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdp-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

.pdp-modal__content {
  position: relative;
  background: rgba(18, 18, 28, 0.92);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg, 12px);
  padding: 28px;
  max-width: 420px;
  width: 90%;
  z-index: 1;
  animation: pdp-modal-in 0.2s ease-out;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

.pdp-modal__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary, #e0e0e8);
  margin: 0 0 20px;
}

.pdp-modal__rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pdp-modal__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 0.88rem;
  color: var(--text-secondary, #9999aa);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.pdp-modal__row span:last-child {
  color: var(--text-primary, #e0e0e8);
  font-weight: 500;
}

.pdp-modal__row--total {
  border-top: 1px solid var(--border-color, #1e1e2e);
  border-bottom: none;
  margin-top: 4px;
  padding-top: 14px;
}

.pdp-modal__row--total span {
  color: var(--accent-primary, #00ff88) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}

.pdp-modal__confirm-text {
  margin: 16px 0 0;
  color: var(--text-secondary, #9999aa);
  font-size: 0.9rem;
  text-align: center;
}

.pdp-modal__confirm-text strong {
  color: var(--accent-primary, #00ff88);
}

.pdp-modal__actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.pdp-modal__btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--radius, 8px);
  border: none;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.pdp-modal__btn--confirm {
  background: var(--accent-primary, #00ff88);
  color: var(--bg-primary, #0a0a0f);
}

.pdp-modal__btn--confirm:hover {
  background: var(--accent-secondary, #00cc6e);
  box-shadow: 0 4px 16px var(--accent-glow, rgba(0, 255, 136, 0.3));
}

.pdp-modal__btn--cancel {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary, #9999aa);
  border: 1px solid var(--border-color, #1e1e2e);
}

.pdp-modal__btn--cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary, #e0e0e8);
}

.pdp-description {
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 24px;
  background: var(--bg-secondary, #12121c);
  border: 1px solid var(--border-color, #1e1e2e);
  border-radius: var(--radius-lg, 12px);
}

.pdp-description__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary, #e0e0e8);
  margin: 0 0 16px;
}

.pdp-description__paragraph {
  color: var(--text-secondary, #9999aa);
  font-size: 0.92rem;
  line-height: 1.75;
  margin: 0 0 4px;
}

.pdp-description__list {
  margin: 8px 0;
  padding-left: 20px;
  color: var(--text-secondary, #9999aa);
  font-size: 0.92rem;
  line-height: 1.75;
}

.pdp-description__list-item {
  margin-bottom: 4px;
}

.pdp-description__list-item strong {
  color: var(--text-primary, #e0e0e8);
}

.pdp-description__list-item em {
  color: var(--accent-primary, #00ff88);
}

.pdp-description__spacer {
  height: 8px;
}

.pdp-description__code {
  background: var(--bg-tertiary, #1a1a28);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--accent-primary, #00ff88);
}

.pdp-description__paragraph a {
  color: var(--accent-primary, #00ff88);
}

.pdp-tags {
  max-width: 1200px;
  margin: 24px auto 0;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pdp-tags__pill {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary, #9999aa);
  background: var(--bg-secondary, #12121c);
  border: 1px solid var(--border-color, #1e1e2e);
  transition: all 0.2s ease;
}

.pdp-tags__pill:hover {
  color: var(--accent-primary, #00ff88);
  border-color: rgba(0, 255, 136, 0.3);
  background: rgba(0, 255, 136, 0.06);
}

.pdp-related {
  max-width: 1200px;
  margin: 48px auto 0;
  padding: 0 24px;
}

.pdp-related__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--text-primary, #e0e0e8);
}

.pdp-related__scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary, #00ff88) transparent;
}

.pdp-related__scroll::-webkit-scrollbar {
  height: 4px;
}

.pdp-related__scroll::-webkit-scrollbar-thumb {
  background: var(--accent-primary, #00ff88);
  border-radius: 4px;
}

.pdp-related__card {
  flex: 0 0 220px;
  background: var(--bg-secondary, #12121c);
  border: 1px solid var(--border-color, #1e1e2e);
  border-radius: var(--radius, 8px);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pdp-related__card:hover {
  border-color: var(--accent-primary, #00ff88);
  box-shadow: 0 8px 24px var(--accent-glow, rgba(0, 255, 136, 0.12));
  transform: translateY(-3px);
}

.pdp-related__card-thumb {
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--bg-tertiary, #1a1a28);
  overflow: hidden;
  position: relative;
}

.pdp-related__card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.pdp-related__card:hover .pdp-related__card-thumb img {
  transform: scale(1.05);
}

.pdp-related__card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-muted, #555566);
}

.pdp-related__card-info {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pdp-related__card-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary, #e0e0e8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdp-related__card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pdp-related__card-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-primary, #00ff88);
}

.pdp-related__card-price-unit {
  font-size: 0.7rem;
  color: var(--text-muted, #555566);
  font-weight: 400;
}

.pdp-related__card-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.8rem;
  color: #ffc107;
  font-weight: 600;
}

.pdp-reviews {
  max-width: 1200px;
  margin: 48px auto 0;
  padding: 0 24px 60px;
}

.pdp-reviews__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.pdp-reviews__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary, #e0e0e8);
  margin: 0;
}

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

.pdp-reviews__avg-val {
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffc107;
}

.pdp-reviews__avg-count {
  font-size: 0.85rem;
  color: var(--text-muted, #555566);
}

.pdp-reviews__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pdp-reviews__empty {
  text-align: center;
  color: var(--text-muted, #555566);
  padding: 40px 20px;
  font-size: 0.9rem;
}

.pdp-stars {
  display: flex;
  align-items: center;
  gap: 2px;
}

.pdp-stars__star {
  display: flex;
  align-items: center;
}

.pdp-stars__star--filled {
  color: #ffc107;
}

.pdp-stars__star--empty {
  color: var(--text-muted, #555566);
  opacity: 0.25;
}

.pdp-review-card {
  background: var(--bg-secondary, #12121c);
  border: 1px solid var(--border-color, #1e1e2e);
  border-radius: var(--radius, 8px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s ease;
}

.pdp-review-card:hover {
  border-color: rgba(255, 255, 255, 0.08);
}

.pdp-review-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pdp-review-card__avatar {
  flex-shrink: 0;
}

.pdp-review-card__user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pdp-review-card__username {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary, #e0e0e8);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pdp-review-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(0, 255, 136, 0.1);
  color: var(--accent-primary, #00ff88);
  border: 1px solid rgba(0, 255, 136, 0.2);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.pdp-review-card__date {
  font-size: 0.75rem;
  color: var(--text-muted, #555566);
}

.pdp-review-card__stars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.pdp-review-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary, #e0e0e8);
  margin: 0;
}

.pdp-review-card__body {
  font-size: 0.88rem;
  color: var(--text-secondary, #9999aa);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .pdp-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px 16px 0;
  }

  .pdp-gallery {
    position: static;
  }

  .pdp-gallery__viewport {
    aspect-ratio: 16/10;
  }

  .pdp-info__name {
    font-size: 1.4rem;
  }

  .pdp-info__price-credits {
    font-size: 1.6rem;
  }

  .pdp-related__card {
    flex: 0 0 180px;
  }

  .pdp-description,
  .pdp-tags,
  .pdp-related,
  .pdp-reviews {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 480px) {
  .pdp-hero {
    padding: 16px 12px 0;
  }

  .pdp-info__name {
    font-size: 1.25rem;
  }

  .pdp-info__price-credits {
    font-size: 1.4rem;
  }

  .pdp-gallery__thumb {
    width: 56px;
    height: 42px;
  }

  .pdp-buy__btn {
    padding: 14px 20px;
    font-size: 0.95rem;
  }

  .pdp-modal__content {
    padding: 20px;
  }

  .pdp-tags {
    padding: 0 12px;
  }

  .pdp-related__card {
    flex: 0 0 160px;
  }

  .pdp-review-card__header {
    flex-wrap: wrap;
  }

  .pdp-review-card__stars {
    margin-left: 0;
    width: 100%;
    margin-top: 4px;
  }

  .pdp-description,
  .pdp-reviews {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.pdp-modal__shipping-form {
  margin-top: 16px;
  margin-bottom: 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px;
}

.pdp-modal__shipping-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}

.pdp-modal__shipping-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pdp-modal__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pdp-modal__field label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pdp-modal__field input,
.pdp-modal__field select {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.875rem;
  padding: 8px 12px;
  transition: border-color 0.2s ease;
}

.pdp-modal__field input:focus,
.pdp-modal__field select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.15);
}

.pdp-modal__shipping-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0;
  padding: 10px 14px;
  background: rgba(255, 71, 87, 0.08);
  border: 1px solid rgba(255, 71, 87, 0.2);
  border-radius: 8px;
  color: #ff4757;
  font-size: 0.85rem;
}

@media (max-width: 480px) {
  .pdp-modal__shipping-grid {
    grid-template-columns: 1fr;
  }
}.seller-application {
  height: 100%;
  overflow-y: auto;
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px;
}

.seller-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 16px;
  color: var(--text-secondary);
}

.seller-header {
  text-align: center;
  margin-bottom: 32px;
}

.seller-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.seller-header p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 15px;
}

.seller-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255, 71, 87, 0.1);
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-radius: var(--radius, 8px);
  color: #ff4757;
  font-size: 14px;
  margin-bottom: 20px;
}

.status-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  min-height: 60vh;
}

.status-card.approved .status-card-icon {
  color: #00ff88;
}

.status-card.pending .status-card-icon {
  color: #ffa502;
}

.status-card.rejected .status-card-icon {
  color: #ff4757;
}

.status-card-icon {
  margin-bottom: 24px;
}

.status-card h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.status-card p {
  color: var(--text-secondary);
  font-size: 15px;
  max-width: 480px;
  margin: 0 0 24px;
  line-height: 1.6;
}

.status-card-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.status-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 24px;
}

.rejection-reason {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(255, 165, 2, 0.1);
  border: 1px solid rgba(255, 165, 2, 0.3);
  border-radius: var(--radius, 8px);
  color: #ffa502;
  font-size: 14px;
  max-width: 480px;
  text-align: left;
  margin-bottom: 24px;
  line-height: 1.5;
}

.wizard-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
  padding: 20px 0;
}

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
  min-width: 80px;
}

.step-indicator {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary, #1e1e2e);
  border: 2px solid var(--border-color);
  color: var(--text-muted);
  transition: all 0.15s ease;
  z-index: 1;
}

.wizard-step.active .step-indicator {
  background: var(--bg-secondary);
  border-color: #00ff88;
  color: #00ff88;
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.25);
}

.wizard-step.completed .step-indicator {
  background: #00ff88;
  border-color: #00ff88;
  color: #0a0a0f;
}

.wizard-step.pending .step-indicator {
  opacity: 0.5;
}

.step-label {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.wizard-step.active .step-label {
  color: #00ff88;
  font-weight: 600;
}

.wizard-step.completed .step-label {
  color: var(--text-secondary);
}

.step-line {
  position: absolute;
  top: 20px;
  left: calc(50% + 20px);
  width: calc(100% - 40px);
  min-width: 40px;
  height: 2px;
  background: var(--border-color);
  z-index: 0;
}

.step-line.completed {
  background: #00ff88;
}

.step-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 12px);
  padding: 32px;
  margin-bottom: 24px;
}

.step-panel h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.step-description {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 24px;
}

.terms-scroll {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius, 8px);
  padding: 20px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.terms-scroll::-webkit-scrollbar {
  width: 6px;
}

.terms-scroll::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

.terms-scroll::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.terms-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.terms-scroll pre {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
}

.terms-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 14px 16px;
  background: var(--bg-tertiary, #1e1e2e);
  border: 1px solid var(--border-color);
  border-radius: var(--radius, 8px);
  transition: all 0.15s ease;
  user-select: none;
}

.terms-checkbox:hover {
  border-color: #00ff88;
  background: var(--bg-hover, rgba(255, 255, 255, 0.02));
}

.terms-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #00ff88;
  cursor: pointer;
  flex-shrink: 0;
}

.terms-checkbox span {
  color: var(--text-primary);
  font-size: 14px;
}

.terms-checkbox a {
  color: #00ff88;
  text-decoration: none;
}

.terms-checkbox a:hover {
  text-decoration: underline;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 0;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.form-input,
.form-select {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 6px);
  color: var(--text-primary);
  font-size: 14px;
  transition: all 0.15s ease;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}

.form-input::placeholder {
  color: var(--text-muted);
}

.form-input:focus,
.form-select:focus {
  border-color: #00ff88;
  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.15);
}

.form-input--short {
  max-width: 160px;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888899' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

.form-select option {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.hidden-file-input {
  display: none;
}

.file-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 20px;
  background: var(--bg-primary);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  position: relative;
}

.file-upload-zone:hover {
  border-color: #00ff88;
  background: var(--bg-tertiary, #1e1e2e);
}

.file-upload-zone.uploaded {
  border-style: solid;
  border-color: #00ff88;
  background: rgba(0, 255, 136, 0.05);
}

.file-upload-zone.uploaded:hover {
  border-color: var(--accent-secondary, #00dd77);
}

.file-upload-label {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

.file-upload-name {
  color: #00ff88;
  font-size: 14px;
  font-weight: 500;
}

.file-upload-hint {
  color: var(--text-muted);
  font-size: 12px;
}

.file-remove-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255, 71, 87, 0.1);
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-radius: var(--radius-sm, 6px);
  color: #ff4757;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.file-remove-btn:hover {
  background: rgba(255, 71, 87, 0.2);
}

.upload-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--bg-tertiary, #1e1e2e);
  border-radius: 0 0 var(--radius, 8px) var(--radius, 8px);
  overflow: hidden;
}

.upload-progress-bar {
  height: 100%;
  background: #00ff88;
  transition: width 0.3s ease;
}

.review-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}

.review-group {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius, 8px);
  padding: 20px;
}

.review-group h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}

.review-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.review-value {
  font-size: 14px;
  color: var(--text-primary);
}

.review-file-uploaded {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #00ff88;
}

.step-navigation {
  display: flex;
  align-items: center;
  gap: 12px;
}

.step-navigation-spacer {
  flex: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm, 6px);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  font-family: inherit;
  text-decoration: none;
}

.btn-primary {
  background: #00ff88;
  color: #0a0a0f;
}

.btn-primary:hover {
  background: #00dd77;
  box-shadow: 0 0 16px rgba(0, 255, 136, 0.25);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary, #1e1e2e);
}

@media (max-width: 768px) {
  .seller-application {
    padding: 20px 16px;
  }

  .step-content {
    padding: 20px 16px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .review-grid {
    grid-template-columns: 1fr;
  }

  .wizard-steps {
    gap: 0;
    padding: 16px 0;
  }

  .wizard-step {
    min-width: 56px;
  }

  .step-label {
    font-size: 10px;
  }

  .step-indicator {
    width: 32px;
    height: 32px;
  }

  .step-line {
    top: 16px;
    left: calc(50% + 16px);
    width: calc(100% - 32px);
    min-width: 24px;
  }

  .seller-header h1 {
    font-size: 22px;
  }

  .status-card {
    padding: 40px 16px;
  }

  .status-card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    justify-content: center;
  }

  .form-input--short {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .seller-application {
    padding: 16px 12px;
  }

  .step-content {
    padding: 16px 12px;
  }

  .seller-header h1 {
    font-size: 20px;
  }

  .status-card h2 {
    font-size: 22px;
  }

  .terms-scroll {
    max-height: 240px;
  }
}
.sd-page {
  height: 100%;
  overflow-y: auto;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.sd-access-guard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  gap: 16px;
  padding: 60px 24px;
}

.sd-guard-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.sd-guard-icon--locked {
  background: rgba(0, 255, 136, 0.08);
  border: 2px solid rgba(0, 255, 136, 0.2);
}

.sd-guard-icon--pending {
  background: rgba(255, 165, 2, 0.08);
  border: 2px solid rgba(255, 165, 2, 0.2);
}

.sd-guard-icon--rejected {
  background: rgba(255, 71, 87, 0.08);
  border: 2px solid rgba(255, 71, 87, 0.2);
}

.sd-access-guard h2 {
  font-size: 24px;
  font-weight: 700;
  color: #e0e0f0;
  margin: 0;
}

.sd-access-guard p {
  font-size: 15px;
  color: #b0b0c0;
  margin: 0;
  max-width: 420px;
  line-height: 1.6;
}

.sd-guard-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: #00ff88;
  color: #0a0a0f;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.sd-guard-cta:hover {
  background: #00dd77;
  box-shadow: 0 0 24px rgba(0, 255, 136, 0.3);
  transform: translateY(-1px);
}

.sd-guard-cta--outline {
  background: transparent;
  color: #00ff88;
  border: 1px solid #00ff88;
}

.sd-guard-cta--outline:hover {
  background: rgba(0, 255, 136, 0.08);
  box-shadow: 0 0 24px rgba(0, 255, 136, 0.15);
}

.sd-skeleton-pulse {
  background: linear-gradient(90deg, #12121a 25%, #1a1a28 50%, #12121a 75%);
  background-size: 200% 100%;
  animation: sd-skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: 6px;
}

@keyframes sd-skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.sd-skeleton-line {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #12121a 25%, #1a1a28 50%, #12121a 75%);
  background-size: 200% 100%;
  animation: sd-skeleton-pulse 1.5s ease-in-out infinite;
}

.sd-skeleton-line--xs { width: 48px; }
.sd-skeleton-line--sm { width: 72px; }
.sd-skeleton-line--md { width: 120px; }

.sd-welcome-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sd-welcome-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: #e0e0f0;
  margin: 0;
}

.sd-welcome-shop {
  font-size: 14px;
  color: #00ff88;
  margin: 4px 0 0;
  font-weight: 500;
}

.sd-shop-select {
  padding: 10px 36px 10px 14px;
  background: #12121a;
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  color: #e0e0f0;
  font-size: 14px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888899' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
  min-width: 180px;
}

.sd-shop-select:focus {
  border-color: #00ff88;
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.12);
}

.sd-shop-select option {
  background: #0a0a0f;
  color: #e0e0f0;
}

.sd-error-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255, 71, 87, 0.08);
  border: 1px solid rgba(255, 71, 87, 0.25);
  border-radius: 10px;
  color: #ff4757;
  font-size: 14px;
}

.sd-error-retry {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-radius: 8px;
  color: #ff4757;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sd-error-retry:hover {
  background: rgba(255, 71, 87, 0.12);
}

.sd-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.sd-stat-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: #12121a;
  border: 1px solid #2a2a3a;
  border-radius: 12px;
  transition: all 0.25s ease;
  cursor: default;
}

.sd-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 255, 136, 0.15);
  border-color: rgba(0, 255, 136, 0.3);
}

.sd-stat-card--skeleton {
  pointer-events: none;
}

.sd-stat-card--skeleton:hover {
  transform: none;
  box-shadow: none;
  border-color: #2a2a3a;
}

.sd-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sd-stat-card--revenue .sd-stat-icon {
  background: rgba(0, 255, 136, 0.12);
  color: #00ff88;
}

.sd-stat-card--balance .sd-stat-icon {
  background: rgba(0, 204, 106, 0.12);
  color: #00cc6a;
}

.sd-stat-card--active .sd-stat-icon {
  background: rgba(99, 140, 255, 0.12);
  color: #638cff;
}

.sd-stat-card--orders .sd-stat-icon {
  background: rgba(255, 165, 2, 0.12);
  color: #ffa502;
}

.sd-stat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sd-stat-label {
  font-size: 12px;
  font-weight: 500;
  color: #888899;
  white-space: nowrap;
}

.sd-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: #e0e0f0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sd-stat-card--revenue .sd-stat-value {
  color: #00ff88;
}

.sd-stat-card--balance .sd-stat-value {
  color: #00cc6a;
}

.sd-stat-sub {
  font-size: 11px;
  color: #666688;
  white-space: nowrap;
}

.sd-quick-actions {
  background: #12121a;
  border: 1px solid #2a2a3a;
  border-radius: 12px;
  padding: 24px;
}

.sd-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #e0e0f0;
  margin: 0 0 16px;
}

.sd-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.sd-action-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: #0a0a0f;
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  color: #b0b0c0;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.sd-action-card:hover {
  border-color: rgba(0, 255, 136, 0.4);
  background: rgba(0, 255, 136, 0.04);
  color: #00ff88;
  transform: translateY(-1px);
}

.sd-action-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(0, 255, 136, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.sd-action-card:hover .sd-action-icon {
  background: rgba(0, 255, 136, 0.15);
}

.sd-action-label {
  white-space: nowrap;
}

.sd-section {
  background: #12121a;
  border: 1px solid #2a2a3a;
  border-radius: 12px;
  padding: 24px;
}

.sd-section--loading {
  opacity: 0.6;
  pointer-events: none;
}

.sd-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.sd-section-header h2 {
  font-size: 16px;
  font-weight: 600;
  color: #e0e0f0;
  margin: 0;
}

.sd-section-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #00ff88;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sd-section-link:hover {
  text-decoration: underline;
}

.sd-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  text-align: center;
  gap: 8px;
}

.sd-empty-state p {
  color: #b0b0c0;
  font-size: 15px;
  font-weight: 500;
  margin: 8px 0 0;
}

.sd-empty-state span {
  color: #666688;
  font-size: 13px;
}

.sd-orders-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sd-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sd-orders-table th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 600;
  color: #888899;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #2a2a3a;
  white-space: nowrap;
}

.sd-orders-table td {
  padding: 12px 14px;
  color: #e0e0f0;
  border-bottom: 1px solid rgba(42, 42, 58, 0.5);
  vertical-align: middle;
}

.sd-order-row:last-child td {
  border-bottom: none;
}

.sd-order-row:hover td {
  background: rgba(0, 255, 136, 0.02);
}

.sd-order-num {
  font-weight: 600;
  color: #00ff88;
}

.sd-order-item {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-buyer-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sd-buyer-cell span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-order-total {
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}

.sd-order-total small {
  color: #666688;
  font-weight: 400;
  margin-left: 2px;
}

.sd-status-badge {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.sd-order-date {
  color: #888899;
  white-space: nowrap;
}

.sd-order-view {
  color: #00ff88;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.sd-order-view:hover {
  text-decoration: underline;
}

@media (max-width: 960px) {
  .sd-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sd-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sd-welcome-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .sd-page {
    padding: 20px 16px;
    gap: 20px;
  }

  .sd-welcome-header h1 {
    font-size: 22px;
  }

  .sd-stats-grid {
    grid-template-columns: 1fr;
  }

  .sd-actions-grid {
    grid-template-columns: 1fr;
  }

  .sd-orders-table th:nth-child(4),
  .sd-orders-table td:nth-child(4),
  .sd-orders-table th:nth-child(6),
  .sd-orders-table td:nth-child(6) {
    display: none;
  }

  .sd-stat-value {
    font-size: 18px;
  }

  .sd-access-guard {
    min-height: 50vh;
    padding: 32px 16px;
  }
}.si-page {
  height: 100%;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px 40px;
  
  gap: 20px;
}

.si-access-guard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  gap: 16px;
  padding: 40px 24px;
}

.si-guard-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.si-guard-icon--locked {
  background: rgba(0, 255, 136, 0.08);
  border: 2px solid rgba(0, 255, 136, 0.2);
}

.si-guard-icon--pending {
  background: rgba(255, 165, 2, 0.08);
  border: 2px solid rgba(255, 165, 2, 0.2);
}

.si-guard-icon--rejected {
  background: rgba(255, 71, 87, 0.08);
  border: 2px solid rgba(255, 71, 87, 0.2);
}

.si-access-guard h2 {
  font-size: 24px;
  font-weight: 700;
  color: #e0e0f0;
  margin: 0;
}

.si-access-guard p {
  font-size: 15px;
  color: #b0b0c0;
  margin: 0;
  max-width: 420px;
  line-height: 1.6;
}

.si-guard-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: #00ff88;
  color: #0a0a0f;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.si-guard-cta:hover {
  background: #00dd77;
  box-shadow: 0 0 24px rgba(0, 255, 136, 0.3);
  transform: translateY(-1px);
}

.si-guard-cta--outline {
  background: transparent;
  color: #00ff88;
  border: 1px solid #00ff88;
}

.si-guard-cta--outline:hover {
  background: rgba(0, 255, 136, 0.08);
}

.si-skeleton-pulse {
  background: linear-gradient(90deg, #12121a 25%, #1a1a28 50%, #12121a 75%);
  background-size: 200% 100%;
  animation: si-pulse 1.5s ease-in-out infinite;
}

@keyframes si-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.si-skeleton-line {
  border-radius: 4px;
  background: linear-gradient(90deg, #12121a 25%, #1a1a28 50%, #12121a 75%);
  background-size: 200% 100%;
  animation: si-pulse 1.5s ease-in-out infinite;
}

.si-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.si-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.si-header-left h1 {
  font-size: 24px;
  font-weight: 700;
  color: #e0e0f0;
  margin: 0;
}

.si-shop-select {
  background: #12121a;
  border: 1px solid #2a2a3a;
  color: #e0e0f0;
  padding: 8px 32px 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888899' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.si-shop-select:hover {
  border-color: #00ff88;
}

.si-shop-select option {
  background: #0a0a0f;
  color: #e0e0f0;
}

.si-create-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: #00ff88;
  color: #0a0a0f;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.si-create-btn:hover {
  background: #00dd77;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.25);
  transform: translateY(-1px);
}

.si-create-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

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

.si-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #12121a;
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  padding: 0 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}

.si-search-wrap:focus-within {
  border-color: #00ff88;
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
}

.si-search-input {
  background: none;
  border: none;
  color: #e0e0f0;
  padding: 10px 4px;
  font-size: 14px;
  width: 100%;
  outline: none;
}

.si-search-input::placeholder {
  color: #666688;
}

.si-filter-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #12121a;
  border-radius: 10px;
  border: 1px solid #2a2a3a;
}

.si-filter-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #888899;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.si-filter-tab:hover {
  color: #e0e0f0;
  background: rgba(255, 255, 255, 0.04);
}

.si-filter-tab.active {
  color: #00ff88;
  background: rgba(0, 255, 136, 0.1);
}

.si-filter-count {
  font-size: 11px;
  color: #666688;
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 7px;
  border-radius: 8px;
}

.si-filter-tab.active .si-filter-count {
  color: #00ff88;
  background: rgba(0, 255, 136, 0.15);
}

.si-sort-select {
  background: #12121a;
  border: 1px solid #2a2a3a;
  color: #e0e0f0;
  padding: 8px 28px 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%23888899' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.si-sort-select:hover {
  border-color: #00ff88;
}

.si-sort-select option {
  background: #0a0a0f;
  color: #e0e0f0;
}

.si-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 71, 87, 0.08);
  border: 1px solid rgba(255, 71, 87, 0.25);
  border-radius: 10px;
  color: #ff4757;
  font-size: 13px;
}

.si-error button {
  margin-left: auto;
  background: none;
  border: none;
  color: #ff4757;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}

.si-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 12px;
  color: #666688;
}

.si-empty h3 {
  font-size: 18px;
  font-weight: 600;
  color: #b0b0c0;
  margin: 0;
}

.si-empty p {
  font-size: 14px;
  margin: 0;
  max-width: 360px;
  text-align: center;
  color: #888899;
  line-height: 1.5;
}

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

.si-item-card--skeleton .si-item-thumb {
  height: 140px;
  border-radius: 10px 10px 0 0;
}

.si-item-card--skeleton .si-item-info {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.si-items-table {
  display: block;
}

.si-items-cards {
  display: none;
  flex-direction: column;
  gap: 12px;
}

.si-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #12121a;
  border: 1px solid #2a2a3a;
  border-radius: 12px;
  overflow: hidden;
}

.si-table th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  color: #888899;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #2a2a3a;
  background: #0f0f18;
}

.si-table td {
  padding: 14px 16px;
  color: #e0e0f0;
  border-bottom: 1px solid rgba(42, 42, 58, 0.4);
  vertical-align: middle;
}

.si-table-row:last-child td {
  border-bottom: none;
}

.si-table-row:hover td {
  background: rgba(0, 255, 136, 0.02);
}

.si-item-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.si-item-thumb-small {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: #1a1a28;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.si-item-thumb-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.si-item-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.si-type-badge {
  font-size: 11px;
  color: #888899;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 10px;
  border-radius: 6px;
  text-transform: capitalize;
}

.si-price-cell {
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.si-price-cell small {
  color: #666688;
  font-weight: 400;
  margin-left: 2px;
}

.si-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.si-stock--unlimited {
  background: rgba(0, 255, 136, 0.08);
  color: #00ff88;
}

.si-stock--in {
  background: rgba(0, 255, 136, 0.06);
  color: #00cc6a;
}

.si-stock--low {
  background: rgba(255, 165, 2, 0.08);
  color: #ffa502;
}

.si-stock--out {
  background: rgba(255, 71, 87, 0.08);
  color: #ff4757;
}

.si-toggle {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  border: 2px solid #2a2a3a;
  background: #1a1a28;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  padding: 0;
  display: flex;
  align-items: center;
}

.si-toggle--active {
  background: rgba(0, 255, 136, 0.2);
  border-color: #00ff88;
}

.si-toggle-knob {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #666688;
  transition: all 0.2s ease;
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
}

.si-toggle--active .si-toggle-knob {
  left: 19px;
  background: #00ff88;
  box-shadow: 0 0 6px rgba(0, 255, 136, 0.4);
}

.si-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.si-row-actions {
  display: flex;
  gap: 6px;
}

.si-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #2a2a3a;
  border-radius: 8px;
  background: #12121a;
  color: #888899;
  cursor: pointer;
  transition: all 0.2s ease;
}

.si-action-btn:hover {
  transform: scale(1.08);
}

.si-action-btn--edit:hover {
  border-color: #00ff88;
  color: #00ff88;
  background: rgba(0, 255, 136, 0.08);
}

.si-action-btn--delete:hover {
  border-color: #ff4757;
  color: #ff4757;
  background: rgba(255, 71, 87, 0.08);
}

.si-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.si-item-card {
  background: #12121a;
  border: 1px solid #2a2a3a;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
  position: relative;
}

.si-item-card:hover {
  border-color: rgba(0, 255, 136, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.si-card-thumb {
  position: relative;
  width: 100%;
  height: 140px;
  background: #1a1a28;
  overflow: hidden;
}

.si-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.si-card-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a28 0%, #12121a 100%);
}

.si-card-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
}

.si-card-body {
  padding: 14px;
}

.si-card-name {
  font-size: 15px;
  font-weight: 600;
  color: #e0e0f0;
  margin: 0 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.si-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.si-card-price {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #00ff88;
}

.si-card-type {
  font-size: 11px;
  color: #666688;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: capitalize;
}

.si-card-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}

.si-card-sales {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #666688;
}

.si-card-actions {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.2s ease;
}

.si-item-card:hover .si-card-actions {
  opacity: 1;
  transform: translateY(0);
}

.si-delete-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.si-delete-modal {
  background: #12121a;
  border: 1px solid #2a2a3a;
  border-radius: 16px;
  padding: 32px;
  max-width: 420px;
  width: 90%;
  text-align: center;
}

.si-delete-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 71, 87, 0.1);
  margin: 0 auto 16px;
}

.si-delete-modal h3 {
  font-size: 18px;
  font-weight: 700;
  color: #e0e0f0;
  margin: 0 0 8px;
}

.si-delete-modal p {
  font-size: 14px;
  color: #b0b0c0;
  margin: 0 0 24px;
  line-height: 1.5;
}

.si-delete-modal strong {
  color: #e0e0f0;
}

.si-delete-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.si-delete-cancel {
  padding: 10px 24px;
  background: #1a1a28;
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  color: #b0b0c0;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.si-delete-cancel:hover {
  border-color: #666688;
  color: #e0e0f0;
}

.si-delete-confirm {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  background: #ff4757;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.si-delete-confirm:hover {
  background: #e8414f;
  box-shadow: 0 0 16px rgba(255, 71, 87, 0.3);
}

.si-delete-confirm:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media screen and (max-width: 900px) {
  .si-page {
    padding: 20px 16px;
  }

  .si-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .si-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .si-search-wrap {
    max-width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .si-items-table {
    display: none;
  }

  .si-items-cards {
    display: flex;
  }

  .si-card-actions {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 480px) {
  .si-page {
    padding: 16px 12px;
  }

  .si-header-left h1 {
    font-size: 20px;
  }

  .si-delete-modal {
    padding: 24px 20px;
  }

  .si-delete-actions {
    flex-direction: column;
  }

  .si-filter-tabs {
    overflow-x: auto;
    width: 100%;
  }
}.new-item-page {
  height: 100%;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  
  padding: 32px 40px;
}

.new-item-page .seller-items-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 14px;
}

.loading-spinner-lg {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-spinner-sm {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

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

.item-form-container {
  display: flex;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.item-form {
  flex: 1;
  min-width: 0;
}

.item-preview {
  width: 340px;
  flex-shrink: 0;
  position: sticky;
  top: 32px;
  align-self: flex-start;
}

.form-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.back-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.form-header h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.items-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 71, 87, 0.1);
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-size: 13px;
  margin-bottom: 20px;
}

.items-error button {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}

.form-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

.section-heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.form-group {
  margin-bottom: 14px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 14px;
  transition: var(--transition);
  box-sizing: border-box;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

.form-select {
  cursor: pointer;
}

.form-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0;
}

.form-row {
  display: flex;
  gap: 14px;
}

.form-row .form-group {
  flex: 1;
}

.price-input {
  display: flex;
  align-items: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: var(--transition);
}

.price-input:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.price-prefix {
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: var(--accent-primary);
  background: rgba(0, 255, 136, 0.08);
  border-right: 1px solid var(--border-color);
}

.price-input input {
  flex: 1;
  padding: 10px 8px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  min-width: 0;
}

.price-suffix {
  padding: 0 12px;
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}

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

.stock-input {
  width: 100px !important;
  flex: none !important;
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
}

.toggle-label input[type="checkbox"] {
  accent-color: var(--accent-primary);
  width: 16px;
  height: 16px;
}

.toggle-text {
  user-select: none;
}

.upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  cursor: pointer;
  transition: var(--transition);
  overflow: hidden;
}

.upload-zone:hover {
  border-color: var(--accent-primary);
  background: rgba(0, 255, 136, 0.03);
}

.upload-zone-small {
  min-height: 100px;
  width: 100px;
}

.upload-preview {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 14px;
  padding: 20px;
}

.upload-hint {
  font-size: 12px;
  opacity: 0.7;
}

.upload-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
}

.preview-images-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.preview-image-item {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

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

.preview-remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  color: var(--danger);
  cursor: pointer;
  transition: var(--transition);
}

.preview-remove-btn:hover {
  background: var(--danger);
  color: white;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
}

.btn-cancel {
  padding: 10px 24px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-cancel:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
}

.btn-save {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  background: var(--accent-primary);
  color: #0a0a0f;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.btn-save:hover {
  background: var(--accent-secondary);
  box-shadow: 0 0 20px var(--accent-glow);
}

.btn-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.preview-heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px;
}

.preview-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.preview-card-thumb {
  width: 100%;
  height: 200px;
  background: var(--bg-tertiary);
  overflow: hidden;
}

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

.preview-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.preview-card-body {
  padding: 18px;
}

.preview-category {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-primary);
  background: rgba(0, 255, 136, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
}

.preview-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 10px 0 8px;
}

.preview-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.preview-price {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-primary);
  margin-bottom: 8px;
}

.preview-price svg {
  flex-shrink: 0;
}

.preview-price-usd {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
}

.preview-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.preview-refund {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--success);
  background: rgba(0, 255, 136, 0.08);
  padding: 3px 8px;
  border-radius: 4px;
}

@media screen and (max-width: 900px) {
  .item-form-container {
    flex-direction: column;
  }

  .item-preview {
    width: 100%;
    position: static;
    order: -1;
  }

  .new-item-page {
    padding: 20px 16px;
  }
}

@media screen and (max-width: 600px) {
  .new-item-page {
    padding: 16px 12px;
  }

  .form-row {
    flex-direction: column;
    gap: 10px;
  }

  .form-header h1 {
    font-size: 20px;
  }

  .preview-card-thumb {
    height: 160px;
  }

  .stock-controls {
    flex-direction: column;
    align-items: flex-start;
  }

  .stock-input {
    width: 100% !important;
    flex: 1 !important;
  }
}

.pricing-breakdown {
  margin-top: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px;
}

.pricing-breakdown-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.pricing-breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.pricing-breakdown-row span:last-child {
  font-weight: 500;
  color: var(--text-primary);
}

.pricing-breakdown-total {
  border-top: 1px solid var(--border-color);
  margin-top: 8px;
  padding-top: 10px;
}

.pricing-breakdown-total span:last-child {
  color: #00ff88;
  font-weight: 700;
}

.shipping-zones-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shipping-zone-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px;
}

.shipping-zone-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1;
}

.shipping-zone-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 71, 87, 0.08);
  border: 1px solid rgba(255, 71, 87, 0.2);
  border-radius: 8px;
  color: #ff4757;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}

.shipping-zone-remove:hover {
  background: rgba(255, 71, 87, 0.15);
  border-color: rgba(255, 71, 87, 0.4);
}

.country-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 40px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.country-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.2);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

.country-tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s ease;
}

.country-tag-remove:hover {
  color: #ff4757;
}

.country-add-select {
  background: transparent;
  border: 1px dashed var(--border-color);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.75rem;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 26px;
}

.country-add-select:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.add-zone-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  background: rgba(0, 255, 136, 0.08);
  border: 1px dashed rgba(0, 255, 136, 0.3);
  border-radius: 10px;
  color: #00ff88;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-zone-btn:hover {
  background: rgba(0, 255, 136, 0.15);
  border-color: rgba(0, 255, 136, 0.5);
}

@media (max-width: 768px) {
  .shipping-zone-fields {
    flex-direction: column;
  }

  .pricing-breakdown {
    padding: 12px;
  }
}
.seller-orders {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px 40px;
  overflow-y: auto;
  gap: 20px;
}

.seller-orders-guard {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted, #666688);
  padding: 80px 20px;
  text-align: center;
}

.seller-orders-guard svg {
  color: #00ff88;
  opacity: 0.5;
}

.seller-orders-guard h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary, #e0e0f0);
  margin: 0;
}

.seller-orders-guard p {
  font-size: 14px;
  margin: 0;
}

.guard-back-btn {
  padding: 10px 24px;
  background: #00ff88;
  color: #0a0a0f;
  border: none;
  border-radius: var(--radius-sm, 6px);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.guard-back-btn:hover {
  background: #00e07a;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

.seller-orders-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted, #666688);
  font-size: 14px;
}

.loading-spinner-lg {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color, #2a2a3a);
  border-top-color: #00ff88;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-spinner-sm {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color, #2a2a3a);
  border-top-color: #00ff88;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

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

.orders-header h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary, #e0e0f0);
  margin: 0;
}

.orders-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 71, 87, 0.1);
  border: 1px solid #ff4757;
  border-radius: var(--radius-sm, 6px);
  color: #ff4757;
  font-size: 13px;
}

.orders-error button {
  margin-left: auto;
  background: none;
  border: none;
  color: #ff4757;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}

.orders-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-secondary, #1a1a24);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius, 8px);
  padding: 4px;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
}

.filter-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 6px);
  color: var(--text-secondary, #b0b0c0);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.filter-tab:hover {
  background: var(--bg-tertiary, #12121a);
  color: var(--text-primary, #e0e0f0);
}

.filter-tab.active {
  background: #00ff88;
  color: #0a0a0f;
}

.tab-count {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.15);
}

.filter-tab.active .tab-count {
  background: rgba(0, 0, 0, 0.2);
}

.search-orders {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-secondary, #1a1a24);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius-sm, 6px);
  transition: border-color 0.2s ease;
  min-width: 220px;
}

.search-orders:focus-within {
  border-color: #00ff88;
  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.15);
}

.search-orders svg {
  color: var(--text-muted, #666688);
  flex-shrink: 0;
}

.search-orders input {
  background: none;
  border: none;
  color: var(--text-primary, #e0e0f0);
  font-size: 13px;
  outline: none;
  width: 100%;
}

.search-orders input::placeholder {
  color: var(--text-muted, #666688);
}

.orders-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 12px;
  color: var(--text-muted, #666688);
}

.orders-empty svg {
  opacity: 0.4;
}

.orders-empty h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-secondary, #b0b0c0);
  margin: 0;
}

.orders-empty p {
  font-size: 14px;
  margin: 0;
}

.orders-table-wrapper {
  background: var(--bg-secondary, #1a1a24);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius, 8px);
  overflow-x: auto;
}

.orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.orders-table thead {
  background: var(--bg-tertiary, #12121a);
}

.orders-table th {
  padding: 12px 16px;
  text-align: left;
  color: var(--text-muted, #666688);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-color, #2a2a3a);
  white-space: nowrap;
}

.orders-table td {
  padding: 12px 16px;
  color: var(--text-secondary, #b0b0c0);
  border-bottom: 1px solid var(--border-color, #2a2a3a);
  white-space: nowrap;
}

.order-row {
  cursor: pointer;
  transition: background 0.15s ease;
}

.order-row:hover {
  background: var(--bg-hover, rgba(0, 255, 136, 0.03));
}

.order-row:last-child td {
  border-bottom: none;
}

.order-number {
  font-weight: 600;
  color: var(--text-primary, #e0e0f0);
  font-family: monospace;
}

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

.buyer-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

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

.item-thumb {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.order-credits {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: #00ff88;
}

.order-date {
  font-size: 12px;
  color: var(--text-muted, #666688);
}

.order-actions {
  display: flex;
  gap: 6px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.status-badge.pending {
  background: rgba(255, 165, 2, 0.12);
  color: #ffa502;
  border: 1px solid rgba(255, 165, 2, 0.3);
}

.status-badge.completed {
  background: rgba(0, 255, 136, 0.1);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.25);
}

.status-badge.disputed {
  background: rgba(255, 71, 87, 0.1);
  color: #ff4757;
  border: 1px solid rgba(255, 71, 87, 0.3);
}

.status-badge.refunded {
  background: rgba(85, 85, 102, 0.2);
  color: var(--text-muted, #666688);
  border: 1px solid var(--border-color, #2a2a3a);
}

.status-badge.delivery-pending {
  background: rgba(255, 165, 2, 0.1);
  color: #ffa502;
  border: 1px solid rgba(255, 165, 2, 0.2);
}

.status-badge.delivery-delivered {
  background: rgba(0, 255, 136, 0.1);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.2);
}

.status-badge.delivery-not_applicable {
  background: rgba(85, 85, 102, 0.15);
  color: var(--text-muted, #666688);
  border: 1px solid var(--border-color, #2a2a3a);
}

.status-badge.dispute-open {
  background: rgba(255, 71, 87, 0.1);
  color: #ff4757;
  border: 1px solid rgba(255, 71, 87, 0.2);
}

.status-badge.dispute-resolved {
  background: rgba(0, 255, 136, 0.1);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.2);
}

.status-badge.dispute-rejected {
  background: rgba(85, 85, 102, 0.2);
  color: var(--text-muted, #666688);
  border: 1px solid var(--border-color, #2a2a3a);
}

.quick-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: var(--radius-sm, 6px);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  border: none;
}

.quick-action-btn.deliver {
  background: rgba(0, 255, 136, 0.1);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.3);
}

.quick-action-btn.deliver:hover {
  background: rgba(0, 255, 136, 0.2);
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.2);
}

.quick-action-btn.deliver:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quick-action-btn.view {
  background: var(--bg-tertiary, #12121a);
  color: var(--text-secondary, #b0b0c0);
  border: 1px solid var(--border-color, #2a2a3a);
}

.quick-action-btn.view:hover {
  border-color: #00ff88;
  color: #00ff88;
}

.orders-card-list {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.order-card {
  background: var(--bg-secondary, #1a1a24);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius, 8px);
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.order-card:hover {
  border-color: #00ff88;
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.1);
}

.order-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.order-card-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.order-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.order-card-buyer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary, #e0e0f0);
}

.order-card-item-name {
  font-size: 14px;
  color: var(--text-secondary, #b0b0c0);
}

.order-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.order-card-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.order-card-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.pagination {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}

.load-more-btn {
  padding: 10px 28px;
  background: var(--bg-secondary, #1a1a24);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius-sm, 6px);
  color: var(--text-secondary, #b0b0c0);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.load-more-btn:hover {
  border-color: #00ff88;
  color: #00ff88;
}

@media screen and (max-width: 900px) {
  .seller-orders {
    padding: 20px 16px;
  }

  .orders-table-wrapper {
    display: none;
  }

  .orders-card-list {
    display: flex;
  }

  .orders-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .search-orders {
    min-width: 0;
    width: 100%;
  }
}

@media screen and (max-width: 600px) {
  .seller-orders {
    padding: 16px 12px;
  }

  .orders-header h1 {
    font-size: 20px;
  }

  .filter-tab {
    padding: 6px 12px;
    font-size: 12px;
  }

  .order-card-actions {
    margin-left: 0;
    width: 100%;
  }

  .quick-action-btn {
    flex: 1;
    justify-content: center;
  }
}.sp-page {
  height: 100%;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px 40px;
  
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.sp-access-guard {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px 20px;
  text-align: center;
}

.sp-guard-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 255, 136, 0.08);
  border: 2px solid rgba(0, 255, 136, 0.2);
  margin-bottom: 8px;
}

.sp-access-guard h2 {
  font-size: 24px;
  font-weight: 700;
  color: #e0e0f0;
  margin: 0;
}

.sp-access-guard p {
  font-size: 15px;
  color: #b0b0c0;
  margin: 0;
  max-width: 400px;
  line-height: 1.6;
}

.sp-guard-cta {
  padding: 12px 28px;
  background: #00ff88;
  color: #0a0a0f;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.sp-guard-cta:hover {
  background: #00dd77;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

.sp-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #888899;
  font-size: 14px;
}

.sp-header h1 {
  font-size: 24px;
  font-weight: 700;
  color: #e0e0f0;
  margin: 0;
}

.sp-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 71, 87, 0.08);
  border: 1px solid rgba(255, 71, 87, 0.25);
  border-radius: 10px;
  color: #ff4757;
  font-size: 13px;
}

.sp-error button {
  margin-left: auto;
  background: none;
  border: none;
  color: #ff4757;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
}

.sp-balance-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.sp-balance-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: #12121a;
  border: 1px solid #2a2a3a;
  border-radius: 12px;
  transition: all 0.25s ease;
}

.sp-balance-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.sp-balance-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sp-balance-card--available .sp-balance-icon {
  background: rgba(0, 255, 136, 0.12);
}

.sp-balance-card--hold .sp-balance-icon {
  background: rgba(255, 165, 2, 0.12);
}

.sp-balance-card--total .sp-balance-icon {
  background: rgba(99, 140, 255, 0.12);
}

.sp-balance-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sp-balance-label {
  font-size: 12px;
  font-weight: 500;
  color: #888899;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sp-balance-value {
  font-size: 24px;
  font-weight: 700;
  color: #e0e0f0;
  line-height: 1.2;
}

.sp-balance-value--green {
  color: #00ff88;
  text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

.sp-balance-value--orange {
  color: #ffa502;
}

.sp-balance-sub {
  font-size: 12px;
  color: #666688;
}

.sp-hold-card {
  background: #12121a;
  border: 1px solid rgba(255, 165, 2, 0.2);
  border-radius: 12px;
  padding: 20px;
}

.sp-hold-title {
  font-size: 16px;
  font-weight: 600;
  color: #e0e0f0;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp-hold-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sp-hold-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #b0b0c0;
  padding: 8px 12px;
  background: #0a0a0f;
  border-radius: 8px;
  border: 1px solid #2a2a3a;
}

.sp-hold-amount {
  font-weight: 600;
  min-width: 160px;
}

.sp-hold-reason {
  flex: 1;
  color: #666688;
}

.sp-hold-unlock {
  color: #00ff88;
  font-size: 12px;
  white-space: nowrap;
}

.sp-stripe-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  background: #12121a;
  border: 1px solid #2a2a3a;
  border-radius: 12px;
  flex-wrap: wrap;
}

.sp-stripe-info {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: #00ff88;
}

.sp-stripe-text h3 {
  font-size: 15px;
  font-weight: 600;
  color: #e0e0f0;
  margin: 0 0 4px;
}

.sp-stripe-text p {
  font-size: 13px;
  color: #b0b0c0;
  margin: 0;
}

.sp-stripe-connected {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #00ff88;
}

.sp-stripe-id {
  font-size: 12px;
  color: #666688;
  font-family: monospace;
}

.sp-stripe-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #00ff88;
  color: #0a0a0f;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.sp-stripe-btn:hover {
  background: #00dd77;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.25);
}

.sp-stripe-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.sp-section {
  background: #12121a;
  border: 1px solid #2a2a3a;
  border-radius: 12px;
  padding: 24px;
}

.sp-section-title {
  font-size: 18px;
  font-weight: 600;
  color: #e0e0f0;
  margin: 0 0 16px;
}

.sp-payout-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp-payout-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sp-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #b0b0c0;
}

.sp-payout-input-row {
  display: flex;
  align-items: center;
  background: #0a0a0f;
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sp-payout-input-row:focus-within {
  border-color: #00ff88;
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
}

.sp-payout-prefix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: rgba(0, 255, 136, 0.06);
  border-right: 1px solid #2a2a3a;
  height: 42px;
}

.sp-payout-input {
  flex: 1;
  padding: 10px 12px;
  background: none;
  border: none;
  color: #e0e0f0;
  font-size: 14px;
  outline: none;
  min-width: 0;
}

.sp-payout-input::placeholder {
  color: #666688;
}

.sp-payout-suffix {
  padding: 0 12px;
  color: #666688;
  font-size: 13px;
  white-space: nowrap;
}

.sp-hint {
  font-size: 12px;
  color: #666688;
  margin: 0;
}

.sp-payout-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: #00ff88;
  color: #0a0a0f;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-start;
}

.sp-payout-submit:hover {
  background: #00dd77;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.25);
}

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

.sp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 20px;
  color: #666688;
}

.sp-empty p {
  margin: 0;
  font-size: 14px;
  color: #b0b0c0;
}

.sp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sp-table th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 600;
  color: #888899;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #2a2a3a;
  white-space: nowrap;
}

.sp-table td {
  padding: 12px 14px;
  color: #b0b0c0;
  border-bottom: 1px solid rgba(42, 42, 58, 0.4);
  vertical-align: middle;
}

.sp-table tr:last-child td {
  border-bottom: none;
}

.sp-date-cell {
  color: #888899;
  white-space: nowrap;
}

.sp-amount-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sp-amount-credits {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: #00ff88;
}

.sp-amount-usd {
  font-size: 12px;
  color: #666688;
}

.sp-method-cell {
  color: #888899;
}

.sp-status-badge {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.sp-card-list {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.sp-payout-card {
  background: #0a0a0f;
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  padding: 14px 16px;
}

.sp-payout-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.sp-payout-card-amount {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: 15px;
  color: #00ff88;
}

.sp-payout-card-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #666688;
}

.sp-payout-card-usd {
  color: #b0b0c0;
}

.sp-payout-card-date {
  color: #888899;
}

.sp-payout-card-method {
  color: #666688;
}

.sp-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.sp-confirm-modal {
  background: #12121a;
  border: 1px solid #2a2a3a;
  border-radius: 16px;
  padding: 28px;
  width: 100%;
  max-width: 440px;
  margin: 20px;
}

.sp-confirm-modal h3 {
  font-size: 18px;
  font-weight: 700;
  color: #e0e0f0;
  margin: 0 0 20px;
}

.sp-confirm-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #0a0a0f;
  border-radius: 10px;
  margin-bottom: 12px;
}

.sp-confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #b0b0c0;
}

.sp-confirm-value {
  font-weight: 600;
  color: #e0e0f0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sp-confirm-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 165, 2, 0.08);
  border: 1px solid rgba(255, 165, 2, 0.2);
  border-radius: 8px;
  font-size: 13px;
  color: #ffa502;
  margin-bottom: 20px;
}

.sp-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.sp-confirm-cancel {
  padding: 10px 20px;
  background: #1a1a28;
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  color: #b0b0c0;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sp-confirm-cancel:hover {
  border-color: #666688;
  color: #e0e0f0;
}

.sp-confirm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  background: #00ff88;
  color: #0a0a0f;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sp-confirm-btn:hover {
  background: #00dd77;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.25);
}

.sp-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media screen and (max-width: 900px) {
  .sp-page {
    padding: 20px 16px;
  }

  .sp-balance-cards {
    grid-template-columns: 1fr;
  }

  .sp-stripe-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .sp-table-wrap {
    display: none;
  }

  .sp-card-list {
    display: flex;
  }
}

@media screen and (max-width: 600px) {
  .sp-page {
    padding: 16px 12px;
  }

  .sp-header h1 {
    font-size: 20px;
  }

  .sp-balance-value {
    font-size: 20px;
  }

  .sp-confirm-modal {
    margin: 12px;
    padding: 20px;
  }

  .sp-confirm-actions {
    flex-direction: column;
  }

  .sp-confirm-cancel,
  .sp-confirm-btn {
    width: 100%;
    justify-content: center;
  }

  .sp-hold-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .sp-hold-amount {
    min-width: unset;
  }
}.ss-page {
  height: 100%;
  overflow-y: auto;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px;
}

.ss-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 16px;
  color: #888899;
}

.ss-access-guard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 16px;
  text-align: center;
  padding: 40px 24px;
}

.ss-guard-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.ss-access-guard h2 {
  font-size: 24px;
  font-weight: 700;
  color: #e0e0f0;
  margin: 0;
}

.ss-access-guard p {
  font-size: 15px;
  color: #b0b0c0;
  margin: 0;
  max-width: 400px;
  line-height: 1.6;
}

.ss-guard-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: #00ff88;
  color: #0a0a0f;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.ss-guard-cta:hover {
  background: #00dd77;
  box-shadow: 0 0 24px rgba(0, 255, 136, 0.3);
  transform: translateY(-1px);
}

.ss-guard-cta--outline {
  background: transparent;
  color: #00ff88;
  border: 1px solid #00ff88;
}

.ss-guard-cta--outline:hover {
  background: rgba(0, 255, 136, 0.08);
}

.ss-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
  flex-wrap: wrap;
}

.ss-header h1 {
  font-size: 26px;
  font-weight: 700;
  color: #e0e0f0;
  margin: 0;
}

.ss-shop-select {
  background: #12121a;
  border: 1px solid #2a2a3a;
  color: #e0e0f0;
  padding: 10px 36px 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888899' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  font-family: inherit;
  min-width: 180px;
}

.ss-shop-select:focus {
  border-color: #00ff88;
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
}

.ss-shop-select option {
  background: #0a0a0f;
  color: #e0e0f0;
}

.ss-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 14px;
}

.ss-alert button {
  margin-left: auto;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 2px;
  display: flex;
  opacity: 0.6;
}

.ss-alert button:hover {
  opacity: 1;
}

.ss-alert--error {
  background: rgba(255, 71, 87, 0.08);
  border: 1px solid rgba(255, 71, 87, 0.25);
  color: #ff4757;
}

.ss-alert--success {
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.25);
  color: #00ff88;
}

.ss-suspension {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(255, 71, 87, 0.06);
  border: 2px solid rgba(255, 71, 87, 0.3);
  border-radius: 10px;
  margin-bottom: 20px;
}

.ss-suspension strong {
  display: block;
  font-size: 14px;
  color: #ff4757;
  margin-bottom: 4px;
}

.ss-suspension p {
  font-size: 13px;
  color: #b0b0c0;
  margin: 0;
}

.ss-two-col {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}

.ss-main-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ss-side-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ss-verification-card {
  background: #12121a;
  border: 1px solid #2a2a3a;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.ss-verification-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #00ff88;
}

.ss-verification-label {
  font-size: 14px;
  font-weight: 600;
  color: #e0e0f0;
}

.ss-verification-body {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ss-verification-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.ss-verification-detail {
  font-size: 12px;
  color: #666688;
  text-transform: capitalize;
}

.ss-section {
  background: #12121a;
  border: 1px solid #2a2a3a;
  border-radius: 12px;
  overflow: hidden;
}

.ss-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #e0e0f0;
  margin: 0;
  padding: 20px 24px 0;
}

.ss-section-body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ss-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ss-field {
  margin-bottom: 16px;
}

.ss-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #b0b0c0;
  margin-bottom: 6px;
}

.ss-input,
.ss-textarea,
.ss-select {
  width: 100%;
  padding: 10px 14px;
  background: #0a0a0f;
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  color: #e0e0f0;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.ss-input:focus,
.ss-textarea:focus,
.ss-select:focus {
  border-color: #00ff88;
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
}

.ss-input::placeholder,
.ss-textarea::placeholder {
  color: #666688;
}

.ss-input--readonly {
  opacity: 0.6;
  cursor: default;
}

.ss-textarea {
  resize: vertical;
}

.ss-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888899' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

.ss-select option {
  background: #0a0a0f;
  color: #e0e0f0;
}

.ss-char-count {
  display: block;
  font-size: 12px;
  color: #666688;
  text-align: right;
  margin-top: 4px;
}

.ss-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 28px;
  background: #00ff88;
  color: #0a0a0f;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-start;
}

.ss-save-btn:hover {
  background: #00dd77;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.25);
  transform: translateY(-1px);
}

.ss-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.ss-stripe-section .ss-section-body {
  gap: 12px;
}

.ss-stripe-connected,
.ss-stripe-not-connected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ss-stripe-status {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 16px 20px;
  border-radius: 10px;
}

.ss-stripe-status--connected {
  background: rgba(0, 255, 136, 0.06);
  border: 1px solid rgba(0, 255, 136, 0.2);
}

.ss-stripe-status--not-connected {
  background: rgba(255, 165, 2, 0.06);
  border: 1px solid rgba(255, 165, 2, 0.2);
}

.ss-stripe-status-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #e0e0f0;
}

.ss-stripe-status-desc {
  display: block;
  font-size: 12px;
  color: #b0b0c0;
  margin-top: 2px;
}

.ss-stripe-account-id {
  font-family: monospace;
  font-size: 11px;
  color: #666688;
}

.ss-stripe-manage-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  color: #b0b0c0;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ss-stripe-manage-btn:hover {
  border-color: #00ff88;
  color: #00ff88;
  background: rgba(0, 255, 136, 0.04);
}

.ss-stripe-connect-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: #00ff88;
  color: #0a0a0f;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ss-stripe-connect-btn:hover {
  background: #00dd77;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.25);
}

.ss-stripe-connect-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ss-danger-zone {
  border-color: rgba(255, 71, 87, 0.25);
}

.ss-danger-title {
  color: #ff4757 !important;
}

.ss-danger-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ss-danger-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ss-danger-label {
  font-size: 14px;
  font-weight: 600;
  color: #e0e0f0;
}

.ss-danger-desc {
  font-size: 12px;
  color: #888899;
}

.ss-danger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: rgba(255, 71, 87, 0.1);
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-radius: 10px;
  color: #ff4757;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.ss-danger-btn:hover {
  background: rgba(255, 71, 87, 0.2);
  border-color: rgba(255, 71, 87, 0.5);
}

.ss-preview-area {
  align-items: center;
}

.ss-banner-upload {
  position: relative;
  width: 100%;
  min-height: 120px;
  border: 2px dashed #2a2a3a;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ss-banner-upload:hover {
  border-color: #00ff88;
  background: rgba(0, 255, 136, 0.03);
}

.ss-banner-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.ss-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  color: #666688;
  font-size: 13px;
  text-align: center;
}

.ss-icon-upload-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 12px;
}

.ss-icon-upload {
  position: relative;
  width: 72px;
  height: 72px;
  border: 2px dashed #2a2a3a;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ss-icon-upload:hover {
  border-color: #00ff88;
}

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

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

.ss-icon-upload-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ss-icon-upload-shop-name {
  font-size: 14px;
  font-weight: 600;
  color: #e0e0f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-icon-upload-label {
  font-size: 12px;
  color: #b0b0c0;
}

.ss-icon-upload-hint {
  font-size: 11px;
  color: #666688;
}

.ss-upload-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 15, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
}

.ss-delete-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.ss-delete-modal {
  background: #12121a;
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-radius: 16px;
  padding: 28px;
  max-width: 440px;
  width: 90%;
}

.ss-delete-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.ss-delete-modal-header h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: #e0e0f0;
}

.ss-delete-modal p {
  font-size: 14px;
  color: #b0b0c0;
  margin: 0 0 16px;
  line-height: 1.5;
}

.ss-delete-modal strong {
  color: #ff4757;
}

.ss-delete-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.ss-delete-cancel-btn {
  padding: 10px 20px;
  background: #1a1a28;
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  color: #b0b0c0;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ss-delete-cancel-btn:hover {
  border-color: #666688;
  color: #e0e0f0;
}

.ss-delete-confirm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: rgba(255, 71, 87, 0.15);
  border: 1px solid rgba(255, 71, 87, 0.4);
  border-radius: 10px;
  color: #ff4757;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ss-delete-confirm-btn:hover {
  background: rgba(255, 71, 87, 0.25);
}

.ss-delete-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .ss-two-col {
    grid-template-columns: 1fr;
  }

  .ss-side-col {
    order: -1;
  }
}

@media (max-width: 768px) {
  .ss-page {
    padding: 20px 16px;
  }

  .ss-section-body {
    padding: 16px 20px 20px;
  }

  .ss-stripe-connected,
  .ss-stripe-not-connected {
    flex-direction: column;
    align-items: flex-start;
  }

  .ss-danger-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .ss-verification-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .ss-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .ss-header h1 {
    font-size: 22px;
  }

  .ss-delete-modal-actions {
    flex-direction: column;
  }

  .ss-delete-cancel-btn,
  .ss-delete-confirm-btn {
    width: 100%;
    justify-content: center;
  }

  .ss-icon-upload-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}.od {
  height: 100%;
  overflow-y: auto;
  background: var(--bg-primary, #0a0a0f);
  color: var(--text-primary, #e0e0e8);
  
}

.od-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 16px;
  color: var(--text-secondary, #9999aa);
}

.od-loading__spinner {
  width: 44px;
  height: 44px;
  border: 3px solid var(--border-color, #2a2a3a);
  border-top-color: #00ff88;
  border-radius: 50%;
  animation: od-spin 0.8s linear infinite;
}

.od-loading__spinner-sm {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color, #2a2a3a);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: od-spin 0.8s linear infinite;
  display: inline-block;
}

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

.od-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 12px;
  color: var(--text-secondary, #9999aa);
  padding: 24px;
}

.od-error-state svg {
  color: var(--accent-primary, #00ff88);
  opacity: 0.5;
}

.od-error-state h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary, #e0e0e8);
  margin: 0;
}

.od-error-state p {
  color: var(--text-secondary, #9999aa);
  margin: 0;
}

.od-back-btn {
  background: var(--accent-primary, #00ff88);
  color: var(--bg-primary, #0a0a0f);
  border: none;
  padding: 10px 28px;
  border-radius: var(--radius-sm, 8px);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition, all 0.2s ease);
  margin-top: 8px;
}

.od-back-btn:hover {
  background: var(--accent-secondary, #00cc6e);
  box-shadow: 0 4px 20px rgba(0, 255, 136, 0.3);
  transform: translateY(-1px);
}

.od-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 32px;
  border-bottom: 1px solid var(--border-color, #2a2a3a);
  background: var(--bg-secondary, #12121c);
  flex-wrap: wrap;
}

.od-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--bg-tertiary, #1a1a28);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius-sm, 10px);
  color: var(--text-secondary, #9999aa);
  cursor: pointer;
  transition: var(--transition, all 0.2s ease);
  flex-shrink: 0;
}

.od-back:hover {
  border-color: var(--accent-primary, #00ff88);
  color: var(--accent-primary, #00ff88);
  background: rgba(0, 255, 136, 0.06);
}

.od-header__info {
  flex: 1;
  min-width: 0;
}

.od-header__title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary, #e0e0e8);
  margin: 0;
  letter-spacing: -0.01em;
}

.od-header__date {
  font-size: 0.82rem;
  color: var(--text-muted, #555566);
  margin-top: 2px;
  display: block;
}

.od-header__badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.od-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid;
}

.od-badge--seller {
  background: rgba(0, 153, 255, 0.1);
  color: #0099ff;
  border-color: rgba(0, 153, 255, 0.3);
}

.od-badge--buyer {
  background: rgba(0, 255, 136, 0.1);
  color: #00ff88;
  border-color: rgba(0, 255, 136, 0.3);
}

.od-badge--type {
  background: rgba(0, 255, 136, 0.08);
  color: #00ff88;
  border-color: rgba(0, 255, 136, 0.2);
  font-size: 0.68rem;
  border-radius: 6px;
  padding: 2px 10px;
  text-transform: capitalize;
  letter-spacing: 0.3px;
}

.od-error-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  margin: 16px 32px 0;
  background: rgba(255, 71, 87, 0.08);
  border: 1px solid rgba(255, 71, 87, 0.25);
  border-left: 4px solid #ff4757;
  border-radius: var(--radius, 10px);
  color: #ff4757;
  font-size: 0.85rem;
}

.od-error-toast button {
  margin-left: auto;
  background: none;
  border: none;
  color: #ff4757;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: var(--transition, all 0.2s ease);
}

.od-error-toast button:hover {
  opacity: 1;
}

.od-content {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  padding: 24px 32px 60px;
  max-width: 1200px;
  margin: 0 auto;
}

.od-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.od-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.od-card {
  background: var(--bg-secondary, #12121c);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius, 14px);
  padding: 22px;
  transition: var(--transition, all 0.2s ease);
}

.od-card:hover {
  border-color: rgba(255, 255, 255, 0.06);
}

.od-card--dispute {
  border-color: rgba(255, 71, 87, 0.2);
  background: rgba(255, 71, 87, 0.02);
}

.od-card--success {
  display: flex;
  align-items: center;
  gap: 12px;
  border-color: rgba(0, 255, 136, 0.2);
  background: rgba(0, 255, 136, 0.04);
  color: #00ff88;
  font-size: 0.9rem;
  font-weight: 500;
}

.od-card__heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #e0e0e8);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.od-item-card {
  display: flex;
  gap: 20px;
  align-items: center;
}

.od-item-card__thumb {
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  border-radius: var(--radius-sm, 10px);
  overflow: hidden;
  background: var(--bg-tertiary, #1a1a28);
}

.od-item-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.od-item-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #555566);
  background: linear-gradient(135deg, var(--bg-tertiary, #1a1a28), var(--bg-secondary, #12121c));
}

.od-item-card__info {
  flex: 1;
  min-width: 0;
}

.od-item-card__name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary, #e0e0e8);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.od-item-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.od-item-card__seller {
  font-size: 0.82rem;
  color: var(--text-muted, #555566);
}

.od-item-card__seller strong {
  color: var(--accent-primary, #00ff88);
  font-weight: 600;
}

.od-buyer-card__row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.od-buyer-card__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-color, #2a2a3a);
}

.od-buyer-card__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary, #e0e0e8);
}

.od-buyer-card__row .od-action-btn {
  margin-left: auto;
}

.od-price-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.od-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 0.88rem;
  color: var(--text-secondary, #9999aa);
}

.od-price-row + .od-price-row--total {
  border-top: 1px solid var(--border-color, #2a2a3a);
  margin-top: 4px;
  padding-top: 12px;
}

.od-price-row--muted .od-price-row__value {
  color: var(--text-muted, #666688);
}

.od-price-row--total {
  font-weight: 700;
}

.od-price-row__label {
  font-weight: 500;
}

.od-price-row__value {
  font-weight: 600;
  text-align: right;
}

.od-price-row__value--accent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #00ff88;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.od-price-row__local {
  font-size: 0.78rem;
  color: var(--text-muted, #555566);
  font-weight: 400;
}

.od-delivery-download {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(0, 255, 136, 0.05);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: var(--radius-sm, 10px);
}

.od-delivery-download svg {
  color: #00ff88;
  flex-shrink: 0;
}

.od-delivery-download__label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted, #555566);
  margin-bottom: 2px;
}

.od-delivery-download__link {
  color: #00ff88;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition, all 0.2s ease);
}

.od-delivery-download__link:hover {
  text-decoration: underline;
}

.od-delivery-pending {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted, #666688);
  font-size: 0.88rem;
}

.od-delivery-pending svg {
  animation: od-spin 1s linear infinite;
}

.od-delivery-physical {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.od-delivery-physical__date {
  font-size: 0.82rem;
  color: var(--text-muted, #555566);
}

.od-delivery-action {
  margin-top: 16px;
  display: flex;
  gap: 10px;
}

.od-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition, all 0.2s ease);
  font-family: inherit;
  border: 1px solid transparent;
}

.od-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.od-action-btn--primary {
  background: #00ff88;
  color: #0a0a0f;
  border-color: #00ff88;
}

.od-action-btn--primary:hover:not(:disabled) {
  background: #00cc6e;
  box-shadow: 0 4px 20px rgba(0, 255, 136, 0.3);
  transform: translateY(-1px);
}

.od-action-btn--outline {
  background: transparent;
  border: 1px solid var(--border-color, #2a2a3a);
  color: var(--text-secondary, #9999aa);
}

.od-action-btn--outline:hover:not(:disabled) {
  border-color: rgba(0, 255, 136, 0.35);
  color: #00ff88;
  background: rgba(0, 255, 136, 0.05);
}

.od-action-btn--danger {
  background: rgba(255, 71, 87, 0.1);
  border: 1px solid rgba(255, 71, 87, 0.3);
  color: #ff4757;
}

.od-action-btn--danger:hover:not(:disabled) {
  background: rgba(255, 71, 87, 0.2);
  box-shadow: 0 4px 16px rgba(255, 71, 87, 0.2);
}

.od-action-btn--ghost {
  background: var(--bg-tertiary, #1a1a28);
  border: 1px solid var(--border-color, #2a2a3a);
  color: var(--text-secondary, #9999aa);
}

.od-action-btn--ghost:hover:not(:disabled) {
  border-color: var(--text-muted, #555566);
  color: var(--text-primary, #e0e0e8);
}

.od-dispute-cta p {
  font-size: 0.85rem;
  color: var(--text-secondary, #9999aa);
  margin: 0 0 14px;
  line-height: 1.6;
}

.od-dispute-form,
.od-dispute-response-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.od-dispute-response-form {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color, #2a2a3a);
}

.od-dispute-response-form__heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary, #e0e0e8);
  margin: 0 0 4px;
}

.od-field-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted, #555566);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.od-textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-tertiary, #1a1a28);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius-sm, 10px);
  color: var(--text-primary, #e0e0e8);
  font-size: 0.88rem;
  font-family: inherit;
  resize: vertical;
  min-height: 88px;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
  line-height: 1.5;
}

.od-textarea:focus {
  outline: none;
  border-color: #00ff88;
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
}

.od-input {
  width: 100%;
  padding: 10px 16px;
  background: var(--bg-tertiary, #1a1a28);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius-sm, 10px);
  color: var(--text-primary, #e0e0e8);
  font-size: 0.88rem;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.od-input:focus {
  outline: none;
  border-color: #00ff88;
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
}

.od-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.od-resolution-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.od-resolution-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-tertiary, #1a1a28);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius-sm, 10px);
  cursor: pointer;
  transition: var(--transition, all 0.2s ease);
}

.od-resolution-option:hover {
  border-color: rgba(0, 255, 136, 0.25);
}

.od-resolution-option input[type="radio"] {
  accent-color: #00ff88;
  margin-top: 3px;
  flex-shrink: 0;
}

.od-resolution-option:has(input:checked) {
  border-color: #00ff88;
  background: rgba(0, 255, 136, 0.04);
}

.od-resolution-option__content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.od-resolution-option__label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary, #e0e0e8);
}

.od-resolution-option__desc {
  font-size: 0.75rem;
  color: var(--text-muted, #555566);
  line-height: 1.4;
}

.od-dispute-reason {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-tertiary, #1a1a28);
  border-radius: var(--radius-sm, 10px);
  border: 1px solid rgba(255, 71, 87, 0.15);
}

.od-dispute-reason svg {
  color: #ff4757;
  flex-shrink: 0;
  margin-top: 2px;
}

.od-dispute-reason p {
  font-size: 0.88rem;
  color: var(--text-secondary, #9999aa);
  margin: 0;
  line-height: 1.6;
}

.od-review-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.od-star-input {
  display: flex;
  gap: 4px;
}

.od-star-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--border-color, #2a2a3a);
  transition: all 0.15s ease;
}

.od-star-btn--active {
  color: #ffc107;
}

.od-star-btn:hover {
  transform: scale(1.2);
}

.od-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.od-timeline-card {
  position: sticky;
  top: 24px;
}

.od-timeline {
  display: flex;
  flex-direction: column;
}

.od-timeline__step {
  display: flex;
  gap: 14px;
  padding-bottom: 20px;
  position: relative;
}

.od-timeline__step:last-child {
  padding-bottom: 0;
}

.od-timeline__step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 26px;
  bottom: 0;
  width: 2px;
  background: var(--border-color, #2a2a3a);
}

.od-timeline__step--current:not(:last-child)::after {
  background: linear-gradient(to bottom, #00ff88, var(--border-color, #2a2a3a));
}

.od-timeline__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-color, #2a2a3a);
  background: var(--bg-tertiary, #1a1a28);
  flex-shrink: 0;
  z-index: 1;
}

.od-timeline__step--current .od-timeline__dot {
  width: 20px;
  height: 20px;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

.od-timeline__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-top: 0;
}

.od-timeline__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary, #e0e0e8);
}

.od-timeline__time {
  font-size: 0.72rem;
  color: var(--text-muted, #555566);
}

.od-timeline__desc {
  font-size: 0.78rem;
  color: var(--text-secondary, #9999aa);
  margin-top: 2px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .od-content {
    grid-template-columns: 1fr;
    padding: 16px 20px 48px;
  }

  .od-header {
    padding: 16px 20px;
  }

  .od-resolution-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .od-header {
    padding: 14px 16px;
  }

  .od-content {
    padding: 12px 16px 40px;
  }

  .od-header__title {
    font-size: 1.1rem;
  }

  .od-header__badges {
    width: 100%;
  }

  .od-item-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .od-item-card__thumb {
    width: 100%;
    height: 160px;
  }

  .od-card {
    padding: 18px;
  }

  .od-buyer-card__row {
    flex-wrap: wrap;
  }

  .od-buyer-card__row .od-action-btn {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}.admin-shops {
  height: 100%;
  overflow-y: auto;
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 24px;
}

.admin-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 16px;
  color: var(--text-secondary);
}

.admin-shops-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.admin-shops-header h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.admin-shops-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
}

.admin-shops-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255, 71, 87, 0.1);
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-radius: var(--radius);
  color: var(--danger);
  font-size: 14px;
  margin-bottom: 20px;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.admin-stat-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: var(--transition);
}

.admin-stat-card:hover {
  border-color: var(--accent-primary);
}

.admin-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-stat-icon--total {
  background: rgba(136, 136, 153, 0.15);
  color: var(--text-secondary);
}

.admin-stat-icon--active {
  background: rgba(0, 255, 136, 0.15);
  color: var(--success);
}

.admin-stat-icon--suspended {
  background: rgba(255, 71, 87, 0.15);
  color: var(--danger);
}

.admin-stat-icon--revenue {
  background: rgba(0, 255, 136, 0.1);
  color: var(--accent-primary);
}

.admin-stat-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.admin-shops-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.admin-shops-search {
  flex: 1;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: var(--transition);
}

.admin-shops-search:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.15);
}

.admin-shops-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
}

.admin-shops-search-input::placeholder {
  color: var(--text-muted);
}

.admin-shops-filter {
  display: flex;
  gap: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 4px;
}

.admin-shops-filter-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}

.admin-shops-filter-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.admin-shops-filter-btn.active {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.admin-shops-results {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.admin-shops-count {
  font-size: 13px;
  color: var(--text-secondary);
}

.admin-shops-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  gap: 8px;
  color: var(--text-secondary);
}

.admin-shops-empty p {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 8px 0 0;
}

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

.admin-shop-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: var(--transition);
  overflow: hidden;
}

.admin-shop-card:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.admin-shop-card--suspended {
  border-left: 3px solid var(--danger);
}

.admin-shop-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 12px;
}

.admin-shop-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-tertiary);
}

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

.admin-shop-icon-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
}

.admin-shop-card-info {
  flex: 1;
  min-width: 0;
}

.admin-shop-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-shop-name-row h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-shop-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.admin-shop-status.active {
  background: rgba(0, 255, 136, 0.15);
  color: var(--success);
}

.admin-shop-status.suspended {
  background: rgba(255, 71, 87, 0.15);
  color: var(--danger);
}

.admin-shop-slug {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  display: block;
}

.admin-shop-card-body {
  padding: 0 20px 12px;
}

.admin-shop-seller {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.admin-shop-seller-name {
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-shop-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.admin-shop-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--bg-tertiary);
  border-radius: 8px;
}

.admin-shop-metric-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-shop-metric-label {
  font-size: 11px;
  color: var(--text-muted);
}

.admin-shop-suspension-reason {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255, 71, 87, 0.08);
  border: 1px solid rgba(255, 71, 87, 0.2);
  border-radius: 8px;
  font-size: 12px;
  color: var(--danger);
}

.admin-shop-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border-color);
}

.admin-shop-suspended-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--danger);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  gap: 4px;
}

.btn-danger {
  background: rgba(255, 71, 87, 0.15);
  color: var(--danger);
  border: 1px solid rgba(255, 71, 87, 0.3);
}

.btn-danger:hover {
  background: rgba(255, 71, 87, 0.25);
}

.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.suspend-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.15s ease;
}

.suspend-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  width: 90%;
  max-width: 480px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: slideUp 0.2s ease;
}

.suspend-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
}

.suspend-modal-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.suspend-modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: var(--transition);
}

.suspend-modal-close:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.suspend-modal-body {
  padding: 20px 24px;
}

.suspend-modal-shop-name {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 16px;
  line-height: 1.5;
}

.suspend-modal-shop-name strong {
  color: var(--text-primary);
}

.suspend-modal-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.suspend-modal-textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: var(--transition);
  box-sizing: border-box;
}

.suspend-modal-textarea:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.15);
}

.suspend-modal-textarea::placeholder {
  color: var(--text-muted);
}

.suspend-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px 20px;
}

.btn-primary {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.btn-primary:hover {
  background: #00dd77;
  box-shadow: 0 0 16px rgba(0, 255, 136, 0.25);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 768px) {
  .admin-shops {
    padding: 20px 16px;
  }

  .admin-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-shops-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-shops-search {
    min-width: unset;
  }

  .admin-shops-grid {
    grid-template-columns: 1fr;
  }

  .admin-shops-header {
    flex-direction: column;
    gap: 4px;
  }

  .admin-stat-value {
    font-size: 17px;
  }
}

@media (max-width: 480px) {
  .admin-stats {
    grid-template-columns: 1fr;
  }

  .admin-shop-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .admin-shop-card-actions {
    flex-wrap: wrap;
  }
}
.admin-verifications {
  height: 100%;
  overflow-y: auto;
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 24px;
}

.admin-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 16px;
  color: var(--text-secondary);
}

.admin-verifications-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.admin-verifications-header h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.admin-verifications-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
}

.admin-verifications-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255, 71, 87, 0.1);
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-radius: var(--radius);
  color: var(--danger);
  font-size: 14px;
  margin-bottom: 20px;
}

.admin-verifications-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  padding: 20px 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.admin-verif-stat {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-verif-stat-info {
  display: flex;
  flex-direction: column;
}

.admin-verif-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.admin-verif-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.admin-verifications-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.admin-verifications-filter {
  display: flex;
  gap: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 4px;
}

.admin-verif-filter-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}

.admin-verif-filter-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.admin-verif-filter-btn.active {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.admin-verifications-count {
  font-size: 13px;
  color: var(--text-secondary);
}

.admin-verifications-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  gap: 8px;
}

.admin-verifications-empty p {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 8px 0 0;
}

.verification-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.verification-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: var(--transition);
  overflow: hidden;
}

.verification-card:hover {
  border-color: rgba(0, 255, 136, 0.3);
}

.verification-card--approved {
  border-left: 3px solid var(--success);
}

.verification-card--rejected {
  border-left: 3px solid var(--danger);
}

.verification-card-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  cursor: pointer;
  transition: var(--transition);
}

.verification-card-summary:hover {
  background: var(--bg-tertiary);
}

.verification-applicant {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

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

.verification-applicant-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.verification-applicant-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.verification-status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.verification-status-badge--pending {
  background: rgba(255, 165, 2, 0.15);
  color: #ffa502;
}

.verification-status-badge--approved {
  background: rgba(0, 255, 136, 0.15);
  color: var(--success);
}

.verification-status-badge--rejected {
  background: rgba(255, 71, 87, 0.15);
  color: var(--danger);
}

.verification-applicant-username {
  font-size: 13px;
  color: var(--text-secondary);
  display: block;
}

.verification-applicant-email {
  font-size: 12px;
  color: var(--text-muted);
  display: block;
}

.verification-summary-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.verification-summary-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.verification-expand-icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.verification-details {
  padding: 0 20px 20px;
  border-top: 1px solid var(--border-color);
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.verification-details-section {
  margin-bottom: 16px;
}

.verification-details-section h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 6px;
}

.verification-details-section p {
  font-size: 14px;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.5;
}

.verification-details-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.verification-documents h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
}

.verification-document-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.document-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--accent-primary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition);
}

.document-link:hover {
  border-color: var(--accent-primary);
  background: var(--bg-hover);
}

.verification-rejection-reason {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 71, 87, 0.08);
  border: 1px solid rgba(255, 71, 87, 0.2);
  border-radius: 8px;
  font-size: 12px;
  color: var(--danger);
  margin-bottom: 16px;
}

.approve-reject-buttons {
  display: flex;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  font-family: inherit;
  white-space: nowrap;
}

.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  gap: 4px;
}

.btn-approve {
  background: rgba(0, 255, 136, 0.15);
  color: var(--success);
  border: 1px solid rgba(0, 255, 136, 0.3);
}

.btn-approve:hover {
  background: rgba(0, 255, 136, 0.25);
}

.btn-approve:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-reject {
  background: rgba(255, 71, 87, 0.15);
  color: var(--danger);
  border: 1px solid rgba(255, 71, 87, 0.3);
}

.btn-reject:hover {
  background: rgba(255, 71, 87, 0.25);
}

.btn-reject:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.rejection-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.15s ease;
}

.rejection-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  width: 90%;
  max-width: 480px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: slideUp 0.2s ease;
}

.rejection-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
}

.rejection-modal-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.rejection-modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: var(--transition);
}

.rejection-modal-close:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.rejection-modal-body {
  padding: 20px 24px;
}

.rejection-modal-applicant {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 16px;
  line-height: 1.5;
}

.rejection-modal-applicant strong {
  color: var(--text-primary);
}

.rejection-modal-field {
  margin-bottom: 14px;
}

.rejection-modal-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.rejection-modal-textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: var(--transition);
  box-sizing: border-box;
}

.rejection-modal-textarea:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.15);
}

.rejection-modal-textarea::placeholder {
  color: var(--text-muted);
}

.rejection-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px 20px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 768px) {
  .admin-verifications {
    padding: 20px 16px;
  }

  .admin-verifications-stats {
    flex-direction: column;
    gap: 12px;
  }

  .verification-card-summary {
    flex-wrap: wrap;
  }

  .verification-summary-meta {
    width: 100%;
    justify-content: flex-start;
    margin-top: 8px;
  }

  .verification-details-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .verification-applicant-info {
    flex-basis: 100%;
  }
}

@media (max-width: 480px) {
  .verification-details-grid {
    grid-template-columns: 1fr;
  }

  .verification-document-links {
    flex-direction: column;
  }

  .approve-reject-buttons {
    flex-direction: column;
  }
}
.admin-compliance {
  height: 100%;
  overflow-y: auto;
  padding: 24px;
  max-width: 960px;
  margin: 0 auto;
}

.compliance-header h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary, #e0e0e0);
  margin: 0 0 4px;
}

.compliance-header p {
  color: var(--text-secondary, #888899);
  font-size: 14px;
  margin: 0 0 20px;
}

.compliance-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color, #2a2a3a);
  padding-bottom: 8px;
}

.compliance-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-secondary, #888899);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: var(--radius-sm, 8px) var(--radius-sm, 8px) 0 0;
  transition: var(--transition, all 0.2s ease);
}

.compliance-tab:hover {
  color: var(--text-primary, #e0e0e0);
  background: var(--bg-hover, #22222e);
}

.compliance-tab.active {
  color: var(--accent-primary, #00ff88);
  background: rgba(0, 255, 136, 0.08);
  border-bottom: 2px solid var(--accent-primary, #00ff88);
}

.compliance-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.compliance-filters {
  display: flex;
  gap: 12px;
  align-items: center;
}

.compliance-filters select {
  background: var(--bg-tertiary, #1a1a24);
  color: var(--text-primary, #e0e0e0);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius-sm, 8px);
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  outline: none;
}

.compliance-filters select:focus {
  border-color: var(--accent-primary, #00ff88);
}

.compliance-loading,
.compliance-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: var(--text-secondary, #888899);
  font-size: 14px;
}

.compliance-checks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.compliance-check-card {
  background: var(--bg-secondary, #12121a);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius, 12px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.check-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.check-type {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary, #888899);
}

.check-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.status-pending { background: rgba(255, 165, 2, 0.15); color: var(--warning, #ffa502); }
.status-flagged { background: rgba(255, 71, 87, 0.15); color: var(--danger, #ff4757); }
.status-passed { background: rgba(0, 255, 136, 0.15); color: var(--success, #00ff88); }
.status-resolved { background: rgba(136, 136, 153, 0.15); color: var(--text-secondary, #888899); }

.check-severity {
  font-size: 12px;
  font-weight: 700;
  margin-left: auto;
}

.check-card-body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary, #888899);
}

.check-shop, .check-item, .check-action, .check-date {
  display: flex;
  align-items: center;
  gap: 4px;
}

.check-flags, .sar-flags, .scan-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.check-flag, .sar-flag, .scan-flag {
  background: rgba(255, 71, 87, 0.1);
  color: var(--danger, #ff4757);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

.check-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--border-color, #2a2a3a);
}

.check-card-actions select,
.check-card-actions input {
  background: var(--bg-tertiary, #1a1a24);
  color: var(--text-primary, #e0e0e0);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius-sm, 8px);
  padding: 6px 10px;
  font-size: 12px;
  outline: none;
}

.check-card-actions input {
  flex: 1;
}

.resolve-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-primary, #00ff88);
  color: #0a0a0f;
  border: none;
  border-radius: var(--radius-sm, 8px);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition, all 0.2s ease);
}

.resolve-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.resolve-btn:hover:not(:disabled) {
  background: var(--accent-secondary, #00cc6a);
}

.compliance-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
}

.compliance-pagination button {
  background: var(--bg-tertiary, #1a1a24);
  border: 1px solid var(--border-color, #2a2a3a);
  color: var(--text-primary, #e0e0e0);
  border-radius: var(--radius-sm, 8px);
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

.compliance-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sar-info {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 255, 136, 0.05);
  border: 1px solid rgba(0, 255, 136, 0.15);
  border-radius: var(--radius, 12px);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-secondary, #888899);
}

.sar-reports-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sar-card {
  background: var(--bg-secondary, #12121a);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius, 12px);
  padding: 16px;
}

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

.sar-seller {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.sar-risk {
  font-size: 14px;
  font-weight: 700;
}

.sar-body {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary, #888899);
}

.scan-form {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.scan-type-toggle {
  display: flex;
  gap: 4px;
}

.scan-type-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-tertiary, #1a1a24);
  border: 1px solid var(--border-color, #2a2a3a);
  color: var(--text-secondary, #888899);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  transition: var(--transition, all 0.2s ease);
}

.scan-type-btn.active {
  background: rgba(0, 255, 136, 0.08);
  border-color: var(--accent-primary, #00ff88);
  color: var(--accent-primary, #00ff88);
}

.scan-input {
  flex: 1;
  min-width: 200px;
  background: var(--bg-tertiary, #1a1a24);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius-sm, 8px);
  padding: 8px 14px;
  color: var(--text-primary, #e0e0e0);
  font-size: 14px;
  outline: none;
}

.scan-input:focus {
  border-color: var(--accent-primary, #00ff88);
}

.scan-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-primary, #00ff88);
  color: #0a0a0f;
  border: none;
  border-radius: var(--radius-sm, 8px);
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition, all 0.2s ease);
}

.scan-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.scan-btn:hover:not(:disabled) {
  background: var(--accent-secondary, #00cc6a);
}

.scan-result {
  background: var(--bg-secondary, #12121a);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius, 12px);
  padding: 16px;
}

.scan-result.scan-error {
  border-color: var(--danger, #ff4757);
}

.scan-error-msg {
  color: var(--danger, #ff4757);
  font-size: 14px;
}

.scan-result-header {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  margin-bottom: 8px;
}

.scan-result-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border-color, #2a2a3a);
}

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

.scan-action {
  color: var(--warning, #ffa502);
  font-weight: 600;
}
.admin-items {
  height: 100%;
  overflow-y: auto;
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px;
}

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

.admin-items-header h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.admin-items-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
}

.admin-items-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255, 71, 87, 0.1);
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-radius: var(--radius);
  color: var(--danger);
  font-size: 14px;
  margin-bottom: 20px;
}

.admin-items-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.admin-items-search {
  flex: 1;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: var(--transition);
}

.admin-items-search:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.15);
}

.admin-items-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
}

.admin-items-search-input::placeholder {
  color: var(--text-muted);
}

.admin-items-filter {
  display: flex;
  gap: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 4px;
}

.admin-items-filter-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}

.admin-items-filter-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.admin-items-filter-btn.active {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.admin-items-sort {
  padding: 8px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: var(--transition);
}

.admin-items-sort:focus {
  border-color: var(--accent-primary);
}

.admin-items-results {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.admin-items-count {
  font-size: 13px;
  color: var(--text-secondary);
}

.admin-items-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-items-page {
  font-size: 13px;
  color: var(--text-secondary);
}

.admin-items-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  gap: 8px;
  color: var(--text-secondary);
}

.admin-items-empty p {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 8px 0 0;
}

.admin-items-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.admin-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-items-table th {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-color);
}

.admin-items-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  vertical-align: middle;
}

.admin-items-table tr:hover td {
  background: var(--bg-hover);
}

.admin-item-row--inactive td {
  opacity: 0.6;
}

.admin-item-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}

.admin-item-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.admin-item-thumb-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
}

.admin-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-item-name {
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-item-type {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: capitalize;
}

.admin-item-shop {
  min-width: 80px;
}

.admin-shop-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
}

.admin-shop-badge.active {
  background: rgba(0, 255, 136, 0.1);
  color: var(--success);
}

.admin-shop-badge.suspended {
  background: rgba(255, 71, 87, 0.1);
  color: var(--danger);
}

.admin-item-seller {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-secondary);
}

.admin-item-price {
  white-space: nowrap;
  font-weight: 600;
}

.admin-item-price small {
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 4px;
  font-size: 11px;
}

.admin-item-sales {
  text-align: center;
  font-weight: 500;
}

.admin-item-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
}

.admin-item-status.active {
  background: rgba(0, 255, 136, 0.15);
  color: var(--success);
}

.admin-item-status.inactive {
  background: rgba(255, 71, 87, 0.15);
  color: var(--danger);
}

.admin-item-date {
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-secondary);
}

.admin-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 768px) {
  .admin-items {
    padding: 20px 16px;
  }

  .admin-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-items-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-items-search {
    min-width: unset;
  }

  .admin-items-header {
    flex-direction: column;
    gap: 4px;
  }

  .admin-stat-value {
    font-size: 17px;
  }

  .admin-items-table th:nth-child(n+5),
  .admin-items-table td:nth-child(n+5) {
    display: none;
  }
}

@media (max-width: 480px) {
  .admin-stats {
    grid-template-columns: 1fr;
  }
}.admin-orders {
  height: 100%;
  overflow-y: auto;
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px;
}

.admin-orders-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.admin-orders-header h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.admin-orders-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
}

.admin-orders-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255, 71, 87, 0.1);
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-radius: var(--radius);
  color: var(--danger);
  font-size: 14px;
  margin-bottom: 20px;
}

.admin-orders-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.admin-orders-search {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: var(--transition);
}

.admin-orders-search:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.15);
}

.admin-orders-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
}

.admin-orders-search-input::placeholder {
  color: var(--text-muted);
}

.admin-orders-select {
  padding: 8px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: var(--transition);
}

.admin-orders-select:focus {
  border-color: var(--accent-primary);
}

.admin-orders-results {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.admin-orders-count {
  font-size: 13px;
  color: var(--text-secondary);
}

.admin-orders-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-orders-page {
  font-size: 13px;
  color: var(--text-secondary);
}

.admin-orders-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  gap: 8px;
  color: var(--text-secondary);
}

.admin-orders-empty p {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 8px 0 0;
}

.admin-orders-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.admin-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-orders-table th {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 14px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-color);
}

.admin-orders-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  vertical-align: middle;
}

.admin-orders-table tr:hover td {
  background: var(--bg-hover);
}

.admin-order-number {
  font-family: monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-primary);
}

.admin-order-item-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
}

.admin-order-thumb {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.admin-order-thumb-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
}

.admin-order-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
  font-weight: 500;
}

.admin-order-user {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-secondary);
}

.admin-order-total {
  white-space: nowrap;
  font-weight: 600;
}

.admin-order-total small {
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 4px;
  font-size: 11px;
}

.admin-order-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: capitalize;
  display: inline-block;
}

.admin-order-status.completed,
.admin-order-status.delivered {
  background: rgba(0, 255, 136, 0.15);
  color: var(--success);
}

.admin-order-status.pending {
  background: rgba(255, 165, 2, 0.15);
  color: var(--warning);
}

.admin-order-status.refunded {
  background: rgba(136, 136, 153, 0.15);
  color: var(--text-secondary);
}

.admin-order-status.cancelled {
  background: rgba(255, 71, 87, 0.15);
  color: var(--danger);
}

.admin-order-dispute {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: capitalize;
  display: inline-block;
}

.admin-order-dispute.open {
  background: rgba(255, 71, 87, 0.15);
  color: var(--danger);
}

.admin-order-dispute.resolved {
  background: rgba(0, 255, 136, 0.15);
  color: var(--success);
}

.admin-order-dispute.none {
  color: var(--text-muted);
}

.admin-order-date {
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-secondary);
}

.admin-order-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 768px) {
  .admin-orders {
    padding: 20px 16px;
  }

  .admin-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-orders-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-orders-search {
    min-width: unset;
  }

  .admin-orders-header {
    flex-direction: column;
    gap: 4px;
  }

  .admin-stat-value {
    font-size: 17px;
  }

  .admin-orders-table th:nth-child(n+6),
  .admin-orders-table td:nth-child(n+6) {
    display: none;
  }
}

@media (max-width: 480px) {
  .admin-stats {
    grid-template-columns: 1fr;
  }
}.seller-terms {
  height: 100%;
  overflow-y: auto;
  display: flex;
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 24px;
  
  gap: 32px;
}

.terms-toc {
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.terms-toc-header {
  margin-bottom: 16px;
}

.terms-toc-header h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.terms-toc-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.terms-toc-link {
  display: block;
  text-align: left;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.terms-toc-link:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.terms-toc-link.active {
  color: var(--accent-primary);
  background: rgba(0, 255, 136, 0.08);
}

.terms-content {
  flex: 1;
  min-width: 0;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding-right: 8px;
}

.terms-header {
  margin-bottom: 40px;
}

.terms-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
  line-height: 1.3;
}

.terms-updated {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 16px;
}

.terms-intro-text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.terms-section {
  padding-top: 32px;
  margin-bottom: 8px;
}

.terms-section[data-section] {
  scroll-margin-top: 80px;
}

.terms-h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.terms-h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 20px 0 10px;
}

.terms-section p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0 0 12px;
}

.terms-section strong {
  color: var(--text-primary);
  font-weight: 600;
}

.terms-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.terms-list li {
  position: relative;
  padding: 8px 0 8px 20px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.terms-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-primary);
}

.terms-list--ordered {
  counter-reset: terms-counter;
}

.terms-list--ordered li {
  padding-left: 28px;
  counter-increment: terms-counter;
}

.terms-list--ordered li::before {
  content: counter(terms-counter);
  left: 0;
  top: 8px;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-primary);
}

.terms-highlight {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(0, 255, 136, 0.06);
  border: 1px solid rgba(0, 255, 136, 0.15);
  border-radius: 10px;
  margin: 16px 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.terms-highlight--danger {
  background: rgba(255, 71, 87, 0.06);
  border-color: rgba(255, 71, 87, 0.2);
  color: var(--text-secondary);
}

.terms-highlight span {
  flex: 1;
}

.agreement-section {
  margin-top: 40px;
  padding: 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  text-align: center;
}

.agreement-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}

.agreement-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-primary);
  cursor: pointer;
}

.agreement-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  background: var(--accent-primary);
  color: var(--bg-primary);
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}

.agreement-btn:hover:not(:disabled) {
  background: #00dd77;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

.agreement-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .seller-terms {
    flex-direction: column;
    padding: 20px 16px;
  }

  .terms-toc {
    width: 100%;
    position: static;
    max-height: none;
    overflow-y: visible;
    display: none;
  }

  .terms-content {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }

  .terms-header h1 {
    font-size: 22px;
  }

  .terms-h2 {
    font-size: 17px;
  }

  .agreement-section {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .terms-section p,
  .terms-list li {
    font-size: 13px;
  }
}
.bo {
  height: 100%;
  overflow-y: auto;
  background: var(--bg-primary, #0a0a0f);
  color: var(--text-primary, #e0e0e8);
  
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.bo-loading,
.bo-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  gap: 16px;
  color: var(--text-secondary, #9999aa);
}

.bo-loading {
  flex-direction: row;
  gap: 12px;
}

.bo-loading__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color, #2a2a3a);
  border-top-color: #00ff88;
  border-radius: 50%;
  animation: bo-spin 0.8s linear infinite;
}

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

.bo-error {
  flex-direction: row;
  gap: 10px;
}

.bo-error__retry {
  background: var(--accent-primary, #00ff88);
  color: var(--bg-primary, #0a0a0f);
  border: none;
  padding: 8px 20px;
  border-radius: var(--radius-sm, 8px);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition, all 0.2s ease);
  margin-left: 8px;
}

.bo-error__retry:hover {
  background: var(--accent-secondary, #00cc6e);
  box-shadow: 0 4px 16px rgba(0, 255, 136, 0.3);
}

.bo-header {
  margin-bottom: 28px;
}

.bo-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.bo-header__title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-primary, #e0e0e8);
  margin: 0;
  letter-spacing: -0.02em;
}

.bo-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.bo-search__icon {
  position: absolute;
  left: 14px;
  color: var(--text-muted, #555566);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.bo-search__input {
  background: var(--bg-tertiary, #1a1a28);
  border: 1px solid var(--border-color, #2a2a3a);
  color: var(--text-primary, #e0e0e8);
  padding: 10px 16px 10px 42px;
  border-radius: 100px;
  font-size: 0.88rem;
  width: 260px;
  transition: var(--transition, all 0.2s ease);
  font-family: inherit;
}

.bo-search__input::placeholder {
  color: var(--text-muted, #555566);
}

.bo-search__input:focus {
  outline: none;
  border-color: var(--accent-primary, #00ff88);
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.12);
}

.bo-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.bo-filters::-webkit-scrollbar {
  display: none;
}

.bo-filter-pill {
  background: var(--bg-tertiary, #1a1a28);
  color: var(--text-secondary, #9999aa);
  border: 1px solid var(--border-color, #2a2a3a);
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition, all 0.2s ease);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}

.bo-filter-pill:hover {
  background: var(--bg-hover, #22222e);
  color: var(--text-primary, #e0e0e8);
  border-color: rgba(255, 255, 255, 0.08);
}

.bo-filter-pill--active {
  background: var(--accent-primary, #00ff88);
  color: var(--bg-primary, #0a0a0f);
  border-color: var(--accent-primary, #00ff88);
  font-weight: 700;
}

.bo-filter-pill--active:hover {
  background: var(--accent-secondary, #00cc6e);
  color: var(--bg-primary, #0a0a0f);
  border-color: var(--accent-secondary, #00cc6e);
}

.bo-filter-pill__count {
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 7px;
  border-radius: 100px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}

.bo-filter-pill--active .bo-filter-pill__count {
  background: rgba(10, 10, 15, 0.15);
}

.bo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.bo-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg-secondary, #12121c);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius, 14px);
  cursor: pointer;
  transition: var(--transition, all 0.2s ease);
}

.bo-card:hover {
  background: var(--bg-hover, #1a1a2e);
  border-color: rgba(0, 255, 136, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 255, 136, 0.08);
  transform: translateY(-2px);
}

.bo-card__thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm, 10px);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  background: var(--bg-tertiary, #1a1a28);
}

.bo-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.bo-card:hover .bo-card__thumb img {
  transform: scale(1.05);
}

.bo-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #555566);
  background: linear-gradient(135deg, var(--bg-tertiary, #1a1a28), var(--bg-secondary, #12121c));
}

.bo-card__type-badge {
  position: absolute;
  bottom: 3px;
  right: 3px;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.75);
  color: #00ff88;
  backdrop-filter: blur(4px);
}

.bo-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bo-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bo-card__name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary, #e0e0e8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.bo-card__status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: 1px solid;
  flex-shrink: 0;
  white-space: nowrap;
}

.bo-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--text-muted, #555566);
}

.bo-card__seller {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary, #9999aa);
  font-weight: 500;
}

.bo-card__order-num {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.72rem;
  color: var(--text-muted, #444455);
  letter-spacing: 0.02em;
}

.bo-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bo-card__price {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--accent-primary, #00ff88);
  letter-spacing: -0.02em;
}

.bo-card__date {
  font-size: 0.75rem;
  color: var(--text-muted, #555566);
}

.bo-card__chevron {
  color: var(--text-muted, #444455);
  flex-shrink: 0;
  transition: var(--transition, all 0.2s ease);
}

.bo-card:hover .bo-card__chevron {
  color: var(--accent-primary, #00ff88);
  transform: translateX(2px);
}

.bo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 60px 20px;
  gap: 8px;
}

.bo-empty__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(0, 255, 136, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #555566);
  margin-bottom: 8px;
}

.bo-empty h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-secondary, #9999aa);
  margin: 0;
}

.bo-empty p {
  font-size: 0.9rem;
  color: var(--text-muted, #555566);
  margin: 0 0 16px;
}

.bo-empty__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--accent-primary, #00ff88);
  color: var(--bg-primary, #0a0a0f);
  border: none;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition, all 0.2s ease);
  font-family: inherit;
}

.bo-empty__cta:hover {
  background: var(--accent-secondary, #00cc6e);
  box-shadow: 0 4px 20px rgba(0, 255, 136, 0.3);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .bo {
    padding: 20px 16px 60px;
  }

  .bo-search__input {
    width: 200px;
  }

  .bo-card {
    padding: 14px 16px;
    gap: 14px;
  }

  .bo-card__thumb {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 600px) {
  .bo {
    padding: 16px 12px 48px;
  }

  .bo-header__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .bo-header__title {
    font-size: 1.4rem;
  }

  .bo-search-wrap {
    width: 100%;
  }

  .bo-search__input {
    width: 100%;
  }

  .bo-card {
    padding: 12px 14px;
    gap: 12px;
  }

  .bo-card__thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm, 8px);
  }

  .bo-card__name {
    font-size: 0.85rem;
  }

  .bo-card__meta {
    gap: 8px;
    font-size: 0.72rem;
  }

  .bo-card__bottom {
    flex-wrap: wrap;
    gap: 4px;
  }

  .bo-card__chevron {
    display: none;
  }

  .bo-filters {
    gap: 6px;
  }

  .bo-filter-pill {
    padding: 7px 14px;
    font-size: 0.78rem;
  }
}

@media (min-width: 768px) {
  .bo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}@keyframes navIndicatorSlide {
  0% { transform: scaleX(0.8); }
  100% { transform: scaleX(1); }
}

@keyframes drawerSlideIn {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}

@keyframes drawerSlideOut {
  0% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.store-app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #0a0a0f);
  color: var(--text-primary, #e0e0e0);
  overflow: hidden;
}

.store-app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  min-height: 56px;
  padding: 0 24px;
  background: rgba(18, 18, 26, 0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-color, #2a2a3a);
}

.store-app-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.1), transparent);
  pointer-events: none;
}

.store-app-header-left {
  display: flex;
  align-items: center;
  gap: 28px;
}

.store-app-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: var(--accent-primary, #00ff88);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm, 8px);
  transition: var(--transition, all 0.2s ease);
  position: relative;
}

.store-app-logo:hover {
  background: rgba(0, 255, 136, 0.06);
}

.store-logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 255, 136, 0.05));
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.store-logo-text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.store-app-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.03));
  border-radius: 10px;
  padding: 3px;
  position: relative;
}

.store-nav-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--text-secondary, #888899);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 7px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.store-nav-btn:hover {
  color: var(--text-primary, #e0e0e0);
  background: rgba(255, 255, 255, 0.04);
}

.store-nav-btn.active {
  color: var(--accent-primary, #00ff88);
  background: rgba(0, 255, 136, 0.08);
}

.store-nav-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  background: #00ff88;
  border-radius: 1px;
  animation: navIndicatorSlide 0.2s ease;
}

.store-nav-icon {
  font-size: 16px;
  line-height: 1;
}

.store-app-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.store-credit-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 255, 136, 0.06) 100%);
  border: 1px solid rgba(0, 255, 136, 0.25);
  border-radius: 20px;
  padding: 5px 14px 5px 10px;
  color: var(--accent-primary, #00ff88);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-variant-numeric: tabular-nums;
}

.store-credit-pill:hover {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.2) 0%, rgba(0, 255, 136, 0.1) 100%);
  border-color: var(--accent-primary, #00ff88);
  box-shadow: 0 0 16px rgba(0, 255, 136, 0.12);
}

.store-currency-select {
  background: var(--bg-tertiary, #1a1a24);
  color: var(--text-primary, #e0e0e0);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888899' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}

.store-currency-select:hover {
  border-color: var(--accent-primary, #00ff88);
}

.store-currency-select:focus {
  border-color: var(--accent-primary, #00ff88);
  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.15);
}

.store-currency-select option {
  background: var(--bg-secondary, #12121a);
  color: var(--text-primary, #e0e0e0);
}

.store-nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--border-color, #2a2a3a);
  color: var(--text-secondary, #888899);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 8px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.store-nav-link:hover {
  color: var(--text-primary, #e0e0e0);
  border-color: var(--text-secondary, #555566);
  background: rgba(255, 255, 255, 0.03);
}

.store-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--bg-tertiary, #1a1a24);
  border: 1px solid var(--border-color, #2a2a3a);
}

.store-username {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #e0e0e0);
}

.store-icon {
  color: currentColor;
  flex-shrink: 0;
}

.store-icon svg {
  display: block;
}

.store-app-main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.store-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: 8px;
  color: var(--text-secondary, #888899);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.store-mobile-toggle:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.04));
  color: var(--text-primary, #e0e0e0);
}

.store-mobile-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 199;
  animation: fadeIn 0.2s ease;
}

.store-mobile-drawer-overlay.open {
  display: block;
}

.store-mobile-drawer {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  background: var(--bg-secondary, #12121a);
  border-left: 1px solid var(--border-color, #2a2a3a);
  z-index: 200;
  padding: 20px;
  animation: drawerSlideIn 0.25s ease;
  overflow-y: auto;
}

.store-mobile-drawer.open {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.store-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color, #2a2a3a);
}

.store-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  color: var(--text-secondary, #888899);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.store-drawer-close:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.04));
  color: var(--text-primary, #e0e0e0);
}

.store-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.store-drawer-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: var(--text-secondary, #888899);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 8px;
  transition: all 0.15s ease;
  text-align: left;
  width: 100%;
}

.store-drawer-nav-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary, #e0e0e0);
}

.store-drawer-nav-btn.active {
  color: var(--accent-primary, #00ff88);
  background: rgba(0, 255, 136, 0.08);
}

.store-drawer-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color, #2a2a3a);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.store-drawer-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted, #666677);
  padding: 0 14px;
}

.store-drawer-link {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: var(--text-secondary, #888899);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 8px;
  transition: all 0.15s ease;
  text-align: left;
  width: 100%;
  text-decoration: none;
}

.store-drawer-link:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary, #e0e0e0);
}

.store-drawer-balance {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 255, 136, 0.03));
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 10px;
  padding: 12px 16px;
  color: #00ff88;
  margin-top: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.store-drawer-balance:hover {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 255, 136, 0.06));
}

@media (max-width: 900px) {
  .store-app-nav {
    display: none;
  }

  .store-mobile-toggle {
    display: flex;
  }

  .store-nav-link .store-nav-label {
    display: none;
  }

  .store-logo-text {
    display: none;
  }
}

@media (max-width: 768px) {
  .store-app-header {
    padding: 0 14px;
    height: 52px;
    min-height: 52px;
  }

  .store-app-header-left {
    gap: 8px;
  }

  .store-app-header-right {
    gap: 8px;
  }

  .store-credit-pill {
    padding: 4px 10px 4px 8px;
    font-size: 12px;
  }

  .store-user-info {
    padding: 4px 8px;
  }

  .store-username {
    font-size: 12px;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .store-username {
    display: none;
  }

  .store-nav-link {
    padding: 6px 10px;
  }
}/* VERTEX Platform Styles v2.2 - Enhanced */
:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-tertiary: #1a1a24;
  --bg-hover: #22222e;
  --bg-quaternary: #2a2a38;
  --accent-primary: #00ff88;
  --accent-secondary: #00cc6a;
  --accent-glow: rgba(0, 255, 136, 0.3);
  --accent-subtle: rgba(0, 255, 136, 0.1);
  --text-primary: #e0e0e0;
  --text-secondary: #888899;
  --text-muted: #555566;
  --text-on-accent: #1a1a2e;
  --border-color: #2a2a3a;
  --border-light: #3a3a4a;
  --danger: #ff4757;
  --danger-subtle: rgba(255, 71, 87, 0.15);
  --warning: #ffa502;
  --warning-subtle: rgba(255, 165, 2, 0.15);
  --success: #00ff88;
  --success-subtle: rgba(0, 255, 136, 0.15);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --transition: all 0.2s ease;
  --transition-fast: all 0.1s ease;
  --transition-slow: all 0.3s ease;
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px var(--accent-glow);
}

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

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  scroll-behavior: smooth;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  position: relative;
  -webkit-text-size-adjust: 100%;
}

#root {
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  background: var(--bg-primary);
}

.layout {
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  background: var(--bg-primary);
}

.main-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  min-width: 0;
}

.main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg-primary);
  position: relative;
}

.sidebar {
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  height: 100%;
  flex-shrink: 0;
  flex-grow: 0 !important;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  text-shadow: 0 0 10px var(--accent-glow);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  transition: var(--transition);
  touch-action: manipulation;
}

input, textarea, select {
  font-family: inherit;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  outline: none;
  transition: var(--transition);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

input::placeholder, textarea::placeholder {
  color: var(--text-muted);
}

select {
  cursor: pointer;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
  cursor: pointer;
  border: none;
  outline: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  transition: var(--transition);
  cursor: pointer;
  border: none;
  outline: none;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.2s;
}

.btn:hover::before {
  opacity: 1;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  color: var(--bg-primary);
  box-shadow: var(--shadow-sm), 0 0 20px var(--accent-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.btn-danger {
  background: linear-gradient(135deg, var(--danger) 0%, #cc3344 100%);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-sm);
}

.btn-danger:hover {
  filter: brightness(1.1);
  box-shadow: var(--shadow-md);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: none;
}

.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Input enhancements */
input, textarea {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 12px 16px;
  font-size: 14px;
  transition: var(--transition);
  outline: none;
}

input:focus, textarea:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-subtle), var(--shadow-sm);
}

input::placeholder, textarea::placeholder {
  color: var(--text-muted);
}

/* Card styling */
.card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 20px;
  transition: var(--transition);
}

.card:hover {
  border-color: var(--border-light);
  box-shadow: var(--shadow-md);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Panel styling */
.panel {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.panel-header {
  padding: 16px 20px;
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  border-bottom: 1px solid var(--border-color);
}

/* Badge enhancements */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.badge-success {
  background: var(--success-subtle);
  color: var(--success);
}

.badge-warning {
  background: var(--warning-subtle);
  color: var(--warning);
}

.badge-danger {
  background: var(--danger-subtle);
  color: var(--danger);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Global scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

/* ============================================
   COMPREHENSIVE RESPONSIVE MEDIA QUERIES
   ============================================ */

/* Small phones (320px - 479px) - fluid responsive */
@media screen and (max-width: 479px) {
  :root {
    font-size: 12px;
  }
  
  html, body, #root, .layout {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  
  .sidebar {
    width: 60px;
    min-width: 60px;
    position: relative;
    display: flex;
  }
  
  .main-content {
    width: 100%;
    height: 100%;
  }
  
  .server-sidebar {
    width: 56px;
    min-width: 56px;
    padding: 4px 0;
  }
  
  .server-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 14px;
  }
  
  .channel-list {
    width: 100%;
    position: relative;
  }
  
  .messages-container {
    padding: 8px;
  }
  
  .message {
    padding: 6px 8px;
    gap: 8px;
  }
  
  .message-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
  
  .message-content {
    font-size: 13px;
  }
  
  .message-input-container {
    padding: 8px;
    gap: 6px;
  }
  
  .message-input {
    padding: 10px 12px;
    font-size: 13px;
  }
  
  .dm-page {
    flex-direction: row;
  }
  
  .dm-sidebar {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  .dm-chat {
    width: 100%;
  }
  
  .modal-content {
    width: 95%;
    max-width: none;
    padding: 16px;
    margin: 10px;
    border-radius: 12px;
  }
  
  .modal-header {
    padding: 12px 0;
  }
  
  .modal-title {
    font-size: 18px;
  }
  
  .form-input, .form-textarea, .form-select {
    padding: 10px 12px;
    font-size: 14px;
  }
  
  .btn {
    padding: 10px 16px;
    font-size: 13px;
  }
  
  .settings-header {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px;
  }
  
  .settings-tabs {
    overflow-x: auto;
    padding: 8px;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
  }
  
  .settings-tab {
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
  }
  
  .settings-content {
    padding: 12px;
  }
  
  .form-group {
    margin-bottom: 16px;
  }
  
  .server-settings-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .channel-item {
    padding: 8px 10px;
    gap: 6px;
    font-size: 13px;
  }
  
  .user-mention {
    padding: 2px 6px;
    font-size: 12px;
  }
  
  .link-preview {
    max-width: 100%;
  }
  
  .upload-preview {
    max-width: 150px;
    max-height: 150px;
  }
  
  .emoji-picker {
    width: 90%;
    max-width: 300px;
    left: 5%;
    right: 5%;
  }
  
  .context-menu {
    min-width: 160px;
    max-width: 90%;
  }
  
  .toast-container {
    left: 10px;
    right: 10px;
    bottom: 20px;
  }
}

/* Large phones (480px - 767px) */
@media screen and (min-width: 480px) and (max-width: 767px) {
  :root {
    font-size: 13px;
  }
  
  .sidebar {
    display: none;
    position: fixed;
    z-index: 1000;
    width: 240px;
    height: 100%;
  }
  
  .sidebar.open {
    display: flex;
  }
  
  .server-sidebar {
    width: 60px;
    min-width: 60px;
  }
  
  .server-icon {
    width: 44px;
    height: 44px;
  }
  
  .channel-list {
    width: 200px;
    min-width: 200px;
  }
  
  .message-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
  
  .dm-sidebar {
    width: 220px;
    min-width: 220px;
  }
  
  .modal-content {
    width: 90%;
    max-width: 420px;
  }
  
  .settings-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  
  .settings-content {
    padding: 16px;
  }
}

/* Tablets (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  :root {
    font-size: 14px;
  }
  
  .sidebar {
    width: 220px;
    min-width: 220px;
  }
  
  .server-sidebar {
    width: 64px;
    min-width: 64px;
  }
  
  .server-icon {
    width: 46px;
    height: 46px;
  }
  
  .channel-list {
    width: 200px;
    min-width: 200px;
  }
  
  .message-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }
  
  .dm-sidebar {
    width: 240px;
    min-width: 240px;
  }
  
  .settings-header {
    padding: 16px;
  }
  
  .settings-content {
    padding: 20px;
  }
  
  .modal-content {
    max-width: 540px;
  }
}

/* Small laptops (1024px - 1279px) */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .sidebar {
    width: 240px;
    min-width: 240px;
  }
  
  .server-sidebar {
    width: 68px;
    min-width: 68px;
  }
  
  .channel-list {
    width: 220px;
    min-width: 220px;
  }
  
  .dm-sidebar {
    width: 260px;
    min-width: 260px;
  }
}

/* Standard desktops (1280px - 1535px) */
@media screen and (min-width: 1280px) and (max-width: 1535px) {
  :root {
    font-size: 15px;
  }
  
  .sidebar {
    width: 260px;
    min-width: 260px;
  }
  
  .server-sidebar {
    width: 72px;
    min-width: 72px;
  }
  
  .channel-list {
    width: 240px;
    min-width: 240px;
  }
  
  .dm-sidebar {
    width: 280px;
    min-width: 280px;
  }
  
  .message-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
}

/* Large desktops (1536px+) */
@media screen and (min-width: 1536px) {
  :root {
    font-size: 16px;
  }
  
  .sidebar {
    width: 280px;
    min-width: 280px;
  }
  
  .channel-list {
    width: 260px;
    min-width: 260px;
  }
  
  .dm-sidebar {
    width: 300px;
    min-width: 300px;
  }
  
  .message {
    padding: 12px 16px;
  }
  
  .message-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }
  
  .message-input {
    padding: 14px 18px;
  }
}

/* Landscape orientation on phones/tablets */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .sidebar-header {
    padding: 8px 12px;
  }
  
  .logo-text {
    font-size: 12px;
  }
  
  .nav-item {
    padding: 6px 10px;
  }
  
  .channel-item {
    padding: 4px 8px;
  }
  
  .message {
    padding: 4px 6px;
  }
  
  .message-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }
  
  .message-input-container {
    padding: 6px 8px;
  }
  
  .settings-header {
    padding: 8px 12px;
  }
  
  .settings-content {
    padding: 12px;
  }
}

/* Portrait orientation on tablets */
@media screen and (orientation: portrait) and (min-width: 768px) {
  .channel-list {
    width: 240px;
    min-width: 240px;
  }
  
  .dm-sidebar {
    width: 280px;
    min-width: 280px;
  }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .nav-item:hover,
  .channel-item:hover,
  .dm-item:hover,
  .message:hover,
  .settings-tab:hover {
    transform: none;
  }
  
  .btn:active,
  .nav-item:active,
  .channel-item:active,
  .dm-item:active {
    transform: scale(0.98);
  }
  
  .server-icon:hover {
    transform: none;
  }
  
  .server-icon:active {
    transform: scale(0.92);
  }
  
  .channel-item,
  .dm-item,
  .message {
    cursor: pointer;
  }
  
  /* Larger touch targets */
  .btn, 
  .nav-item,
  .channel-item,
  .settings-tab {
    min-height: 44px;
    min-width: 44px;
  }
  
  .message-input {
    min-height: 44px;
  }
  
  /* Hide scrollbars but allow scrolling */
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo-text {
    text-shadow: 0 0 10px var(--accent-glow);
  }
  
  .message-avatar,
  .server-icon {
    image-rendering: auto;
  }
}

/* Discord-quality image rendering for all chat content */
.message-text img,
.message-content img,
.msg-text img,
.fp-img,
.fp-lb-img,
.embed-image,
.embed-thumbnail,
.link-preview-image,
.message-attachment img,
.file-preview img {
  image-rendering: auto;
}

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

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* High contrast mode */
@media (prefers-contrast: more) {
  :root {
    --border-color: #444466;
    --text-secondary: #aaaacc;
  }
  
  .btn,
  .form-input,
  .form-textarea,
  .modal-content {
    border-width: 2px;
  }
  
  .message-input:focus,
  .form-input:focus {
    outline-width: 3px;
  }
}

/* Print styles */
@media print {
  .sidebar,
  .server-sidebar,
  .channel-list,
  .dm-sidebar,
  .message-input-container,
  .no-print {
    display: none !important;
  }
  
  .layout {
    display: block;
    height: auto;
  }
  
  .main-content {
    width: 100%;
    height: auto;
    overflow: visible;
  }
  
  body {
    background: white;
    color: black;
  }
  
  .message,
  .channel-item,
  .dm-item {
    break-inside: avoid;
  }
}


/* Image Viewer Modal */
.image-viewer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  cursor: pointer;
}

.image-viewer-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 0 50px rgba(0, 255, 136, 0.3);
}

.image-viewer-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--text-on-accent);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.image-viewer-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

/* Media Player enhancements */
.media-player {
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
  margin: 8px 0;
}

.image-attachment-wrapper {
  position: relative;
  display: inline-block;
}

.image-attachment-wrapper .attachment-image {
  cursor: zoom-in;
  transition: transform 0.2s;
}

.image-attachment-wrapper:hover .attachment-image {
  transform: scale(1.02);
}

.attachment-expand-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-on-accent);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.2s;
}

.image-attachment-wrapper:hover .attachment-expand-btn {
  opacity: 1;
}

.attachment-expand-btn:hover {
  background: rgba(0, 255, 136, 0.3);
  border-color: #00ff88;
}


/* Forward Menu */
.forward-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.forward-menu {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 20px;
  min-width: 380px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-color);
}

.forward-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.forward-menu-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 18px;
}

.forward-menu-header button {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
}

.forward-menu-header button:hover {
  color: var(--text-primary);
}

.forward-menu-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.forward-msg-preview {
  background: var(--bg-tertiary);
  padding: 12px;
  border-radius: 8px;
  border-left: 2px solid #fbbf24;
}

.forward-msg-author {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 4px;
}

.forward-preview {
  background: var(--bg-tertiary);
  padding: 12px;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0;
  word-break: break-word;
}

.forward-search {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
}

.forward-search:focus {
  border-color: var(--accent-primary);
}

.forward-search::placeholder {
  color: var(--text-muted);
}

.forward-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.forward-section h4 {
  margin: 8px 0 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.forward-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 8px;
  text-align: center;
}

.forward-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.forward-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s;
}

.forward-option:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.05));
  border-color: var(--accent-primary);
}

.forward-option-icon {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 16px;
}

.forward-option-name {
  color: var(--text-primary);
}
.custom-context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 220px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  animation: contextMenuFadeIn 0.15s ease-out;
}

@keyframes contextMenuFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.context-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.1s ease;
  text-align: left;
  gap: 10px;
}

.context-menu-item:hover:not(.disabled) {
  background: var(--accent-primary);
  color: var(--bg-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.context-menu-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.context-menu-item.danger {
  color: var(--danger);
}

.context-menu-item.danger:hover:not(.disabled) {
  background: var(--danger);
  color: var(--text-on-accent);
}

.menu-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menu-icon::after {
  content: none;
}

.menu-icon .lucide-icon {
  display: block;
  width: 16px;
  height: 16px;
}

.menu-emoji {
  display: block;
  line-height: 1;
}

.menu-icon.icon-server::after { background: linear-gradient(135deg, #7289da, #5b6eae); }
.menu-icon.icon-messages::after { background: linear-gradient(135deg, #00b4d8, #0096b4); }
.menu-icon.icon-friends::after { background: linear-gradient(135deg, #f04747, #d63031); }
.menu-icon.icon-add::after { background: linear-gradient(135deg, #43b581, #2d7d46); border-radius: 50%; }
.menu-icon.icon-search::after { background: transparent; border: 2px solid currentColor; border-radius: 50%; }
.menu-icon.icon-user::after { background: var(--accent-primary); border-radius: 50%; }
.menu-icon.icon-profile::after { background: var(--accent-primary); border-radius: 50%; }
.menu-icon.icon-dm::after { background: linear-gradient(135deg, #5865f2, #4752c4); }
.menu-icon.icon-copy::after { background: var(--text-muted); }
.menu-icon.icon-edit::after { background: #faa61a; }
.menu-icon.icon-delete::after { background: #f04747; }
.menu-icon.icon-report::after { background: #f04747; }
.menu-icon.icon-reply::after { background: var(--accent-primary); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.menu-icon.icon-thread::after { background: var(--accent-secondary); }
.menu-icon.icon-reaction::after { background: linear-gradient(135deg, #f04747, #faa61a); border-radius: 50%; }
.menu-icon.icon-remind::after { background: #faa61a; }
.menu-icon.icon-pin::after { background: #f04747; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.menu-icon.icon-mute::after { background: #f04747; }
.menu-icon.icon-kick::after { background: #f04747; clip-path: polygon(0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20%); }
.menu-icon.icon-ban::after { background: #f04747; clip-path: polygon(0 0, 100% 100%, 100% 80%, 60% 80%, 60% 30%, 40% 30%, 40% 80%, 0 80%); }
.menu-icon.icon-block::after { background: #f04747; }
.menu-icon.icon-warn::after { background: #faa61a; }
.menu-icon.icon-settings::after { background: #7289da; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.menu-icon.icon-logout::after { background: #f04747; clip-path: polygon(20% 0, 0 10%, 10% 20%, 30% 10%, 30% 90%, 10% 80%, 0 90%, 20% 100%, 100% 100%, 100% 0); }
.menu-icon.icon-status::after { background: var(--accent-primary); border-radius: 50%; }
.menu-icon.icon-refresh::after { background: #7289da; }
.menu-icon.icon-move::after { background: var(--accent-primary); }
.menu-icon.icon-browse::after { background: var(--accent-primary); }
.menu-icon.icon-download::after { background: var(--accent-primary); clip-path: polygon(0 0, 100% 0, 50% 80%); }
.menu-icon.icon-emoji::after { background: linear-gradient(135deg, #f04747, #faa61a); border-radius: 50%; }
.menu-icon.icon-games::after { background: linear-gradient(135deg, #7289da, #5b6eae); }
.menu-icon.icon-music::after { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
.menu-icon.icon-art::after { background: linear-gradient(135deg, #e91e63, #c2185b); }
.menu-icon.icon-tech::after { background: linear-gradient(135deg, #3498db, #2980b9); }

.menu-label {
  flex: 1;
}

.menu-shortcut {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.7;
}

.context-menu-item:hover .menu-shortcut {
  color: inherit;
}

.context-menu-divider {
  height: 1px;
  background: var(--border-color);
  margin: 6px 8px;
  opacity: 0.6;
}

/* Styled Emoji */
.styled-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.styled-emoji:hover {
  transform: scale(1.2);
}

.styled-emoji.animated {
  animation: emojiBounce 0.4s ease;
}

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

.styled-emoji.size-xs { font-size: 14px; }
.styled-emoji.size-sm { font-size: 18px; }
.styled-emoji.size-md { font-size: 24px; }
.styled-emoji.size-lg { font-size: 32px; }
.styled-emoji.size-xl { font-size: 48px; }

/* Emoji Picker */
.emoji-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  animation: pickerFadeIn 0.2s ease;
}

@keyframes pickerFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.emoji-picker {
  width: 360px;
  max-height: 420px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: pickerSlideIn 0.25s ease;
}

@keyframes pickerSlideIn {
  from { 
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.emoji-picker-header {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
}

.emoji-search {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.emoji-search:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.emoji-categories {
  display: flex;
  padding: 8px 12px;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
}

.category-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.category-btn:hover {
  background: var(--bg-hover);
  transform: scale(1.1);
}

.category-btn.active {
  background: var(--accent-primary);
  box-shadow: 0 0 12px var(--accent-glow);
}

/* Custom Emotes Section */
.custom-emotes-section {
  border-bottom: 1px solid var(--border-color);
  padding: 8px 12px;
}

.custom-emotes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.server-name {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.custom-emotes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 100px;
  overflow-y: auto;
}

.custom-emote-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  overflow: hidden;
}

.custom-emote-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.custom-emote-btn img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.category-btn.active {
  background: var(--accent-primary);
  box-shadow: 0 0 12px var(--accent-glow);
}

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

.emoji-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 22px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.emoji-btn:hover {
  background: var(--bg-hover);
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.emoji-btn:active {
  transform: scale(0.95);
}

/* Message Context Menu Specific Styles */
.message.context-menu-active {
  background: var(--bg-secondary);
  box-shadow: inset 0 0 0 2px var(--accent-primary);
}

/* User Avatar Context Menu */
.user-context-avatar {
  position: relative;
  cursor: context-menu;
}

.user-context-avatar::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}

.user-context-avatar:hover::after {
  border-color: var(--accent-primary);
}

/* Reaction Styling */
.reaction.styled {
  background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
  overflow: hidden;
}

.reaction.styled::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.reaction.styled:hover {
  background: var(--accent-primary);
  color: var(--bg-primary);
  box-shadow: 0 0 16px var(--accent-glow);
}

/* Channel Context Menu */
.channel-item {
  position: relative;
  cursor: context-menu;
}

.channel-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--accent-primary);
  border-radius: 0 2px 2px 0;
  transition: height 0.2s ease;
}

.channel-item:hover::before {
  height: 60%;
}

/* Server Member Context Menu */
.server-member-item {
  position: relative;
  cursor: context-menu;
}

.server-member-item:hover {
  background: linear-gradient(90deg, var(--accent-primary) 0%, transparent 100%);
}

/* Rich Menu Items */
.rich-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  transition: all 0.15s ease;
}

.rich-menu-item .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.rich-menu-item .info {
  flex: 1;
  min-width: 0;
}

.rich-menu-item .name {
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rich-menu-item .sub {
  font-size: 11px;
  color: var(--text-muted);
}

/* Scrolling for long menus */
.context-menu-scroll {
  max-height: 300px;
  overflow-y: auto;
  padding: 4px 0;
}

.context-menu-scroll::-webkit-scrollbar {
  width: 6px;
}

.context-menu-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.context-menu-scroll::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

/* Hover effects for different contexts */
.context-menu-item[data-context="message"]:hover {
  background: linear-gradient(90deg, var(--accent-primary), transparent);
}

.context-menu-item[data-context="user"]:hover {
  background: linear-gradient(90deg, #8b5cf6, transparent);
}

.context-menu-item[data-context="channel"]:hover {
  background: linear-gradient(90deg, #10b981, transparent);
}

.context-menu-item[data-context="server"]:hover {
  background: linear-gradient(90deg, #f59e0b, transparent);
}
.members-panel-wrapper {
  width: 260px;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.2s ease, border-color 0.2s ease;
}

.members-panel-wrapper.collapsed {
  width: 0;
  border-left-color: transparent;
}

.members-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 32px;
  cursor: pointer;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
  border-bottom: 1px solid var(--border-color);
}

.members-toggle:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.collapsed .members-toggle {
  border-bottom: none;
}

.members-show-btn {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 8px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-right: none;
  border-radius: 8px 0 0 8px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  z-index: 100;
  transition: color 0.15s, background 0.15s;
}

.members-show-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.members-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.members-sidebar-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 16px;
}

.members-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 12px;
  flex-shrink: 0;
}

.members-header h3 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
  letter-spacing: 0.5px;
}

.member-count {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 1px 7px;
  border-radius: 8px;
}

.members-search {
  padding: 0 16px 8px;
  flex-shrink: 0;
}

.members-search input {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-tertiary);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.members-search input:focus {
  border-color: var(--accent-primary);
}

.members-search input::placeholder {
  color: var(--text-muted);
}

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

.member-group-header {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 16px 4px;
  letter-spacing: 0.5px;
}

.member-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 12px;
  margin: 0 4px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s;
}

.member-item:hover {
  background: var(--bg-hover);
}

.member-item.offline {
  opacity: 0.5;
}

.member-item.offline:hover {
  opacity: 1;
}

.member-item > div:first-child {
  position: relative;
  flex-shrink: 0;
  line-height: 0;
}

.member-item .status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2.5px solid var(--bg-secondary);
}

.member-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.member-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.member-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-item .username-component {
  font-size: 13px;
}

.member-status-text {
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.member-badges {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  align-items: center;
}

.member-badge-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, filter 0.2s ease;
  cursor: default;
}

.member-badge-icon svg {
  width: 12px;
  height: 12px;
}

.member-badge-icon:hover {
  transform: scale(1.3);
  filter: brightness(1.3) drop-shadow(0 0 4px currentColor);
}

.typing-indicator {
  font-size: 10px;
  color: var(--accent-primary);
  font-style: italic;
  animation: pulse 1.5s ease-in-out infinite;
}

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

.more-members {
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 16px 4px;
  text-align: center;
  cursor: pointer;
}

.more-members:hover {
  color: var(--accent-primary);
}

.members-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
}

.members-empty p {
  font-size: 13px;
  margin: 0;
}

/* Scrollbar */
.members-list::-webkit-scrollbar {
  width: 4px;
}

.members-list::-webkit-scrollbar-track {
  background: transparent;
}

.members-list::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 2px;
}

@media screen and (max-width: 900px) {
  .members-panel-wrapper {
    display: none;
  }
}
.thread-panel {
  width: 400px;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
}

.thread-header h3 {
  font-size: 16px;
  font-weight: 600;
}

.thread-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.thread-close:hover {
  background: var(--danger);
  color: var(--text-primary);
}

.thread-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
}

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

.thread-parent-message {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  margin-bottom: 16px;
}

.thread-parent-message .message-avatar {
  width: 40px;
  height: 40px;
}

.thread-parent-message .message-header {
  margin-bottom: 4px;
}

.thread-parent-message .message-author {
  font-weight: 600;
}

.thread-parent-message .message-time {
  font-size: 11px;
  color: var(--text-muted);
}

.thread-parent-message .message-text {
  font-size: 14px;
}

.thread-replies-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--text-muted);
  font-size: 12px;
}

.thread-replies-divider::before,
.thread-replies-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.thread-reply {
  display: flex;
  gap: 10px;
  padding: 8px 0;
}

.thread-reply .message-avatar.small {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.thread-reply .message-avatar.small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thread-reply .message-avatar.small span {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-primary);
}

.thread-reply .message-header {
  margin-bottom: 2px;
}

.thread-reply .message-author {
  font-size: 13px;
  font-weight: 600;
}

.thread-reply .message-time {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 8px;
}

.thread-reply .message-text {
  font-size: 13px;
  color: var(--text-secondary);
}

.thread-reply-form {
  display: flex;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid var(--border-color);
}

.thread-reply-form input {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}

.thread-reply-form input:focus {
  border-color: var(--accent-primary);
}

.thread-reply-form button {
  padding: 10px 20px;
  background: var(--accent-primary);
  color: var(--bg-primary);
  border: none;
  border-radius: var(--radius);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.thread-reply-form button:hover:not(:disabled) {
  box-shadow: 0 0 16px var(--accent-glow);
}

.thread-reply-form button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
:root {
  --breakpoint-xs: 320px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  min-width: 280px;
  -webkit-overflow-scrolling: touch;
}

.app-container {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.main-layout {
  display: flex;
  flex: 1;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}

.sidebar {
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  scrollbar-width: thin;
}

.content-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.server-sidebar {
  width: 72px;
  min-width: 72px;
  max-width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-sm) 0;
  gap: var(--space-xs);
  background: var(--bg-secondary, #12121a);
  border-right: 1px solid var(--border-color, #2a2a3a);
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

.server-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin: 0 auto;
  flex-shrink: 0;
}

.server-icon:hover {
  border-radius: var(--radius-lg);
  transform: scale(1.05);
}

.channel-list {
  width: 240px;
  min-width: 240px;
  max-width: 240px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary, #12121a);
  border-right: 1px solid var(--border-color, #2a2a3a);
  overflow: hidden;
  flex-shrink: 0;
  scrollbar-width: thin;
}

.channel-list::-webkit-scrollbar {
  width: 6px;
}

.channel-list::-webkit-scrollbar-track {
  background: var(--bg-secondary, #12121a);
}

.channel-list::-webkit-scrollbar-thumb {
  background: var(--border-color, #2a2a3a);
  border-radius: 3px;
}

.channel-list::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted, #666);
}

.channel-list-header {
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-color, #2a2a3a);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.channel-category {
  padding: var(--space-xs) var(--space-md);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted, #888);
  letter-spacing: 0.05em;
}

.channel-item {
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  margin: 2px var(--space-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease;
  gap: var(--space-sm);
}

.channel-item:hover {
  background: var(--bg-tertiary, #1a1a25);
}

.channel-item.active {
  background: var(--primary, #00ff88);
  color: #000;
}

.channel-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.channel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.message {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  max-width: 100%;
}

.message:hover {
  background: var(--bg-tertiary, #1a1a25);
}

.message-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

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

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

.message-text {
  line-height: 1.4;
}

.message-time {
  font-size: 0.75rem;
  color: var(--text-muted, #666);
}

.message-input-container {
  padding: var(--space-md);
  border-top: 1px solid var(--border-color, #2a2a3a);
  display: flex;
  gap: var(--space-sm);
  align-items: flex-end;
  flex-shrink: 0;
}

.message-input {
  flex: 1;
  min-width: 0;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color, #2a2a3a);
  background: var(--bg-tertiary, #1a1a25);
  color: var(--text, #fff);
  font-size: 1rem;
  resize: none;
  max-height: 200px;
  overflow-y: auto;
}

.message-input:focus {
  outline: none;
  border-color: var(--primary, #00ff88);
  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.2);
}

.dm-page {
  flex: 1;
  display: flex;
  height: 100%;
  overflow: hidden;
}

.dm-sidebar {
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  border-right: 1px solid var(--border-color, #2a2a3a);
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary, #12121a);
  flex-shrink: 0;
  scrollbar-width: thin;
}

.dm-list {
  flex: 1;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: var(--space-sm);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.dm-list::-webkit-scrollbar {
  width: 6px;
}

.dm-list::-webkit-scrollbar-track {
  background: var(--bg-secondary, #12121a);
}

.dm-list::-webkit-scrollbar-thumb {
  background: var(--border-color, #2a2a3a);
  border-radius: 3px;
}

.dm-list::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted, #666);
}

.dm-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease;
}

.dm-item:hover {
  background: var(--bg-tertiary, #1a1a25);
}

.dm-item.active {
  background: var(--primary, #00ff88);
  color: #000;
}

.dm-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.server-settings {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary, #0a0a0f);
}

.settings-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-color, #2a2a3a);
  flex-wrap: wrap;
}

.settings-tabs {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-color, #2a2a3a);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.settings-tab {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  white-space: nowrap;
  transition: all 0.15s ease;
}

.settings-tab.active {
  background: var(--primary, #00ff88);
  color: #000;
}

.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-xl);
}

.form-group {
  margin-bottom: var(--space-lg);
}

.form-label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: 500;
  color: var(--text, #fff);
}

.form-input {
  width: 100%;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color, #2a2a3a);
  background: var(--bg-tertiary, #1a1a25);
  color: var(--text, #fff);
  font-size: 1rem;
  min-height: 36px;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary, #00ff88);
}

.form-textarea {
  width: 100%;
  min-height: 100px;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color, #2a2a3a);
  background: var(--bg-tertiary, #1a1a25);
  color: var(--text, #fff);
  resize: vertical;
}

.form-select {
  width: 100%;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color, #2a2a3a);
  background: var(--bg-tertiary, #1a1a25);
  color: var(--text, #fff);
  cursor: pointer;
}

.form-button {
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.form-button.primary {
  background: var(--primary, #00ff88);
  color: #000;
}

.form-button.secondary {
  background: var(--bg-tertiary, #1a1a25);
  color: var(--text, #fff);
  border: 1px solid var(--border-color, #2a2a3a);
}

.form-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 255, 136, 0.3);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: var(--space-md);
}

.modal-content {
  background: var(--bg-secondary, #12121a);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-color, #2a2a3a);
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-xl);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-color, #2a2a3a);
}

.modal-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text, #fff);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted, #888);
  cursor: pointer;
  font-size: 1.5rem;
  padding: var(--space-sm);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-size: 0.875rem;
  min-height: 36px;
}

.btn-primary {
  background: var(--primary, #00ff88);
  color: #000;
}

.btn-secondary {
  background: var(--bg-tertiary, #1a1a25);
  color: var(--text, #fff);
  border: 1px solid var(--border-color, #2a2a3a);
}

.btn-danger {
  background: var(--danger, #ff6b6b);
  color: var(--text-primary);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ===== SMARTPHONE (xs): < 480px ===== */
@media (max-width: 479px) {
  html { font-size: 13px; }

  .sidebar {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    max-height: 50vh;
    border-bottom: 1px solid var(--border-color);
  }

  .sidebar.hidden { display: none; }

  .channel-list {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }

  .channel-list.hidden { display: none; }

  .channel-item {
    padding: 8px 10px;
    font-size: 0.85rem;
    min-height: 44px;
  }

  .channel-category {
    font-size: 0.65rem;
    padding: var(--space-xs) var(--space-sm);
  }

  .message {
    padding: 6px 8px;
    gap: 8px;
  }

  .message-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }

  .message-content {
    font-size: 0.85rem;
  }

  .message-author {
    font-size: 0.8rem;
  }

  .message-text {
    font-size: 0.85rem;
  }

  .message-input-container {
    padding: var(--space-sm);
  }

  .message-input {
    padding: var(--space-sm);
    font-size: 0.875rem;
  }

  .dm-sidebar {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    max-height: 40vh;
    border-bottom: 1px solid var(--border-color);
  }

  .dm-sidebar.hidden { display: none; }

  .dm-item {
    padding: var(--space-sm) var(--space-md);
    justify-content: flex-start;
    min-height: 44px;
  }

  .settings-header {
    padding: var(--space-sm);
  }

  .settings-tabs {
    padding: var(--space-xs);
  }

  .settings-content {
    padding: var(--space-sm);
  }

  .modal-content {
    padding: var(--space-sm);
    border-radius: var(--radius-lg);
  }

  .modal-title {
    font-size: 1rem;
  }

  .form-input, .form-textarea, .form-select {
    padding: var(--space-sm);
    font-size: 0.75rem;
  }

  .btn {
    padding: 8px 14px;
    font-size: 0.85rem;
    min-height: 44px;
  }

  .server-sidebar {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    padding: 4px 0;
  }

  .server-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 0.875rem;
  }
}

/* ===== TABLET (sm): 480px - 767px ===== */
@media (min-width: 480px) and (max-width: 767px) {
  .channel-list {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
  }

  .channel-item {
    font-size: 0.85rem;
    padding: var(--space-sm);
  }

  .dm-sidebar {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
  }

  .server-sidebar {
    width: 64px;
    min-width: 64px;
    max-width: 64px;
  }

  .server-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  .message-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .message {
    padding: var(--space-sm);
    gap: var(--space-sm);
  }

  .message-input {
    font-size: 0.9rem;
    padding: var(--space-sm);
  }

  .btn {
    min-height: 36px;
  }

  .form-input {
    font-size: 0.9rem;
    min-height: 36px;
  }
}

/* ===== TABLET LANDSCAPE (md): 768px - 1023px ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  .channel-list {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
  }

  .dm-sidebar {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
  }

  .server-sidebar {
    width: 68px;
    min-width: 68px;
    max-width: 68px;
  }

  .server-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
}

/* ===== DESKTOP (lg): 1024px - 1279px ===== */
@media (min-width: 1024px) and (max-width: 1279px) {
  .channel-list {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
  }

  .dm-sidebar {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
  }
}

/* ===== DESKTOP XL: 1280px - 1535px ===== */
@media (min-width: 1280px) and (max-width: 1535px) {
  .sidebar {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
  }

  .channel-list {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
  }

  .dm-sidebar {
    width: 300px;
    min-width: 300px;
    max-width: 300px;
  }

  .message-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
}

/* ===== ULTRA-WIDE (2xl): >= 1536px ===== */
@media (min-width: 1536px) {
  html { font-size: 18px; }

  .sidebar {
    width: 320px;
    min-width: 320px;
    max-width: 320px;
  }

  .channel-list {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
  }

  .dm-sidebar {
    width: 320px;
    min-width: 320px;
    max-width: 320px;
  }

  .message {
    padding: var(--space-md) var(--space-lg);
  }

  .message-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }

  .settings-content {
    padding: var(--space-2xl);
  }
}

/* ===== SHORT / LANDSCAPE MOBILE ===== */
@media (orientation: landscape) and (max-height: 500px) {
  .channel-list,
  .dm-sidebar {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
  }

  .message {
    padding: var(--space-xs);
  }

  .message-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }

  .message-input-container {
    padding: var(--space-xs) var(--space-sm);
  }

  .settings-header {
    padding: var(--space-sm) var(--space-md);
  }

  .settings-content {
    padding: var(--space-md);
  }

  .dm-item {
    padding: var(--space-xs);
  }
}

/* ===== TOUCH DEVICES ===== */
@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .form-button:hover {
    transform: none;
  }

  .channel-item:hover,
  .dm-item:hover,
  .message:hover {
    background: transparent;
  }

  .channel-item:active,
  .dm-item:active,
  .message:active {
    background: var(--bg-tertiary, #1a1a25);
  }

  .server-icon:hover {
    transform: none;
    border-radius: var(--radius-md);
  }

  .server-icon:active {
    transform: scale(0.95);
    border-radius: var(--radius-lg);
  }

  .btn:active,
  .channel-item:active,
  .dm-item:active {
    transform: scale(0.98);
  }

  .server-icon:active {
    transform: scale(0.95);
  }

  .btn, .channel-item, .dm-item, .message-input {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}

@media (prefers-contrast: more) {
  :root { --border-color: #444; }
  .btn, .form-input, .form-textarea { border-width: 2px; }
}

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

@media print {
  .no-print { display: none !important; }
  body { background: white; color: black; }
  .message, .channel-item, .dm-item { break-inside: avoid; }
}

/* ===== SCROLLBAR STYLING ===== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary, #12121a);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color, #2a2a3a);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted, #666);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color, #2a2a3a) var(--bg-secondary, #12121a);
}

/* ===== UTILITY CLASSES ===== */
.hide-xs { display: none; }
.show-xs { display: block; }

@media (min-width: 480px) {
  .hide-xs { display: block; }
  .show-xs { display: none; }
}

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

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

.w-full { width: 100%; }
.h-full { height: 100%; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted, #888); }

.loading-skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary, #1a1a25) 25%, var(--bg-secondary, #12121a) 50%, var(--bg-tertiary, #1a1a25) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color, #2a2a3a);
  border-top-color: var(--primary, #00ff88);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.toast-container {
  position: fixed;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  pointer-events: none;
  max-height: 80vh;
  overflow: hidden;
}
.toast-container > * { pointer-events: auto; }

.toast-bottom-right { bottom: var(--space-lg); right: var(--space-lg); }
.toast-bottom-left { bottom: var(--space-lg); left: var(--space-lg); }
.toast-top-right { top: var(--space-lg); right: var(--space-lg); }
.toast-top-left { top: var(--space-lg); left: var(--space-lg); }

.toast {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--bg-secondary, #12121a);
  border: 1px solid var(--border-color, #2a2a3a);
  border-left: 3px solid var(--toast-accent, var(--border-color));
  color: var(--text, #fff);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  min-width: 280px;
  max-width: 400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.toast:hover {
  background: var(--bg-tertiary, #1a1a25);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.toast.success { border-left-color: var(--toast-accent, var(--success, #00ff88)); }
.toast.error { border-left-color: var(--toast-accent, var(--danger, #ff6b6b)); }
.toast.warning { border-left-color: var(--toast-accent, var(--warning, #ffaa00)); }
.toast.info { border-left-color: var(--toast-accent, var(--accent, #5865F2)); }

.toast-glow-ring {
  position: absolute;
  inset: -2px;
  border: 2px solid var(--toast-accent);
  border-radius: calc(var(--radius-md) + 2px);
  opacity: 0;
  animation: toast-glow-pulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes toast-glow-pulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.5; }
}

.toast-icon-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.toast-content {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  min-width: 0;
}

.toast-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--toast-accent, #2a2a3a);
}

.toast-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.toast-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-secondary, #999);
  flex-wrap: wrap;
}

.toast-username {
  font-weight: 600;
  color: var(--toast-accent, var(--text, #fff));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast-server-name {
  color: var(--text-muted, #666);
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast-time {
  margin-left: auto;
  font-size: 0.7rem;
  opacity: 0.6;
}

.toast-message {
  font-size: 0.875rem;
  line-height: 1.3;
  word-break: break-word;
}

.toast-close {
  background: none;
  border: none;
  color: var(--text-secondary, #999);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 0.75rem;
  border-radius: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.toast:hover .toast-close { opacity: 1; }
.toast-close:hover { background: var(--bg-tertiary, #2a2a3a); color: var(--text, #fff); }

.toast-compact .toast { padding: var(--space-xs) var(--space-md); min-width: 200px; }
.toast-compact .toast-avatar, .toast-compact .toast-icon-badge { width: 20px; height: 20px; font-size: 10px; }
.toast-compact .toast-message { font-size: 0.8rem; }

/* Toast Effects */
.toast-fx-slide .toast { animation: toast-in 0.3s ease; }
.toast-fx-bounce .toast { animation: toast-bounce-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.toast-fx-glow .toast { animation: toast-in 0.3s ease; }
.toast-fx-shake .toast { animation: toast-shake-in 0.4s ease; }
.toast-fx-fade .toast { animation: toast-fade-in 0.3s ease; }
.toast-fx-none .toast { animation: none; }

@keyframes toast-in {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes toast-bounce-in {
  0% { transform: translateX(100%) scale(0.8); opacity: 0; }
  60% { transform: translateX(-10%) scale(1.05); opacity: 1; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes toast-shake-in {
  0% { transform: translateX(100%); opacity: 0; }
  30% { transform: translateX(-8px); opacity: 1; }
  50% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
@keyframes toast-fade-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.toast-bottom-left .toast, .toast-top-left .toast {
  animation-name: toast-in-left !important;
}
@keyframes toast-in-left {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.toast-top-right .toast, .toast-top-left .toast {
  animation-name: toast-in-down !important;
}
@keyframes toast-in-down {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.toast-fx-bounce.toast-bottom-left .toast,
.toast-fx-bounce.toast-top-left .toast {
  animation-name: toast-bounce-left !important;
}
@keyframes toast-bounce-left {
  0% { transform: translateX(-100%) scale(0.8); opacity: 0; }
  60% { transform: translateX(10px) scale(1.05); opacity: 1; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}
.toast-fx-bounce.toast-top-right .toast,
.toast-fx-bounce.toast-top-left .toast {
  animation-name: toast-bounce-down !important;
}
@keyframes toast-bounce-down {
  0% { transform: translateY(-40px) scale(0.8); opacity: 0; }
  60% { transform: translateY(5px) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.context-menu {
  position: fixed;
  z-index: 10001;
  min-width: 180px;
  background: var(--bg-secondary, #12121a);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: var(--space-xs);
  overflow: hidden;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease;
  color: var(--text, #fff);
}

.context-menu-item:hover {
  background: var(--bg-tertiary, #1a1a25);
}

.context-menu-item.danger {
  color: var(--danger, #ff6b6b);
}

.context-menu-divider {
  height: 1px;
  background: var(--border-color, #2a2a3a);
  margin: var(--space-xs) 0;
}

.upload-progress {
  position: relative;
  width: 100%;
  height: 4px;
  background: var(--bg-tertiary, #1a1a25);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.upload-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary, #00ff88), var(--accent, #00cc6a));
  transition: width 0.3s ease;
  border-radius: var(--radius-full);
}

.upload-preview {
  position: relative;
  max-width: 200px;
  max-height: 200px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid var(--border-color, #2a2a3a);
}

.upload-preview img {
  width: 100%;
  height: auto;
  display: block;
}

.upload-preview-remove {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.7);
  color: var(--text-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.upload-preview-remove:hover {
  background: var(--danger, #ff6b6b);
}

.video-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.video-container video {
  width: 100%;
  display: block;
}

.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  display: flex;
  align-items: center;
  gap: var(--space-md);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-container:hover .video-controls {
  opacity: 1;
}

.video-progress {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.video-progress-bar {
  height: 100%;
  background: var(--primary, #00ff88);
  border-radius: var(--radius-full);
}

.emoji-picker {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 320px;
  max-height: 400px;
  background: var(--bg-secondary, #12121a);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  z-index: 1000;
}

.emoji-search {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-bottom: 1px solid var(--border-color, #2a2a3a);
  background: var(--bg-tertiary, #1a1a25);
  color: var(--text, #fff);
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-xs);
  padding: var(--space-sm);
  overflow-y: auto;
  max-height: 300px;
}

.emoji-item {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}

.emoji-item:hover {
  background: var(--bg-tertiary, #1a1a25);
}

.link-preview {
  max-width: 400px;
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-tertiary, #1a1a25);
  margin-top: var(--space-sm);
}

.link-preview-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.link-preview-content {
  padding: var(--space-md);
}

.link-preview-title {
  font-weight: 600;
  color: var(--text, #fff);
  margin-bottom: var(--space-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-preview-description {
  font-size: 0.875rem;
  color: var(--text-muted, #888);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.link-preview-url {
  font-size: 0.75rem;
  color: var(--text-muted, #666);
  margin-top: var(--space-sm);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text, #fff);
  font-weight: 600;
  line-height: 1.2;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }

p {
  line-height: 1.6;
  color: var(--text, #fff);
}

a {
  color: var(--primary, #00ff88);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code {
  background: var(--bg-tertiary, #1a1a25);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.875em;
}

.avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.avatar-sm {
  width: 32px;
  height: 32px;
  min-width: 32px;
}

.avatar-lg {
  width: 64px;
  height: 64px;
  min-width: 64px;
}

.avatar-xl {
  width: 96px;
  height: 96px;
  min-width: 96px;
}

@media (max-width: 479px) {
  .avatar { width: 32px; height: 32px; min-width: 32px; }
  .avatar-sm { width: 28px; height: 28px; min-width: 28px; }
  .avatar-lg { width: 48px; height: 48px; min-width: 48px; }
  .avatar-xl { width: 72px; height: 72px; min-width: 72px; }
}

.avatar-with-status {
  position: relative;
}

.avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: var(--success, #00ff88);
  border: 2px solid var(--bg-secondary, #12121a);
  border-radius: var(--radius-full);
}

.avatar-status.offline {
  background: var(--text-muted, #888);
}

.avatar-status.dnd {
  background: var(--danger, #ff6b6b);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-primary {
  background: var(--primary, #00ff88);
  color: #000;
}

.badge-secondary {
  background: var(--bg-tertiary, #1a1a25);
  color: var(--text, #fff);
  border: 1px solid var(--border-color, #2a2a3a);
}

.badge-danger {
  background: var(--danger, #ff6b6b);
  color: var(--text-primary);
}

.tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color, #2a2a3a);
}

.tab {
  padding: var(--space-md) var(--space-lg);
  color: var(--text-muted, #888);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.tab:hover {
  color: var(--text, #fff);
}

.tab.active {
  color: var(--primary, #00ff88);
  border-bottom-color: var(--primary, #00ff88);
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--bg-secondary, #12121a);
  border: 1px solid var(--border-color, #2a2a3a);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  overflow: hidden;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  color: var(--text, #fff);
  cursor: pointer;
  transition: background 0.15s ease;
}

.dropdown-item:hover {
  background: var(--bg-tertiary, #1a1a25);
}

.fade-in {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.slide-up {
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.slide-down {
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.scale-in {
  animation: scaleIn 0.2s ease;
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== MOBILE READABILITY FIXES ===== */

/* Prevent text cutoff & overflow on all mobile sizes */
@media (max-width: 768px) {
  * { -webkit-tap-highlight-color: transparent; }

  h1 { font-size: 1.5rem; word-break: break-word; }
  h2 { font-size: 1.25rem; word-break: break-word; }
  h3 { font-size: 1.1rem; word-break: break-word; }

  p, li, .text-content, .description {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  button, .btn, .tab-btn, .nav-item, .channel-item, .friend-item,
  .msg-group, .dm-user-item, .notification-item, .search-result-item {
    min-height: 44px;
  }

  input, textarea, select, .form-input, .form-textarea, .form-select,
  .message-input, .friend-search-input, .search-input {
    font-size: 16px !important;
    min-height: 44px;
  }

  .modal {
    width: 95%;
    max-width: 95%;
    margin: 0 auto;
  }

  .modal-content {
    max-height: 85vh;
    overflow-y: auto;
  }

  .btn, .form-button, button {
    touch-action: manipulation;
  }

  [class*="sidebar"]:not(.server-sidebar) {
    overscroll-behavior: contain;
  }
}

@media (max-width: 480px) {
  html { font-size: 14px; }

  .user-tag, .msg-custom-tag {
    max-width: 70px;
    font-size: 9px;
  }

  .msg-author-name {
    font-size: 13px;
  }

  .msg-text {
    font-size: 13px;
    line-height: 1.45;
  }

  .msg-timestamp {
    font-size: 10px;
  }

  .avatar {
    width: 32px;
    height: 32px;
  }

  .status-indicator {
    width: 10px;
    height: 10px;
    border-width: 2px;
  }

  .msg-badges {
    gap: 2px;
  }

  .msg-badge svg, .msg-badge img {
    width: 14px;
    height: 14px;
  }

  .msg-reply-preview {
    padding: 3px 6px;
    font-size: 11px;
  }

  .msg-actions {
    top: -10px;
    right: 2px;
    padding: 2px;
  }

  .msg-actions button {
    width: 22px;
    height: 22px;
  }

  .msg-actions button svg {
    width: 11px;
    height: 11px;
  }
}

@media (max-width: 360px) {
  html { font-size: 13px; }

  .user-tag, .msg-custom-tag {
    max-width: 50px;
    font-size: 8px;
    padding: 1px 4px;
  }

  .msg-author-name {
    font-size: 12px;
  }

  .msg-text {
    font-size: 12px;
  }

  .avatar {
    width: 28px;
    height: 28px;
  }

  .msg-badge svg, .msg-badge img {
    width: 12px;
    height: 12px;
  }
}