/* ============================================
   LEMON CASINO MASTER HEADER STYLES
   Identical to index.html landing page
   ============================================ */

/* CSS Variables */
:root {
  --lc-bg: #0a0a0f;
  --lc-bg-secondary: #12121a;
  --lc-bg-elevated: #1a1a25;
  --lc-bg-hover: #22222f;
  --lc-lemon-gold: #ffd93d;
  --lc-lemon-bright: #ffe66d;
  --lc-lemon-dark: #c4a000;
  --lc-lemon-glow: rgba(255, 217, 61, 0.3);
  --lc-green: #22c55e;
  --lc-red: #ef4444;
  --lc-purple: #a855f7;
  --lc-text: #fff;
  --lc-text-secondary: #a0a0b0;
  --lc-text-muted: #9ca3af;
  --lc-border-color: rgba(255, 255, 255, 0.08);
  --lc-header-height: 60px;

  /* Glassmorphism System */
  --lc-glass-bg: rgba(22, 22, 30, 0.6);
  --lc-glass-border: rgba(255, 255, 255, 0.08);
  --lc-glass-highlight: rgba(255, 255, 255, 0.05);
  --lc-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  --lc-backdrop-blur: blur(20px);
}

/* ============================================
   iOS ZOOM PREVENTION
   Inputs < 16px cause iOS Safari to auto-zoom
   Mobile-first: 16px default, smaller on desktop
   ============================================ */
input,
select,
textarea {
  font-size: 16px !important;
}

@media (min-width: 768px) {
  input,
  select,
  textarea {
    font-size: 14px !important;
  }
}

/* Unified Header */
.lc-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--lc-header-height) !important;
  z-index: 999999 !important;
  /* Refined Glass Header */
  background: rgba(10, 10, 15, 0.3) !important;
  /* More transparent */
  backdrop-filter: saturate(180%) blur(12px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  /* Softer border */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 20px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  box-sizing: border-box !important;
}

.lc-header * {
  box-sizing: border-box !important;
}

.lc-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 30px !important;
}

/* Logo */
.lc-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: var(--lc-text) !important;
  cursor: pointer !important;
}

.lc-logo-icon {
  font-size: 28px !important;
}

.lc-logo-text {
  font-family: 'Oswald', 'Inter', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  background: linear-gradient(135deg, #fff 0%, #ffd93d 50%, #fff 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: lcShimmer 4s linear infinite !important;
}

@keyframes lcShimmer {
  to {
    background-position: 200% center;
  }
}

.lc-logo-text span {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  /* 'SINO' in white for contrast */
  font-weight: 300 !important;
}

/* Navigation Tabs */
.lc-nav-tabs {
  display: flex !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
}

.lc-nav-tab {
  display: flex !important;
  align-items: center !important;
  padding: 8px 16px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-family: 'Roboto Condensed', 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--lc-text-secondary) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.lc-nav-tab:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05)) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--lc-text) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-1px) !important;
}

.lc-nav-tab.active {
  background: linear-gradient(135deg, rgba(255, 217, 61, 0.25), rgba(255, 217, 61, 0.05)) !important;
  border: 1px solid rgba(255, 217, 61, 0.4) !important;
  backdrop-filter: blur(12px) !important;
  color: var(--lc-lemon-gold) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 12px rgba(255, 217, 61, 0.4) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(255, 217, 61, 0.05) !important;
}

.lc-nav-icon {
  width: 18px !important;
  height: 18px !important;
  fill: rgba(255, 255, 255, 0.15) !important;
  stroke: #fff !important;
  stroke-width: 2px !important;
  margin-right: 6px !important;
  transition: all 0.2s ease !important;
}

.lc-nav-tab:hover .lc-nav-icon {
  fill: rgba(255, 255, 255, 0.3) !important;
  stroke: #fff !important;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5)) !important;
}

.lc-nav-tab.active .lc-nav-icon {
  fill: rgba(255, 217, 61, 0.3) !important;
  stroke: var(--lc-lemon-gold) !important;
  filter: drop-shadow(0 0 6px var(--lc-lemon-gold)) !important;
}

/* Live Badge */
.lc-live-badge {
  background: #ff4444 !important;
  color: white !important;
  padding: 2px 6px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  font-weight: bold !important;
  margin-left: 4px !important;
  animation: lcPulseLive 1.5s infinite !important;
}

@keyframes lcPulseLive {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

/* User Info Section */
.lc-user-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* ============================================
   HEADER ACTION PILLS - Uniform Styling
   Balance, Send, Redeem all match exactly
   ============================================ */

/* Shared pill base styles */
.lc-header-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.lc-header-pill-icon {
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Balance Display */
.lc-balance-display {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 36px !important;
  padding: 0 14px !important;
  background: rgba(255, 217, 61, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 217, 61, 0.2) !important;
  border-radius: 18px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.lc-balance-display:hover {
  background: linear-gradient(135deg, rgba(255, 217, 61, 0.25), rgba(255, 217, 61, 0.1)) !important;
  border-color: rgba(255, 217, 61, 0.5) !important;
}

.lc-balance-icon {
  font-size: 16px !important;
  line-height: 1 !important;
}

.lc-balance-value {
  font-family: 'Oswald', 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--lc-lemon-gold) !important;
  line-height: 1 !important;
}

.lc-balance-value.updating {
  animation: lcBalancePulse 0.3s ease !important;
}

@keyframes lcBalancePulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
    color: #fff;
  }
}

/* Send Button */
.lc-send-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 36px !important;
  padding: 0 14px !important;
  background: rgba(34, 197, 94, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(34, 197, 94, 0.2) !important;
  border-radius: 18px !important;
  color: #22c55e !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  line-height: 1 !important;
}

.lc-send-btn:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0.1)) !important;
  border-color: rgba(34, 197, 94, 0.5) !important;
}

/* Redeem Button */
.lc-redeem-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 36px !important;
  padding: 0 14px !important;
  background: rgba(249, 115, 22, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(249, 115, 22, 0.2) !important;
  border-radius: 18px !important;
  color: #f97316 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  line-height: 1 !important;
}

.lc-redeem-btn:hover {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.25), rgba(249, 115, 22, 0.1)) !important;
  border-color: rgba(249, 115, 22, 0.5) !important;
}

/* User Profile */
.lc-user-profile {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 14px 6px 6px !important;
  background: var(--lc-bg-elevated) !important;
  border-radius: 30px !important;
  border: 1px solid var(--lc-border-color) !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.3s ease !important;
}

/* Daily Bonus Ready - Pulsing gold glow on profile */
.lc-user-profile.daily-ready {
  animation: lcDailyPulse 2s ease-in-out infinite !important;
  border-color: rgba(255, 217, 61, 0.6) !important;
}

@keyframes lcDailyPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 217, 61, 0), 0 0 8px rgba(255, 217, 61, 0.2);
    border-color: rgba(255, 217, 61, 0.4);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(255, 217, 61, 0.15), 0 0 20px rgba(255, 217, 61, 0.4);
    border-color: rgba(255, 217, 61, 0.8);
  }
}

/* Mini Bonus Ready - Pulsing purple glow on profile */
.lc-user-profile.mini-ready {
  animation: lcMiniPulse 2s ease-in-out infinite !important;
  border-color: rgba(168, 85, 247, 0.6) !important;
}

@keyframes lcMiniPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(168, 85, 247, 0), 0 0 8px rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.4);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.15), 0 0 20px rgba(168, 85, 247, 0.4);
    border-color: rgba(168, 85, 247, 0.8);
  }
}

/* Both bonuses ready - alternating gold/purple glow */
.lc-user-profile.daily-ready.mini-ready {
  animation: lcBothPulse 3s ease-in-out infinite !important;
}

@keyframes lcBothPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 217, 61, 0), 0 0 12px rgba(255, 217, 61, 0.3);
    border-color: rgba(255, 217, 61, 0.6);
  }

  25% {
    box-shadow: 0 0 0 4px rgba(255, 217, 61, 0.2), 0 0 25px rgba(255, 217, 61, 0.5);
    border-color: rgba(255, 217, 61, 0.9);
  }

  50% {
    box-shadow: 0 0 0 0 rgba(168, 85, 247, 0), 0 0 12px rgba(168, 85, 247, 0.3);
    border-color: rgba(168, 85, 247, 0.6);
  }

  75% {
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.2), 0 0 25px rgba(168, 85, 247, 0.5);
    border-color: rgba(168, 85, 247, 0.9);
  }
}

/* Avatar container for positioning indicators */
.lc-avatar-container {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.lc-user-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 2px solid var(--lc-lemon-gold) !important;
  object-fit: cover !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Daily bonus ready - avatar glow */
.lc-user-profile.daily-ready .lc-user-avatar {
  border-color: var(--lc-lemon-gold) !important;
  box-shadow: 0 0 12px rgba(255, 217, 61, 0.6) !important;
}

/* Mini bonus ready - avatar purple tint */
.lc-user-profile.mini-ready .lc-user-avatar {
  border-color: #a855f7 !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.5) !important;
}

/* Both ready - gold border with purple glow */
.lc-user-profile.daily-ready.mini-ready .lc-user-avatar {
  border-color: var(--lc-lemon-gold) !important;
  box-shadow: 0 0 12px rgba(255, 217, 61, 0.4), 0 0 20px rgba(168, 85, 247, 0.3) !important;
}

/* Mini Bonus Ready - Gift icon on far right of button */
.lc-mini-bonus-indicator {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  margin-left: 4px !important;
  opacity: 0 !important;
  transform: scale(0) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.5) !important;
  flex-shrink: 0 !important;
}

/* Ensure gift icon displays at proper size */
.lc-mini-bonus-indicator svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

.lc-mini-bonus-indicator.visible {
  opacity: 1 !important;
  transform: scale(1) !important;
  animation: lcMiniBounce 1.5s ease-in-out infinite !important;
}

@keyframes lcMiniBounce {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

/* Daily bonus tooltip on hover */
.lc-user-profile.daily-ready::after {
  content: 'Daily Bonus Ready!' !important;
  position: absolute !important;
  bottom: -28px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(135deg, rgba(255, 217, 61, 0.95), rgba(255, 200, 0, 0.95)) !important;
  color: #000 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.2s ease !important;
  z-index: 1000 !important;
  box-shadow: 0 4px 12px rgba(255, 217, 61, 0.3) !important;
  pointer-events: none !important;
}

.lc-user-profile.daily-ready:hover::after {
  opacity: 1 !important;
  visibility: visible !important;
  bottom: -32px !important;
}

/* Mini bonus only tooltip */
.lc-user-profile.mini-ready:not(.daily-ready)::after {
  content: 'Mini Bonus Ready!' !important;
  position: absolute !important;
  bottom: -28px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.95), rgba(124, 58, 237, 0.95)) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.2s ease !important;
  z-index: 1000 !important;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3) !important;
  pointer-events: none !important;
}

.lc-user-profile.mini-ready:not(.daily-ready):hover::after {
  opacity: 1 !important;
  visibility: visible !important;
  bottom: -32px !important;
}

/* When both bonuses ready, show combined tooltip */
.lc-user-profile.daily-ready.mini-ready::after {
  content: 'Daily + Mini Bonus Ready!' !important;
  background: linear-gradient(135deg, rgba(255, 217, 61, 0.95), rgba(168, 85, 247, 0.95)) !important;
}

.lc-user-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--lc-text) !important;
}

/* Admin Button */
.lc-admin-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: 8px !important;
  color: #ef4444 !important;
  font-size: 18px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.lc-admin-btn:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  transform: scale(1.05) !important;
}

/* Login Button */
.lc-login-btn {
  padding: 10px 24px !important;
  background: linear-gradient(135deg, var(--lc-lemon-gold), var(--lc-lemon-dark)) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #000 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 20px var(--lc-lemon-glow) !important;
}

.lc-login-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px var(--lc-lemon-glow) !important;
}

/* Logout Button */
.lc-logout-btn {
  padding: 8px 14px !important;
  background: transparent !important;
  border: 1px solid var(--lc-border-color) !important;
  border-radius: 8px !important;
  color: var(--lc-text-secondary) !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.lc-logout-btn:hover {
  border-color: var(--lc-lemon-gold) !important;
  color: var(--lc-lemon-gold) !important;
}

/* ============================================
   SEND LEMONS MODAL
   ============================================ */

.lc-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  z-index: 9999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.3s ease !important;
  will-change: auto !important;
}

.lc-modal-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  will-change: opacity !important;
}

.lc-modal-content {
  background: rgba(30, 30, 40, 0.85) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 24px !important;
  width: 100% !important;
  max-width: 420px !important;
  padding: 0 !important;
  animation: lcSlideUp 0.3s ease !important;
  overflow: hidden !important;
  will-change: transform, opacity !important;
}

@keyframes lcSlideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.lc-modal-header {
  padding: 24px 24px 0 !important;
  text-align: center !important;
}

.lc-modal-icon {
  font-size: 48px !important;
  margin-bottom: 12px !important;
}

.lc-modal-title {
  font-family: 'Oswald', 'Inter', sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  background: linear-gradient(135deg, var(--lc-green), var(--lc-lemon-gold)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.lc-modal-subtitle {
  color: var(--lc-text-muted) !important;
  font-size: 14px !important;
}

.lc-modal-body {
  padding: 24px !important;
}

.lc-form-group {
  margin-bottom: 20px !important;
}

.lc-form-label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--lc-text-secondary) !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.lc-form-input {
  width: 100% !important;
  padding: 14px 16px !important;
  background: var(--lc-bg) !important;
  border: 1px solid var(--lc-border-color) !important;
  border-radius: 12px !important;
  color: var(--lc-text) !important;
  /* font-size: 16px on mobile (from global rule) to prevent iOS zoom */
  /* font-size: 14px on desktop (from global media query) */
  outline: none !important;
  transition: all 0.2s !important;
}

.lc-form-input:focus {
  border-color: var(--lc-green) !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2) !important;
}

.lc-form-input::placeholder {
  color: var(--lc-text-muted) !important;
}

.lc-form-input-wrapper {
  position: relative !important;
}

.lc-form-input-icon {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 18px !important;
  pointer-events: none !important;
}

/* User Suggestions */
.lc-user-suggestions {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--lc-bg-elevated) !important;
  border: 1px solid var(--lc-border-color) !important;
  border-radius: 12px !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  z-index: 100 !important;
  display: none !important;
}

.lc-user-suggestions.active {
  display: block !important;
}

.lc-user-suggestion {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

.lc-user-suggestion:hover {
  background: var(--lc-bg-hover) !important;
}

.lc-user-suggestion-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--lc-purple) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: white !important;
  overflow: hidden !important;
}

.lc-user-suggestion-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.lc-user-suggestion-name {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--lc-text) !important;
}

/* Quick Amount Buttons */
.lc-quick-amounts {
  display: flex !important;
  gap: 8px !important;
  margin-top: 10px !important;
  flex-wrap: wrap !important;
}

.lc-quick-amount-btn {
  padding: 8px 14px !important;
  background: var(--lc-bg) !important;
  border: 1px solid var(--lc-border-color) !important;
  border-radius: 8px !important;
  color: var(--lc-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.lc-quick-amount-btn:hover {
  border-color: var(--lc-lemon-gold) !important;
  color: var(--lc-lemon-gold) !important;
}

/* Balance Preview */
.lc-balance-preview {
  background: rgba(0, 0, 0, 0.3) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  margin-top: 16px !important;
}

.lc-balance-preview-row {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 14px !important;
  margin-bottom: 8px !important;
}

.lc-balance-preview-row:last-child {
  margin-bottom: 0 !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--lc-border-color) !important;
}

.lc-balance-preview-label {
  color: var(--lc-text-muted) !important;
}

.lc-balance-preview-value {
  font-weight: 600 !important;
  color: var(--lc-text) !important;
}

.lc-balance-preview-value.remaining {
  color: var(--lc-lemon-gold) !important;
}

.lc-modal-footer {
  padding: 0 24px 24px !important;
  display: flex !important;
  gap: 12px !important;
}

.lc-modal-btn {
  flex: 1 !important;
  padding: 14px 24px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  border: none !important;
}

.lc-modal-btn-cancel {
  background: transparent !important;
  border: 1px solid var(--lc-border-color) !important;
  color: var(--lc-text-secondary) !important;
}

.lc-modal-btn-cancel:hover {
  border-color: var(--lc-text) !important;
  color: var(--lc-text) !important;
}

.lc-modal-btn-send {
  background: linear-gradient(135deg, var(--lc-green), #16a34a) !important;
  color: white !important;
}

.lc-modal-btn-send:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4) !important;
}

.lc-modal-btn-send:disabled {
  background: var(--lc-bg-hover) !important;
  color: var(--lc-text-muted) !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ============================================
   VAULT MODAL STYLES
   ============================================ */

.lc-vault-tabs {
  display: flex !important;
  gap: 0 !important;
  margin-bottom: 20px !important;
  background: var(--lc-bg) !important;
  border-radius: 12px !important;
  padding: 4px !important;
}

.lc-vault-tab {
  flex: 1 !important;
  padding: 12px 16px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  color: var(--lc-text-muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.lc-vault-tab:hover {
  color: var(--lc-text) !important;
}

.lc-vault-tab.active {
  background: var(--lc-lemon-gold) !important;
  color: #000 !important;
}

.lc-vault-balances {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

.lc-vault-balance-box {
  flex: 1 !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  text-align: center !important;
}

.lc-vault-balance-label {
  font-size: 12px !important;
  color: var(--lc-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 6px !important;
}

.lc-vault-balance-value {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--lc-text) !important;
}

.lc-vault-balance-box.vault .lc-vault-balance-value {
  color: var(--lc-lemon-gold) !important;
}

.lc-vault-cooldown {
  text-align: center !important;
  padding: 12px !important;
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: 10px !important;
  margin-bottom: 16px !important;
  color: #ef4444 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.lc-vault-cooldown.hidden {
  display: none !important;
}

.lc-modal-btn-vault {
  background: linear-gradient(135deg, var(--lc-lemon-gold), #e6c235) !important;
  color: #000 !important;
}

.lc-modal-btn-vault:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(255, 217, 61, 0.4) !important;
}

.lc-modal-btn-vault:disabled {
  background: var(--lc-bg-hover) !important;
  color: var(--lc-text-muted) !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ============================================
   UNIFIED NOTIFICATION SYSTEM
   Slide-in notifications from top-right
   with type-specific colors
   ============================================ */

.lc-notification-container {
  position: fixed !important;
  top: 70px !important;
  right: 16px !important;
  z-index: 99999999 !important;
  pointer-events: none !important;
  max-width: 380px !important;
  width: calc(100% - 32px) !important;
}

.lc-notification {
  pointer-events: auto !important;
  background: linear-gradient(135deg, #3a3a50 0%, #2e2e40 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 8px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.15) inset !important;
  transform: translateX(120%) !important;
  opacity: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  position: relative !important;
  overflow: hidden !important;
  will-change: transform, opacity !important;
}

.lc-notification.lc-visible {
  transform: translateX(0) !important;
  opacity: 1 !important;
  background: linear-gradient(135deg, #3a3a50 0%, #2e2e40 100%) !important;
}

.lc-notification.lc-hiding {
  transform: translateX(120%) !important;
  opacity: 0 !important;
  will-change: auto !important;
}

.lc-notification-content {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.lc-notification-icon {
  font-size: 28px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

.lc-notification-text {
  flex: 1 !important;
  min-width: 0 !important;
}

.lc-notification-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 4px !important;
  letter-spacing: 0.3px !important;
}

.lc-notification-message {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  line-height: 1.4 !important;
  word-break: break-word !important;
}

.lc-notification-amount {
  font-weight: 700 !important;
  font-family: 'Oswald', 'Inter', sans-serif !important;
}

.lc-notification-sender {
  font-weight: 600 !important;
  color: #ffd93d !important;
}

.lc-notification-close {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 24px !important;
  height: 24px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s !important;
  padding: 0 !important;
}

.lc-notification-close:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

.lc-notification-progress {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 3px !important;
  background: currentColor !important;
  opacity: 0.5 !important;
  animation: lc-progress linear forwards !important;
  border-radius: 0 0 12px 12px !important;
}

@keyframes lc-progress {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

/* WIN - Green glow */
.lc-notification.lc-type-win {
  border-color: #22c55e !important;
  background: linear-gradient(135deg, #244f38 0%, #1f4230 100%) !important;
  box-shadow: 0 8px 32px rgba(34, 197, 94, 0.5), 0 0 20px rgba(34, 197, 94, 0.3) !important;
  color: #22c55e !important;
}

.lc-notification.lc-type-win.lc-visible {
  background: linear-gradient(135deg, #244f38 0%, #1f4230 100%) !important;
}

.lc-notification.lc-type-win .lc-notification-title {
  color: #4ade80 !important;
}

.lc-notification.lc-type-win .lc-notification-amount {
  color: #4ade80 !important;
}

/* SUCCESS - Same as win */
.lc-notification.lc-type-success {
  border-color: #22c55e !important;
  background: linear-gradient(135deg, #244f38 0%, #1f4230 100%) !important;
  box-shadow: 0 8px 32px rgba(34, 197, 94, 0.5), 0 0 20px rgba(34, 197, 94, 0.3) !important;
  color: #22c55e !important;
}

.lc-notification.lc-type-success.lc-visible {
  background: linear-gradient(135deg, #244f38 0%, #1f4230 100%) !important;
}

.lc-notification.lc-type-success .lc-notification-title {
  color: #4ade80 !important;
}

/* LOSS/ERROR - Red */
.lc-notification.lc-type-loss,
.lc-notification.lc-type-error {
  border-color: #ef4444 !important;
  background: linear-gradient(135deg, #502424 0%, #421f1f 100%) !important;
  box-shadow: 0 8px 32px rgba(239, 68, 68, 0.45) !important;
  color: #ef4444 !important;
}

.lc-notification.lc-type-loss.lc-visible,
.lc-notification.lc-type-error.lc-visible {
  background: linear-gradient(135deg, #502424 0%, #421f1f 100%) !important;
}

.lc-notification.lc-type-loss .lc-notification-title,
.lc-notification.lc-type-error .lc-notification-title {
  color: #f87171 !important;
}

/* PUSH - Yellow/amber */
.lc-notification.lc-type-push,
.lc-notification.lc-type-warning {
  border-color: #fbbf24 !important;
  background: linear-gradient(135deg, #504824 0%, #42391f 100%) !important;
  box-shadow: 0 8px 32px rgba(251, 191, 36, 0.45) !important;
  color: #fbbf24 !important;
}

.lc-notification.lc-type-push.lc-visible,
.lc-notification.lc-type-warning.lc-visible {
  background: linear-gradient(135deg, #504824 0%, #42391f 100%) !important;
}

.lc-notification.lc-type-push .lc-notification-title,
.lc-notification.lc-type-warning .lc-notification-title {
  color: #fcd34d !important;
}

.lc-notification.lc-type-push .lc-notification-amount {
  color: #fcd34d !important;
}

/* BONUS/LEMON_RECEIVED - Gold glow */
.lc-notification.lc-type-bonus,
.lc-notification.lc-type-lemon_received {
  border-color: #ffd93d !important;
  background: linear-gradient(135deg, #50491c 0%, #423c18 100%) !important;
  box-shadow: 0 8px 32px rgba(255, 217, 61, 0.5), 0 0 30px rgba(255, 217, 61, 0.3) !important;
  color: #ffd93d !important;
}

.lc-notification.lc-type-bonus.lc-visible,
.lc-notification.lc-type-lemon_received.lc-visible {
  background: linear-gradient(135deg, #50491c 0%, #423c18 100%) !important;
}

.lc-notification.lc-type-bonus .lc-notification-title,
.lc-notification.lc-type-lemon_received .lc-notification-title {
  color: #fff !important;
}

.lc-notification.lc-type-bonus .lc-notification-amount,
.lc-notification.lc-type-lemon_received .lc-notification-amount {
  color: #ffe66d !important;
  text-shadow: 0 0 10px rgba(255, 217, 61, 0.6) !important;
}

/* INFO - Blue */
.lc-notification.lc-type-info {
  border-color: #3b82f6 !important;
  background: linear-gradient(135deg, #243a50 0%, #1f3042 100%) !important;
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.45) !important;
  color: #3b82f6 !important;
}

.lc-notification.lc-type-info.lc-visible {
  background: linear-gradient(135deg, #243a50 0%, #1f3042 100%) !important;
}

.lc-notification.lc-type-info .lc-notification-title {
  color: #60a5fa !important;
}

@media (max-width: 480px) {
  .lc-notification-container {
    right: 8px !important;
    left: 8px !important;
    max-width: none !important;
    width: auto !important;
  }

  .lc-notification {
    padding: 12px 14px !important;
  }

  .lc-notification-icon {
    font-size: 24px !important;
  }

  .lc-notification-title {
    font-size: 13px !important;
  }

  .lc-notification-message {
    font-size: 12px !important;
  }
}

/* Alert Banner */
.lc-alert-banner {
  position: fixed !important;
  top: var(--lc-header-height) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999998 !important;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: white !important;
  padding: 0 !important;
  overflow: hidden !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease !important;
  will-change: auto !important;
}

.lc-alert-banner.active {
  max-height: 60px !important;
  opacity: 1 !important;
  padding: 10px 20px !important;
  will-change: max-height, opacity !important;
}

.lc-alert-banner-content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

.lc-alert-banner-icon {
  font-size: 18px !important;
  animation: lcAlertPulse 2s infinite !important;
}

@keyframes lcAlertPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }
}

.lc-alert-banner-text {
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

.lc-alert-banner-close {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  color: white !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  transition: background 0.2s !important;
}

.lc-alert-banner-close:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

/* Alert Banner Active - Push content down to prevent overlap */
body.lc-banner-active {
  padding-top: 60px !important;
}

/* Transition for smooth padding change */
body {
  transition: padding-top 0.3s ease !important;
}

/* Mobile Responsive */
@media (max-width: 900px) {
  .lc-nav-tabs {
    display: none !important;
  }

  .lc-user-name {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .lc-header {
    padding: 0 12px !important;
  }

  .lc-send-btn span:last-child,
  .lc-redeem-btn span:last-child {
    display: none !important;
  }

  .lc-send-btn,
  .lc-redeem-btn {
    padding: 8px 12px !important;
  }
}

@media (max-width: 500px) {
  .lc-logo-text {
    display: none !important;
  }

  .lc-balance-display {
    padding: 6px 10px !important;
  }

  .lc-balance-value {
    font-size: 14px !important;
  }
}

/* ============================================
   VIP PROFILE DROPDOWN - STAKE.COM INSPIRED
   ============================================ */

.lc-profile-wrapper {
  position: relative !important;
}

.lc-user-profile {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 14px 6px 6px !important;
  background: var(--lc-bg-elevated) !important;
  border-radius: 30px !important;
  border: 1px solid var(--lc-border-color) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.lc-user-profile:hover {
  border-color: var(--lc-lemon-gold) !important;
  background: var(--lc-bg-hover) !important;
}

.lc-user-profile.active {
  border-color: var(--lc-lemon-gold) !important;
  background: var(--lc-bg-hover) !important;
}

.lc-profile-chevron {
  font-size: 10px !important;
  color: var(--lc-text-secondary) !important;
  margin-left: 2px !important;
  transition: transform 0.2s ease !important;
}

.lc-user-profile.active .lc-profile-chevron {
  transform: rotate(180deg) !important;
  color: var(--lc-lemon-gold) !important;
}

.lc-vip-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  width: 340px !important;
  background: linear-gradient(180deg, #1a1d26 0%, #141720 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
  z-index: 1000000 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-10px) scale(0.98) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
}

.lc-vip-dropdown.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
}

/* Stake-style Header */
.lc-vip-dropdown-header {
  padding: 20px 20px 16px !important;
  background: linear-gradient(180deg, rgba(255, 217, 61, 0.08) 0%, transparent 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.lc-vip-user-info {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.lc-vip-avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  border: 3px solid var(--lc-lemon-gold) !important;
  object-fit: cover !important;
  box-shadow: 0 0 20px rgba(255, 217, 61, 0.3) !important;
}

.lc-vip-user-details {
  flex: 1 !important;
}

.lc-vip-username {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--lc-text) !important;
  margin-bottom: 4px !important;
}

.lc-vip-rank-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.lc-vip-rank-badge.tier-none {
  background: rgba(100, 100, 100, 0.2) !important;
  color: #888 !important;
}

.lc-vip-rank-badge.tier-bronze {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.25), rgba(205, 127, 50, 0.1)) !important;
  color: #CD7F32 !important;
  border: 1px solid rgba(205, 127, 50, 0.4) !important;
}

.lc-vip-rank-badge.tier-silver {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.25), rgba(192, 192, 192, 0.1)) !important;
  color: #C0C0C0 !important;
  border: 1px solid rgba(192, 192, 192, 0.4) !important;
}

.lc-vip-rank-badge.tier-gold {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 215, 0, 0.1)) !important;
  color: #FFD700 !important;
  border: 1px solid rgba(255, 215, 0, 0.5) !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4) !important;
}

.lc-vip-rank-badge.tier-platinum {
  background: linear-gradient(135deg, rgba(229, 228, 226, 0.25), rgba(229, 228, 226, 0.1)) !important;
  color: #E5E4E2 !important;
  border: 1px solid rgba(229, 228, 226, 0.4) !important;
  text-shadow: 0 0 8px rgba(229, 228, 226, 0.4) !important;
}

.lc-vip-rank-badge.tier-diamond {
  background: linear-gradient(135deg, rgba(185, 242, 255, 0.3), rgba(185, 242, 255, 0.1)) !important;
  color: #B9F2FF !important;
  border: 1px solid rgba(185, 242, 255, 0.5) !important;
  text-shadow: 0 0 10px rgba(185, 242, 255, 0.6) !important;
  animation: lcDiamondGlow 2s ease-in-out infinite !important;
}

@keyframes lcDiamondGlow {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(185, 242, 255, 0.3);
  }

  50% {
    box-shadow: 0 0 20px rgba(185, 242, 255, 0.5);
  }
}

/* Stake-style Progress Section */
.lc-vip-dropdown-body {
  padding: 16px 20px 20px !important;
}

.lc-vip-progress-section {
  margin-bottom: 16px !important;
}

.lc-vip-progress-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

.lc-vip-progress-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.lc-vip-progress-percent {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--lc-lemon-gold) !important;
}

/* Stake-style Progress Bar */
.lc-vip-progress-bar {
  height: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  position: relative !important;
}

.lc-vip-progress-fill {
  height: 100% !important;
  border-radius: 4px !important;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.lc-vip-progress-fill::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) !important;
  animation: lcShimmer 2.5s infinite !important;
}

@keyframes lcShimmer {
  100% {
    left: 100%;
  }
}

.lc-vip-progress-fill.tier-none {
  background: linear-gradient(90deg, #555, #444) !important;
}

.lc-vip-progress-fill.tier-bronze {
  background: linear-gradient(90deg, #CD7F32, #A0522D) !important;
}

.lc-vip-progress-fill.tier-silver {
  background: linear-gradient(90deg, #C0C0C0, #A8A8A8) !important;
}

.lc-vip-progress-fill.tier-gold {
  background: linear-gradient(90deg, #FFD700, #FFA500) !important;
}

.lc-vip-progress-fill.tier-platinum {
  background: linear-gradient(90deg, #E5E4E2, #C0C0C0) !important;
}

.lc-vip-progress-fill.tier-diamond {
  background: linear-gradient(90deg, #B9F2FF, #00CED1) !important;
}

.lc-vip-progress-fill.tier-obsidian {
  background: linear-gradient(90deg, #9333ea, #2d1b4e) !important;
}

/* Stake-style Next Rank Info */
.lc-vip-next-rank {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 10px !important;
  padding: 10px 12px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.lc-vip-next-label {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

.lc-vip-next-value {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--lc-lemon-gold) !important;
  font-family: 'Oswald', 'Inter', sans-serif !important;
}

.lc-vip-next-tier {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Stake-style Stats Grid */
.lc-vip-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.lc-vip-stat {
  padding: 14px 12px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border-radius: 10px !important;
  text-align: center !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.lc-vip-stat-value {
  font-family: 'Oswald', 'Inter', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--lc-lemon-gold) !important;
  margin-bottom: 4px !important;
  letter-spacing: 0.5px !important;
}

.lc-vip-stat-label {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-weight: 600 !important;
}

/* Max Rank Banner */
.lc-vip-max-rank {
  text-align: center !important;
  padding: 16px !important;
  background: linear-gradient(135deg, rgba(255, 217, 61, 0.15), rgba(255, 215, 0, 0.05)) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 217, 61, 0.3) !important;
}

.lc-vip-max-text {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--lc-lemon-gold) !important;
  text-shadow: 0 0 20px rgba(255, 217, 61, 0.5) !important;
}

/* VIP Perks Section */
.lc-vip-perks {
  margin-top: 14px !important;
  padding: 12px !important;
  background: rgba(255, 217, 61, 0.08) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 217, 61, 0.15) !important;
}

.lc-vip-perks-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--lc-lemon-gold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 10px !important;
}

/* VIP Bonus Buttons */
.lc-vip-bonus-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.lc-vip-bonus-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 12px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
}

.lc-vip-bonus-btn:hover:not(:disabled) {
  background: rgba(255, 217, 61, 0.15) !important;
  border-color: rgba(255, 217, 61, 0.4) !important;
  transform: translateY(-1px) !important;
}

.lc-vip-bonus-btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

.lc-vip-bonus-btn.available {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1)) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  animation: lcBonusPulse 2s ease-in-out infinite !important;
}

.lc-vip-bonus-btn.available:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.15)) !important;
  border-color: rgba(34, 197, 94, 0.6) !important;
}

@keyframes lcBonusPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }

  50% {
    box-shadow: 0 0 10px 2px rgba(34, 197, 94, 0.3);
  }
}

/* Mini bonus button - purple when available */
.lc-vip-mini-btn.available {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.1)) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
  animation: lcMiniBonusPulse 2s ease-in-out infinite !important;
}

.lc-vip-mini-btn.available:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(168, 85, 247, 0.15)) !important;
  border-color: rgba(168, 85, 247, 0.6) !important;
}

.lc-vip-mini-btn.available .lc-vip-bonus-status {
  color: #a855f7 !important;
}

@keyframes lcMiniBonusPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4);
  }

  50% {
    box-shadow: 0 0 10px 2px rgba(168, 85, 247, 0.3);
  }
}

.lc-vip-bonus-btn.claiming {
  opacity: 0.7 !important;
  pointer-events: none !important;
}

.lc-vip-bonus-info {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.lc-vip-bonus-icon {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.lc-vip-bonus-icon svg {
  width: 100% !important;
  height: 100% !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.lc-vip-bonus-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--lc-text) !important;
}

.lc-vip-bonus-multiplier {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--lc-lemon-gold) !important;
  background: rgba(255, 217, 61, 0.15) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}

.lc-vip-bonus-status {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.lc-vip-bonus-status.available {
  color: #22c55e !important;
}

.lc-vip-bonus-status.cooldown {
  color: rgba(255, 255, 255, 0.4) !important;
}

.lc-vip-bonus-amount {
  font-family: 'Oswald', 'Inter', sans-serif !important;
  color: var(--lc-lemon-gold) !important;
}

.lc-vip-perks-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.lc-vip-perk {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.lc-vip-perk span {
  font-weight: 700 !important;
  color: var(--lc-lemon-gold) !important;
}

.lc-vip-perk-locked {
  opacity: 0.5 !important;
  font-style: italic !important;
}

/* Stake-style Footer */
.lc-vip-dropdown-footer {
  padding: 12px 16px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  display: flex !important;
  gap: 8px !important;
}

.lc-vip-footer-btn {
  flex: 1 !important;
  padding: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  text-decoration: none !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

.lc-vip-footer-btn:hover {
  background: rgba(255, 217, 61, 0.15) !important;
  border-color: rgba(255, 217, 61, 0.3) !important;
  color: var(--lc-lemon-gold) !important;
}

@media (max-width: 400px) {
  .lc-vip-dropdown {
    width: 300px !important;
    right: -40px !important;
  }

  .lc-vip-avatar {
    width: 44px !important;
    height: 44px !important;
  }
}

/* ============================================
   SKELETON LOADING STATES
   Prevents CLS by reserving layout space
   ============================================ */

/* Skeleton wrapper - matches .lc-user-info layout */
.lc-skeleton-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Base skeleton element */
.lc-skeleton {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.12) 50%,
      rgba(255, 255, 255, 0.06) 100%) !important;
  background-size: 200% 100% !important;
  animation: lcSkeletonPulse 1.5s ease-in-out infinite !important;
  border-radius: 18px !important;
}

/* Balance skeleton - matches .lc-balance-display dimensions */
.lc-skeleton-balance {
  width: 110px !important;
  height: 36px !important;
  border: 1px solid rgba(255, 217, 61, 0.15) !important;
}

/* Button skeleton - matches .lc-send-btn / .lc-redeem-btn dimensions */
.lc-skeleton-btn {
  width: 80px !important;
  height: 36px !important;
}

/* Profile skeleton wrapper */
.lc-skeleton-profile {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Avatar skeleton - matches .lc-user-avatar dimensions (32x32 + 2px border) */
.lc-skeleton-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* Name skeleton */
.lc-skeleton-name {
  width: 80px !important;
  height: 16px !important;
  border-radius: 8px !important;
}

/* Skeleton pulse animation */
@keyframes lcSkeletonPulse {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ============================================
   FADE-IN TRANSITIONS
   Smooth transition from skeleton to content
   ============================================ */

/* Loading state - content hidden */
.lc-user-info.lc-loading {
  /* Content visible during skeleton phase */
}

/* Fade-in transition base */
.lc-user-info.lc-fade-in {
  opacity: 0 !important;
  transition: opacity 200ms ease-out !important;
}

/* Visible state - content fades in */
.lc-user-info.lc-fade-in.lc-visible {
  opacity: 1 !important;
}

/* ============================================
   LAYOUT STABILITY (CLS Prevention)
   Explicit dimensions on dynamic elements
   ============================================ */

/* Reserve space for user info section to prevent CLS */
.lc-user-info {
  min-height: 36px !important;
}

/* Ensure avatar images have explicit dimensions to prevent reflow */
.lc-user-avatar {
  width: 32px !important;
  height: 32px !important;
  /* Prevent layout shift while image loads */
  aspect-ratio: 1 / 1 !important;
}

/* VIP dropdown avatar explicit dimensions */
.lc-vip-avatar {
  width: 48px !important;
  height: 48px !important;
  aspect-ratio: 1 / 1 !important;
}

/* Balance display minimum width to prevent layout shift */
.lc-balance-display {
  min-width: 100px !important;
}

/* Ensure buttons have consistent width */
.lc-send-btn,
.lc-redeem-btn {
  min-width: 70px !important;
}

/* ============================================
   MOBILE SKELETON ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  .lc-skeleton-wrapper {
    gap: 8px !important;
  }

  .lc-skeleton-balance {
    width: 90px !important;
  }

  .lc-skeleton-btn {
    width: 36px !important;
    padding: 0 !important;
  }

  .lc-skeleton-name {
    display: none !important;
  }
}

/* ============================================
   ACCESSIBILITY: FOCUS-VISIBLE STATES
   Keyboard navigation support for all
   interactive elements
   ============================================ */

/* Define accent color for focus outlines */
:root {
  --lc-focus-outline-color: var(--lc-lemon-gold, #ffd93d);
  --lc-focus-outline-width: 2px;
  --lc-focus-outline-offset: 2px;
}

/* Base focus-visible styles for all interactive elements */
.lc-logo:focus-visible,
.lc-nav-tab:focus-visible,
.lc-balance-display:focus-visible,
.lc-send-btn:focus-visible,
.lc-redeem-btn:focus-visible,
.lc-user-profile:focus-visible,
.lc-admin-btn:focus-visible,
.lc-login-btn:focus-visible,
.lc-logout-btn:focus-visible {
  outline: var(--lc-focus-outline-width) solid var(--lc-focus-outline-color) !important;
  outline-offset: var(--lc-focus-outline-offset) !important;
}

/* Modal and form interactive elements */
.lc-modal-btn:focus-visible,
.lc-modal-btn-cancel:focus-visible,
.lc-modal-btn-send:focus-visible,
.lc-modal-btn-vault:focus-visible,
.lc-quick-amount-btn:focus-visible,
.lc-vault-tab:focus-visible,
.lc-form-input:focus-visible,
.lc-user-suggestion:focus-visible {
  outline: var(--lc-focus-outline-width) solid var(--lc-focus-outline-color) !important;
  outline-offset: var(--lc-focus-outline-offset) !important;
}

/* Notification and alert close buttons */
.lc-notification-close:focus-visible,
.lc-alert-banner-close:focus-visible {
  outline: var(--lc-focus-outline-width) solid var(--lc-focus-outline-color) !important;
  outline-offset: var(--lc-focus-outline-offset) !important;
}

/* VIP dropdown interactive elements */
.lc-vip-bonus-btn:focus-visible,
.lc-vip-footer-btn:focus-visible {
  outline: var(--lc-focus-outline-width) solid var(--lc-focus-outline-color) !important;
  outline-offset: var(--lc-focus-outline-offset) !important;
}

/* Header pill buttons (generic class) */
.lc-header-pill:focus-visible {
  outline: var(--lc-focus-outline-width) solid var(--lc-focus-outline-color) !important;
  outline-offset: var(--lc-focus-outline-offset) !important;
}

/* Form input focus enhancement - combine with existing :focus styles */
.lc-form-input:focus-visible {
  border-color: var(--lc-green) !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2) !important;
  outline: var(--lc-focus-outline-width) solid var(--lc-focus-outline-color) !important;
  outline-offset: var(--lc-focus-outline-offset) !important;
}

/* Remove default focus outline for mouse users */
/* Only hide focus when :focus-visible is NOT matched */
.lc-logo:focus:not(:focus-visible),
.lc-nav-tab:focus:not(:focus-visible),
.lc-balance-display:focus:not(:focus-visible),
.lc-send-btn:focus:not(:focus-visible),
.lc-redeem-btn:focus:not(:focus-visible),
.lc-user-profile:focus:not(:focus-visible),
.lc-admin-btn:focus:not(:focus-visible),
.lc-login-btn:focus:not(:focus-visible),
.lc-logout-btn:focus:not(:focus-visible),
.lc-modal-btn:focus:not(:focus-visible),
.lc-modal-btn-cancel:focus:not(:focus-visible),
.lc-modal-btn-send:focus:not(:focus-visible),
.lc-modal-btn-vault:focus:not(:focus-visible),
.lc-quick-amount-btn:focus:not(:focus-visible),
.lc-vault-tab:focus:not(:focus-visible),
.lc-user-suggestion:focus:not(:focus-visible),
.lc-notification-close:focus:not(:focus-visible),
.lc-alert-banner-close:focus:not(:focus-visible),
.lc-vip-bonus-btn:focus:not(:focus-visible),
.lc-vip-footer-btn:focus:not(:focus-visible),
.lc-header-pill:focus:not(:focus-visible) {
  outline: none !important;
}

/* Keep form input :focus styles for all users (better UX) */
/* but enhance with focus-visible outline for keyboard users */

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --lc-focus-outline-width: 3px;
    --lc-focus-outline-color: #ffffff;
  }
}

/* Reduced motion: ensure focus is still visible without animations */
@media (prefers-reduced-motion: reduce) {
  .lc-logo:focus-visible,
  .lc-nav-tab:focus-visible,
  .lc-balance-display:focus-visible,
  .lc-send-btn:focus-visible,
  .lc-redeem-btn:focus-visible,
  .lc-user-profile:focus-visible,
  .lc-admin-btn:focus-visible,
  .lc-login-btn:focus-visible,
  .lc-logout-btn:focus-visible,
  .lc-modal-btn:focus-visible,
  .lc-quick-amount-btn:focus-visible,
  .lc-vault-tab:focus-visible,
  .lc-vip-bonus-btn:focus-visible,
  .lc-vip-footer-btn:focus-visible {
    transition: none !important;
  }
}