/* Enhanced Smooth Transitions - Specific Only */
.transition-all {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Leaderboard Page Styles - No Transitions to Prevent Flickering */
.coin-card:hover {
  background-color: #2a2a2a !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.coin-card:hover .coin-image {
  transform: scale(1.08);
}

/* Responsive Grid for Leaderboard */
@media (max-width: 1200px) {
  .leaderboard-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(7, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 900px) {
  .leaderboard-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(10, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 600px) {
  .leaderboard-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(20, 1fr) !important;
    gap: 20px !important;
  }
}

/* Smooth Page Transitions */
.fadeIn {
  animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.fadeOut {
  animation: fadeOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
}

/* Meme Card Hover Effects - No Transition to Prevent Flickering */
.meme-card:hover {
  background-color: #2a2a2a !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Smooth Button Transitions - Specific Only */
.sidebar-button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0);
}

.sidebar-button:hover {
  transform: translateY(-1px) translateZ(0);
}

.sidebar-button:active {
  transform: translateY(0) translateZ(0);
}

/* Smooth Input Transitions - Specific Only */
.form-input:focus, .form-textarea:focus, .form-select:focus {
  transform: scale(1.02);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
}

/* Animated Glowing Text for About to Blast Off */
.trending-title {
  background: linear-gradient(90deg, #fbbf24, #f59e0b, #fbbf24, #fde047, #fbbf24);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: glowFlow 2s linear infinite;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

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

/* Percentage Text Animations - Sync with Progress Bars */
@keyframes progressPulse0 {
  0% { opacity: 0.8; transform: scale(0.95); }
  25% { opacity: 1; transform: scale(1.05); }
  50% { opacity: 1; transform: scale(1.1); }
  75% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.8; transform: scale(0.95); }
}

@keyframes progressPulse1 {
  0% { opacity: 0.8; transform: scale(0.95); }
  30% { opacity: 1; transform: scale(1.05); }
  60% { opacity: 1; transform: scale(1.1); }
  90% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.8; transform: scale(0.95); }
}

@keyframes progressPulse2 {
  0% { opacity: 0.8; transform: scale(0.95); }
  20% { opacity: 1; transform: scale(1.05); }
  40% { opacity: 1; transform: scale(1.1); }
  60% { opacity: 1; transform: scale(1.1); }
  80% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.8; transform: scale(0.95); }
}

@keyframes progressPulse3 {
  0% { opacity: 0.8; transform: scale(0.95); }
  35% { opacity: 1; transform: scale(1.05); }
  70% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0.8; transform: scale(0.95); }
}

@keyframes progressPulse4 {
  0% { opacity: 0.8; transform: scale(0.95); }
  40% { opacity: 1; transform: scale(1.05); }
  80% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0.8; transform: scale(0.95); }
}

/* Progress Bar Width Animations - Each Coin Different */
@keyframes progressBar0 {
  0% { width: 60%; }
  25% { width: 65%; }
  50% { width: 70%; }
  75% { width: 68%; }
  100% { width: 60%; }
}

@keyframes progressBar1 {
  0% { width: 70%; }
  30% { width: 75%; }
  60% { width: 80%; }
  90% { width: 72%; }
  100% { width: 70%; }
}

@keyframes progressBar2 {
  0% { width: 65%; }
  20% { width: 70%; }
  40% { width: 75%; }
  60% { width: 80%; }
  80% { width: 77%; }
  100% { width: 65%; }
}

@keyframes progressBar3 {
  0% { width: 75%; }
  35% { width: 80%; }
  70% { width: 85%; }
  100% { width: 75%; }
}

@keyframes progressBar4 {
  0% { width: 80%; }
  40% { width: 85%; }
  80% { width: 90%; }
  100% { width: 80%; }
}

/* Dynamic Percentage Text Animations - Numbers Change */
@keyframes percentageText0 {
  0% { content: "60% to bond"; opacity: 0.8; transform: scale(0.95); }
  25% { content: "65% to bond"; opacity: 1; transform: scale(1.05); }
  50% { content: "70% to bond"; opacity: 1; transform: scale(1.1); }
  75% { content: "68% to bond"; opacity: 1; transform: scale(1.05); }
  100% { content: "60% to bond"; opacity: 0.8; transform: scale(0.95); }
}

@keyframes percentageText1 {
  0% { content: "70% to bond"; opacity: 0.8; transform: scale(0.95); }
  30% { content: "75% to bond"; opacity: 1; transform: scale(1.05); }
  60% { content: "80% to bond"; opacity: 1; transform: scale(1.1); }
  90% { content: "72% to bond"; opacity: 1; transform: scale(1.05); }
  100% { content: "70% to bond"; opacity: 0.8; transform: scale(0.95); }
}

@keyframes percentageText2 {
  0% { content: "65% to bond"; opacity: 0.8; transform: scale(0.95); }
  20% { content: "70% to bond"; opacity: 1; transform: scale(1.05); }
  40% { content: "75% to bond"; opacity: 1; transform: scale(1.1); }
  60% { content: "80% to bond"; opacity: 1; transform: scale(1.1); }
  80% { content: "77% to bond"; opacity: 1; transform: scale(1.05); }
  100% { content: "65% to bond"; opacity: 0.8; transform: scale(0.95); }
}

@keyframes percentageText3 {
  0% { content: "75% to bond"; opacity: 0.8; transform: scale(0.95); }
  35% { content: "80% to bond"; opacity: 1; transform: scale(1.05); }
  70% { content: "85% to bond"; opacity: 1; transform: scale(1.1); }
  100% { content: "75% to bond"; opacity: 0.8; transform: scale(0.95); }
}

@keyframes percentageText4 {
  0% { content: "80% to bond"; opacity: 0.8; transform: scale(0.95); }
  40% { content: "85% to bond"; opacity: 1; transform: scale(1.05); }
  80% { content: "90% to bond"; opacity: 1; transform: scale(1.1); }
  100% { content: "80% to bond"; opacity: 0.8; transform: scale(0.95); }
}

/* Dynamic Market Cap Animations - Using CSS Custom Properties */
@keyframes marketCapDynamic0 {
  0% { 
    --mc-value: 45;
    transform: scale(1); 
  }
  25% { 
    --mc-value: 48;
    transform: scale(1.02); 
  }
  50% { 
    --mc-value: 52;
    transform: scale(1.05); 
  }
  75% { 
    --mc-value: 50;
    transform: scale(1.03); 
  }
  100% { 
    --mc-value: 45;
    transform: scale(1); 
  }
}

@keyframes marketCapDynamic1 {
  0% { 
    --mc-value: 55;
    transform: scale(1); 
  }
  30% { 
    --mc-value: 58;
    transform: scale(1.03); 
  }
  60% { 
    --mc-value: 62;
    transform: scale(1.06); 
  }
  90% { 
    --mc-value: 59;
    transform: scale(1.02); 
  }
  100% { 
    --mc-value: 55;
    transform: scale(1); 
  }
}

@keyframes marketCapDynamic2 {
  0% { 
    --mc-value: 50;
    transform: scale(1); 
  }
  20% { 
    --mc-value: 53;
    transform: scale(1.02); 
  }
  40% { 
    --mc-value: 56;
    transform: scale(1.04); 
  }
  60% { 
    --mc-value: 60;
    transform: scale(1.06); 
  }
  80% { 
    --mc-value: 58;
    transform: scale(1.05); 
  }
  100% { 
    --mc-value: 50;
    transform: scale(1); 
  }
}

@keyframes marketCapDynamic3 {
  0% { 
    --mc-value: 60;
    transform: scale(1); 
  }
  35% { 
    --mc-value: 63;
    transform: scale(1.03); 
  }
  70% { 
    --mc-value: 67;
    transform: scale(1.05); 
  }
  100% { 
    --mc-value: 60;
    transform: scale(1); 
  }
}

@keyframes marketCapDynamic4 {
  0% { 
    --mc-value: 65;
    transform: scale(1); 
  }
  40% { 
    --mc-value: 68;
    transform: scale(1.04); 
  }
  80% { 
    --mc-value: 72;
    transform: scale(1.06); 
  }
  100% { 
    --mc-value: 65;
    transform: scale(1); 
  }
}

/* Flowing Animation for 100% Bonded */
@keyframes flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/* Crown Glow Animation - Reduced */
@keyframes crownGlow {
  0% {
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
    transform: scale(1);
  }
  100% {
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6), 0 0 15px rgba(255, 215, 0, 0.3);
    transform: scale(1.05);
  }
}

/* Enhanced Loading Animation */
@keyframes loadingSlide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100vw);
  }
}

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

@keyframes loadingPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

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

.loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b, #d97706, #fbbf24);
  background-size: 200% 100%;
  z-index: 9999;
  animation: loadingSlide 1.5s ease-out forwards, loadingShimmer 0.8s ease-out forwards;
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.6);
}

.loading-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: loadingShimmer 0.8s ease-out forwards;
}

.loading-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b, #d97706);
  animation: loadingPulse 1s ease-in-out infinite;
}

/* Enhanced Desktop Optimizations */

/* Improved header styling */
header {
  backdrop-filter: blur(10px);
  background: rgba(17, 17, 17, 0.95) !important;
}

/* Normal button styling */
.bg-yellow-400 {
  transition: all 0.2s ease;
}

.bg-yellow-400:hover {
  background: #f59e0b !important;
}

/* Profile button enhancements */
.bg-\[#1a1a1a\] {
  background: rgba(26, 26, 26, 0.8) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(34, 34, 34, 0.5);
  transition: all 0.2s ease;
}

.bg-\[#1a1a1a\]:hover {
  background: rgba(34, 34, 34, 0.9) !important;
  border-color: rgba(59, 130, 246, 0.3);
}

/* Enhanced sidebar navigation */
aside.w-64 button {
  transition: all 0.2s ease;
  border-radius: 8px;
}

aside.w-64 button:hover {
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Improved card styling */
.bg-\[#141414\] {
  background: rgba(20, 20, 20, 0.8) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(34, 34, 34, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Enhanced input styling */
input[type="number"], input[type="text"] {
  background: #0f0f0f !important;
  border: 1px solid rgba(34, 34, 34, 0.5) !important;
  backdrop-filter: blur(4px);
  transition: all 0.2s ease;
}

input[type="number"]:focus, input[type="text"]:focus {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
}

/* Minimal custom CSS; most styling is via Tailwind classes */
@keyframes glowRing {
  0%   { box-shadow: 0 0 0px rgba(250,204,21,0), 0 0 10px rgba(250,204,21,0.55); }
  50%  { box-shadow: 0 0 16px rgba(250,204,21,0.9), 0 0 36px rgba(250,204,21,0.45); }
  100% { box-shadow: 0 0 0px rgba(250,204,21,0), 0 0 10px rgba(250,204,21,0.55); }
}
@keyframes flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Smooth fade in/out animation for save popup */
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  15% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  85% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
}
/* Smooth scrolling when tabs or modals reposition */
html { scroll-behavior: smooth; }

/* Ensure navbar is visible */
aside {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Fix any potential z-index issues */
.sidebar {
  z-index: 10;
  position: relative;
}

/* Optimized left sidebar - clean and consistent */
aside.w-64 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 50 !important;
  border-right: 1px solid #222 !important;
  background: #111 !important;
  width: 256px !important;
}

/* Smooth scrolling for sidebar */
aside.w-64::-webkit-scrollbar {
  width: 4px;
}

aside.w-64::-webkit-scrollbar-track {
  background: transparent;
}

aside.w-64::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 2px;
}

aside.w-64::-webkit-scrollbar-thumb:hover {
  background: #444;
}

/* Force vertical stacking for right sidebar */
aside.col-span-3 {
  display: flex !important;
  flex-direction: column !important;
  width: 25% !important; /* 3/12 = 25% */
  max-width: 25% !important;
  min-width: 25% !important;
  position: sticky !important;
  top: 0 !important;
  margin-top: 0 !important; /* Reset to 0 for proper alignment */
  align-self: flex-start !important;
  margin-left: 0 !important; /* Reset to normal alignment */
  margin-bottom: 0 !important; /* Reset to normal */
}

/* Force the sidebar sections to use full width */
aside.col-span-3 > div {
  width: 100% !important;
  max-width: 100% !important;
}

aside.col-span-3 .space-y-3 {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Match main section spacing to right sidebar */
section.col-span-9 .space-y-6 {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
}

/* Force main section spacing to match right sidebar */
.col-span-9 > * + * {
  margin-top: 1.5rem !important;
}

/* Main content sections - proper width for side-by-side layout */
section.col-span-9 {
  width: 75% !important; /* 9/12 = 75% */
  max-width: 75% !important;
  margin-left: 0 !important; /* Reset to normal alignment */
  padding-right: 1rem !important; /* Add right padding for spacing */
}

/* Ensure all main content sections maintain reduced width */
section.col-span-9 > * {
  width: 100% !important;
  max-width: 100% !important;
}


/* Ensure right sidebar aligns with comments section */
aside.col-span-3::after {
  content: '';
  flex: 1;
  min-height: 0;
}

/* Ensure each component takes full width */
aside.col-span-3 > div > * {
  width: 100% !important;
  display: block !important;
}

/* Force vertical layout for trading components */
.trade-panel, .bonding-curve, .holders-table {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 0.75rem !important; /* Match reduced right sidebar spacing */
}

/* Ensure table uses full width */
.holders-table table {
  width: 100% !important;
  table-layout: fixed !important;
}

.holders-table .table-fixed {
  width: 100% !important;
}

/* Ensure bonding curve header alignment */
.bonding-curve .flex.items-center.justify-between {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.bonding-curve h3 {
  margin: 0 !important;
  line-height: 1 !important;
}

.bonding-curve .text-yellow-400 {
  margin-top: 0.75rem !important;
  margin-bottom: 0 !important;
  line-height: 1 !important;
}

/* Ensure proper vertical alignment for bonding curve header */
.bonding-curve .flex.items-center.justify-between {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.bonding-curve .flex.items-center.justify-between h3,
.bonding-curve .flex.items-center.justify-between span {
  line-height: 1 !important;
  margin: 0 !important;
}

.bonding-curve .flex.items-center.justify-between {
  margin-bottom: 0.5rem !important;
}

/* Ensure bottom labels are properly spaced */
.bonding-curve .flex.justify-between {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.bonding-curve .flex.justify-between span {
  flex: 0 0 auto !important;
}

/* Force spacing between bonding curve elements */
.bonding-curve .text-yellow-400.mb-6 {
  margin-bottom: 1rem !important;
}

/* Override any flex layouts that might be causing horizontal display */
aside.col-span-3 * {
  flex-direction: column !important;
}

/* Exception for bonding curve - keep horizontal layout */
.bonding-curve .flex.items-center.justify-between {
  flex-direction: row !important;
}

.bonding-curve .flex.justify-between {
  flex-direction: row !important;
}

/* Exception for trade panel - keep horizontal layout */
.trade-panel .flex.w-full {
  flex-direction: row !important;
}

.trade-panel .flex.items-center.justify-between {
  flex-direction: row !important;
}

.trade-panel .flex {
  flex-direction: row !important;
}

/* Force all flex containers in trade panel to be horizontal */
.trade-panel * {
  flex-direction: row !important;
}

/* Exception for vertical elements in trade panel */
.trade-panel .space-y-2 {
  flex-direction: column !important;
}

.trade-panel .space-y-2 > * {
  flex-direction: column !important;
}

/* Specific fix for control row */
.trade-panel .flex.items-center.justify-between {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.trade-panel .flex.items-center.justify-between > div {
  flex-direction: row !important;
}

/* Specific fix for button container */
.trade-panel .flex.gap-1 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

.trade-panel .flex.gap-1 button {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Adjust main content for fixed sidebar */
.flex-1.flex {
  margin-left: 0 !important; /* Reset to normal alignment */
}

/* Ensure proper grid layout for trading page */
.grid-cols-12 {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 1rem !important;
  align-items: start !important;
}

/* Ensure main content takes 9 columns */
.col-span-9 {
  grid-column: span 9 / span 9 !important;
}

/* Ensure sidebar takes 3 columns */
.col-span-3 {
  grid-column: span 3 / span 3 !important;
}

/* Trading Page Layout - Much wider sections */
main .grid.grid-cols-12 {
  max-width: 2000px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
}

/* Responsive layout fixes */
@media (max-width: 1200px) {
  .main-content {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .section-width {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 768px) {
  .grid-responsive {
    grid-template-columns: 1fr !important;
  }
  
  .sidebar {
    width: 200px !important;
  }
  
  .main-content {
    margin-left: 200px !important;
  }
}

/* Chart improvements */
.chart-container {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.chart-svg {
  width: 100%;
  height: 100%;
}

/* Fix text overflow */
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Modal positioning fix - ensure it appears above everything */
.fixed.inset-0 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;
}

/* Ensure sticky positioning works properly */
aside.col-span-3 {
  position: sticky !important;
  top: 5rem !important;
  align-self: start !important;
  z-index: 10 !important;
}

/* Ensure modal appears above left sidebar */

/* Ensure holders table header layout works properly */
.holders-table .flex.items-center.justify-between {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.holders-table h3 {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.holders-table button {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Force spacing above bonding curve gauge */
.bonding-curve .relative {
  margin-top: 1rem !important;
}

/* Enhanced border visibility for all sections */
.border-gray-800 {
  border-color: rgba(75, 85, 99, 0.8) !important; /* Increased opacity from 0.5 to 0.8 */
}

.border-gray-700 {
  border-color: rgba(55, 65, 81, 0.9) !important; /* Increased opacity from 0.7 to 0.9 */
}

.border-gray-600 {
  border-color: rgba(75, 85, 99, 0.95) !important; /* Increased opacity from 0.6 to 0.95 */
}

/* Make all section borders more prominent */
.border {
  border-width: 1.5px !important; /* Increased from 1px to 1.5px */
}

/* Enhanced card borders */
.bg-gray-900 {
  border-color: rgba(75, 85, 99, 0.8) !important;
}

/* Make input borders more visible */
.border-gray-600 {
  border-color: rgba(75, 85, 99, 0.8) !important;
}

/* Enhanced button borders */
.border-gray-700 {
  border-color: rgba(55, 65, 81, 0.9) !important;
}

/* ===== ENHANCED RESPONSIVE DESIGN ===== */

/* Enhanced responsive breakpoints with better mobile experience */
@media (max-width: 1200px) {
  /* Large tablet - reduce sidebar width */
  aside {
    width: 14rem !important;
  }
  
  .flex-1.flex {
    margin-left: 3.5rem !important;
  }
  
  /* Adjust main content sections */
  section.col-span-9 {
    width: 75% !important;
    margin-left: 20% !important;
  }
}

@media (max-width: 1000px) {
  /* Tablet - further sidebar reduction */
  aside {
    width: 12rem !important;
  }
  
  .flex-1.flex {
    margin-left: 3rem !important;
  }
  
  /* Adjust main content sections */
  section.col-span-9 {
    width: 80% !important;
    margin-left: 15% !important;
  }
}

@media (max-width: 900px) {
  /* Small tablet - more sidebar reduction */
  aside {
    width: 10rem !important;
  }
  
  .flex-1.flex {
    margin-left: 2.5rem !important;
  }
  
  /* Adjust main content sections */
  section.col-span-9 {
    width: 85% !important;
    margin-left: 10% !important;
  }
}

@media (max-width: 800px) {
  /* Large mobile - significant sidebar reduction */
  aside {
    width: 8rem !important;
  }
  
  .flex-1.flex {
    margin-left: 2rem !important;
  }
  
  /* Adjust main content sections */
  section.col-span-9 {
    width: 90% !important;
    margin-left: 5% !important;
  }
}

@media (max-width: 768px) {
  /* Enhanced mobile experience - hide sidebar but keep functionality */
  .flex-1.flex {
    margin-left: 0 !important;
  }
  
  /* Hide sidebar on mobile completely */
  aside {
    display: none !important;
  }
  
  /* Full width content on mobile */
  .grid-cols-12 {
    grid-template-columns: 1fr !important;
  }
  
  /* Adjust trade panel for mobile - ONLY on mobile */
  aside.col-span-3 {
    position: relative !important;
    top: auto !important;
    margin-top: 1rem !important;
  }
  
  /* Stack trade panel below main content on mobile */
  .grid-cols-12 > div:first-child {
    grid-column: 1 / -1 !important;
  }
  
  .grid-cols-12 > aside {
    grid-column: 1 / -1 !important;
  }
  
  /* Enhanced mobile-friendly padding */
  .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Enhanced mobile header adjustments */
  header {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  
  /* Enhanced mobile button adjustments - make them bigger and more touch-friendly */
  .bg-yellow-400 {
    padding: 0.875rem 1.25rem !important;
    font-size: 1rem !important;
    min-height: 44px !important; /* iOS touch target minimum */
    border-radius: 8px !important;
  }
  
  /* Enhanced mobile text adjustments */
  .text-3xl {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }
  
  .text-2xl {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  .text-xl {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
  }
  
  /* Enhanced mobile spacing adjustments */
  .space-y-6 > * + * {
    margin-top: 1.25rem !important;
  }
  
  .space-y-4 > * + * {
    margin-top: 1rem !important;
  }
  
  /* Enhanced mobile card adjustments */
  .bg-gray-900 {
    padding: 1.25rem !important;
    border-radius: 12px !important;
    margin-bottom: 1rem !important;
  }
  
  /* Enhanced mobile chart optimizations */
  .h-64 {
    height: 14rem !important;
  }
  
  /* Enhanced mobile input adjustments */
  input[type="text"], input[type="number"] {
    padding: 0.875rem !important;
    font-size: 1rem !important;
    min-height: 44px !important; /* iOS touch target minimum */
    border-radius: 8px !important;
  }
  
  /* Enhanced mobile five variable buttons - better touch targets */
  .grid-cols-5 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  
  .grid-cols-5 button {
    padding: 0.75rem 0.5rem !important;
    font-size: 0.875rem !important;
    text-align: center !important;
    min-height: 44px !important;
    border-radius: 8px !important;
  }
  
  /* Enhanced mobile table adjustments */
  table {
    font-size: 0.875rem !important;
    border-spacing: 0.5rem !important;
  }
  
  /* Enhanced mobile modal adjustments */
  .fixed.inset-0 {
    padding: 1rem !important;
  }
  
  /* Enhanced mobile profile dropdown adjustments */
  .absolute.right-0 {
    right: 0.5rem !important;
    width: calc(100vw - 1rem) !important;
    max-width: 22rem !important;
  }
  
  /* Hide about section on mobile */
  .about-section {
    display: none !important;
  }
  
  /* Make comments section full width on mobile */
  .comments-section {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Enhanced mobile footer - centered and stacked */
  footer .flex {
    flex-direction: column !important;
    gap: 0.75rem !important;
    text-align: center !important;
    align-items: center !important;
    padding: 1.5rem 1rem !important;
  }
  
  /* Center copyright and report between privacy menu */
  footer .flex > div:first-child,
  footer .flex > button:last-child {
    order: 2 !important;
  }
  
  footer .flex > div:nth-child(2) {
    order: 1 !important;
  }
  
  /* Remove margins from footer elements */
  footer .ml-\[21%\] {
    margin-left: 0 !important;
  }
  
  footer .mr-\[28\.5%\] {
    margin-right: 0 !important;
  }
  
  /* Enhanced mobile meme title optimizations */
  .meme-title {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
  }
  
  .meme-symbol {
    font-size: 1.125rem !important;
  }
  
  .meme-creator {
    font-size: 0.875rem !important;
  }
  
  /* Enhanced mobile touch interactions */
  button, .meme-card, .explore-card {
    -webkit-tap-highlight-color: rgba(251, 191, 36, 0.2) !important;
    touch-action: manipulation !important;
  }
  
  /* Enhanced mobile scrolling */
  body {
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Enhanced mobile focus states */
  button:focus, input:focus, textarea:focus {
    outline: 2px solid #fbbf24 !important;
    outline-offset: 2px !important;
  }
}

@media (max-width: 640px) {
  /* Small mobile - further optimizations */
  .text-2xl {
    font-size: 1.5rem !important;
  }
  
  .text-xl {
    font-size: 1.25rem !important;
  }
  
  /* Compact buttons */
  .px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  /* Smaller spacing */
  .space-y-6 > * + * {
    margin-top: 1rem !important;
  }
  
  /* Extra small mobile adjustments */
  .text-sm {
    font-size: 0.75rem !important;
  }
  
  /* Compact header */
  header {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  
  /* Compact cards */
  .bg-gray-900 {
    padding: 0.75rem !important;
  }
  
  /* Smaller chart */
  .h-64 {
    height: 10rem !important;
  }
  
  /* Compact buttons */
  .bg-yellow-400 {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.75rem !important;
  }
  
  /* Compact input fields */
  input[type="text"], input[type="number"] {
    padding: 0.5rem !important;
    font-size: 0.875rem !important;
  }
  
  /* Compact button grid */
  .grid-cols-5 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.25rem !important;
  }
  
  /* Compact table */
  table {
    font-size: 0.75rem !important;
  }
  
  /* Compact modal */
  .fixed.inset-0 {
    padding: 0.5rem !important;
  }
}

@media (max-width: 480px) {
  /* Very small mobile - maximum compactness */
  .text-3xl {
    font-size: 1.25rem !important;
  }
  
  .text-2xl {
    font-size: 1.125rem !important;
  }
  
  .text-xl {
    font-size: 1rem !important;
  }
  
  /* Ultra compact header */
  header {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  
  /* Ultra compact cards */
  .bg-gray-900 {
    padding: 0.5rem !important;
  }
  
  /* Ultra compact chart */
  .h-64 {
    height: 8rem !important;
  }
  
  /* Ultra compact buttons */
  .bg-yellow-400 {
    padding: 0.25rem 0.375rem !important;
    font-size: 0.625rem !important;
  }
  
  /* Ultra compact input fields */
  input[type="text"], input[type="number"] {
    padding: 0.375rem !important;
    font-size: 0.75rem !important;
  }
  
  /* Ultra compact button grid */
  .grid-cols-5 {
    grid-template-columns: 1fr !important;
    gap: 0.125rem !important;
  }
  
  /* Ultra compact table */
  table {
    font-size: 0.625rem !important;
  }
  
  /* Ultra compact modal */
  .fixed.inset-0 {
    padding: 0.25rem !important;
  }
}

/* Mobile menu toggle button */
.mobile-menu-toggle {
  display: none !important;
  position: fixed !important;
  top: 1rem !important;
  left: 1rem !important;
  z-index: 60 !important;
  background: #1f2937 !important;
  border: 1px solid #374151 !important;
  color: white !important;
  padding: 0.5rem !important;
  border-radius: 0.375rem !important;
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: block !important;
  }
}

/* Overlay for mobile menu */
.mobile-overlay {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 40 !important;
}

@media (max-width: 768px) {
  .mobile-overlay.show {
    display: block !important;
  }
}