/* WoofFun UI v2 — Shiba Inu Professional Theme */
/* Pure CSS overrides, no JS changes needed */

/* ============================================================
   1. REFINED COLOR PALETTE & VARIABLES — Shiba Inu Theme
   ============================================================ */
:root {
  --bg0: #0f0f0f;
  --bg1: #141210;
  --bg2: #1c1916;
  --bg3: #25211d;
  --bg4: #2e2a25;
  --green: #F5A623;
  --green-light: rgba(245,166,35,0.06);
  --green-mid: rgba(245,166,35,0.18);
  --green-glow: #FF8C00;
  --red: #FF4757;
  --blue: #448AFF;
  --orange: #FFAB40;
  --purple: #a78bfa;
  --buy-green: #4ade80;
  --t1: #e8e0d4;
  --t2: #8a7e70;
  --t3: #524a40;
  --border: rgba(245,166,35,0.06);
  --radius: 12px;
  --rs: 8px;
  --glass-bg: rgba(20,18,16,0.7);
  --glass-border: 1px solid rgba(245,166,35,0.06);
  --ticker-bg: rgba(15,15,15,0.9);
  --ticker-text: #8a7e70;
  --ticker-fade-from: #0f0f0f;
  --skeleton-base: rgba(245,166,35,0.03);
  --skeleton-shine: rgba(245,166,35,0.06);
  --overlay-bg: rgba(0,0,0,0.5);
  --overlay-blur: 4px;
  --card-bg: #171412;
  --card-border: rgba(245,166,35,0.05);
  --card-hover-border: rgba(245,166,35,0.35);
}

.light {
  --bg0: #f5f2ee;
  --bg1: #ffffff;
  --bg2: #f0ebe5;
  --bg3: #e2dbd2;
  --bg4: #d4ccc2;
  --green: #E8960D;
  --green-light: rgba(232,150,13,0.06);
  --green-mid: rgba(232,150,13,0.18);
  --green-glow: #E8960D;
  --t1: #1a1510;
  --t2: #5a5046;
  --t3: #a09688;
  --border: rgba(0,0,0,0.06);
  --glass-bg: rgba(255,255,255,0.8);
  --ticker-bg: rgba(255,255,255,0.95);
  --ticker-text: #5a5046;
  --ticker-fade-from: #f5f2ee;
  --skeleton-base: rgba(0,0,0,0.04);
  --skeleton-shine: rgba(0,0,0,0.07);
  --card-bg: #ffffff;
  --card-border: rgba(0,0,0,0.06);
  --card-hover-border: rgba(232,150,13,0.45);
}

/* ============================================================
   2. GLOBAL REFINEMENTS
   ============================================================ */
html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  background: var(--bg0) !important;
  background-image: radial-gradient(ellipse 80% 50% at 50% -15%, rgba(245,166,35,0.03) 0%, transparent 55%) !important;
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.light body {
  background-image: radial-gradient(ellipse 80% 50% at 50% -15%, rgba(232,150,13,0.03) 0%, transparent 55%) !important;
}

/* Refined scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(245,166,35,0.12); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(245,166,35,0.2); }

/* Remove default focus ring, add custom */
*:focus-visible {
  outline: 2px solid rgba(245,166,35,0.3) !important;
  outline-offset: 2px;
}

/* ============================================================
   3. HEADER — Sleeker, more compact
   ============================================================ */
header.sticky {
  background: rgba(15,15,15,0.85) !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(245,166,35,0.06) !important;
}

.light header.sticky {
  background: rgba(255,255,255,0.8) !important;
}

header.sticky > div {
  height: 60px !important;
}

/* Logo glow refinement */
header.sticky img[alt="WoofFun"] {
  border-color: rgba(245,166,35,0.25) !important;
  box-shadow: 0 0 16px rgba(245,166,35,0.1) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
header.sticky img[alt="WoofFun"]:hover {
  box-shadow: 0 0 24px rgba(245,166,35,0.25) !important;
  transform: scale(1.05);
}

/* Nav links — pill-shaped */
header nav a {
  border-radius: 999px !important;
  padding: 6px 16px !important;
  font-size: 13px !important;
  letter-spacing: 0.02em;
}

/* Search input in header */
header input[type="text"],
header input[placeholder] {
  background: rgba(245,166,35,0.03) !important;
  border: 1px solid rgba(245,166,35,0.08) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  height: 36px;
  transition: all 0.25s ease !important;
}
header input:focus {
  border-color: var(--green) !important;
  background: rgba(245,166,35,0.06) !important;
  box-shadow: 0 0 20px rgba(245,166,35,0.08) !important;
}

/* Chain selector */
header select {
  border-radius: 999px !important;
  background: rgba(245,166,35,0.03) !important;
  border: 1px solid rgba(245,166,35,0.08) !important;
  font-size: 12px !important;
  height: 36px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
header select:hover, header select:focus {
  border-color: var(--green) !important;
}

/* Small icon buttons (lang, theme) */
header button[class*="w-9"][class*="h-9"] {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: rgba(245,166,35,0.03) !important;
  border: 1px solid rgba(245,166,35,0.08) !important;
}
header button[class*="w-9"][class*="h-9"]:hover {
  border-color: var(--green) !important;
  background: rgba(245,166,35,0.1) !important;
  color: var(--green) !important;
}

/* ============================================================
   4. TICKER — Cleaner, more subtle
   ============================================================ */
header + div + div,
div.h-9.overflow-hidden {
  height: 32px !important;
  border-bottom: 1px solid rgba(245,166,35,0.04) !important;
}

/* Ticker items */
div.h-9.overflow-hidden span.flex {
  gap: 6px !important;
}
div.h-9.overflow-hidden span.font-bold {
  border-radius: 3px !important;
  font-size: 9px !important;
  padding: 1px 6px !important;
}

/* ============================================================
   5. BUTTONS — Green neon style
   ============================================================ */
.btn-green {
  background: linear-gradient(135deg, #FF8C00, #F5A623) !important;
  color: #000 !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 16px rgba(245,166,35,0.2), inset 0 1px rgba(255,255,255,0.15) !important;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
  border: none !important;
  letter-spacing: 0.02em;
}
.btn-green:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 24px rgba(245,166,35,0.3) !important;
  filter: brightness(1.08) !important;
}
.btn-green:active {
  transform: translateY(0) scale(0.98) !important;
}
.btn-green:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.btn-red {
  border-radius: 999px !important;
}

/* ============================================================
   6. TOKEN CARDS — Major overhaul
   ============================================================ */
.glass-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 12px !important;
  backdrop-filter: none !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}

/* Token card specific */
.token-card-enter.glass-card {
  padding: 16px !important;
  box-shadow: none !important;
  border: 1px solid var(--card-border) !important;
  position: relative;
}
.token-card-enter.glass-card:hover {
  border-color: var(--card-hover-border) !important;
  box-shadow: 0 0 24px rgba(245,166,35,0.06) !important;
  transform: translateY(-2px) !important;
}

/* Remove the top green bar on hover (too flashy) */
.token-card-enter.glass-card > div:first-child[class*="h-[3px]"] {
  display: none !important;
}

/* Token image — larger, cleaner */
.token-card-enter .w-12.h-12 {
  width: 56px !important;
  height: 56px !important;
  border-radius: 12px !important;
  border: 2px solid rgba(245,166,35,0.08) !important;
  box-shadow: none !important;
}
.token-card-enter .w-12.h-12 img {
  border-radius: 10px !important;
}

/* Token name */
.token-card-enter .font-bold.text-\[15px\] {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--t1) !important;
  letter-spacing: -0.01em;
}

/* Token symbol */
.token-card-enter .text-xs.font-mono {
  font-size: 11px !important;
  color: var(--t3) !important;
  letter-spacing: 0.05em;
}

/* ============================================================
   7. PROGRESS BAR — Skewed style (four.meme signature)
   ============================================================ */
.prog-fill {
  background: linear-gradient(90deg, #c47a10, #F5A623, #ffcb6b) !important;
  box-shadow: 0 0 8px rgba(245,166,35,0.3) !important;
  transform: skewX(-20deg);
  transform-origin: left center;
  position: relative;
}
.prog-fill::after {
  display: none !important;
}

/* Progress bar container — taller */
div.h-\[5px\] {
  height: 8px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(245,166,35,0.08);
  overflow: hidden;
}

/* Status badge — pill shape */
.token-card-enter span[class*="tracking-wider"][class*="px-2\\.5"] {
  border-radius: 999px !important;
  font-size: 9px !important;
  padding: 3px 10px !important;
  letter-spacing: 0.08em;
}

/* Raised amount text */
.token-card-enter .text-xs.text-\[var\(--t2\)\] strong {
  color: var(--t1) !important;
}

/* ============================================================
   8. SKELETON LOADING — Improved shimmer
   ============================================================ */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--skeleton-base) 0%,
    var(--skeleton-shine) 40%,
    var(--skeleton-base) 80%
  ) !important;
  background-size: 300% 100% !important;
  animation: skeleton-shimmer 1.8s ease-in-out infinite !important;
  border-radius: 6px !important;
}

@keyframes skeleton-shimmer {
  0% { background-position: 300% 0; }
  100% { background-position: -300% 0; }
}

/* ============================================================
   9. PAGE TRANSITION — Smoother
   ============================================================ */
@keyframes page-enter {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.page-enter {
  animation: page-enter 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) both !important;
}

/* Token card stagger animation */
@keyframes card-enter {
  0% { opacity: 0; transform: translateY(12px) scale(0.98); }
  100% { opacity: 1; transform: none; }
}
.token-card-enter {
  animation: card-enter 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) both !important;
}

/* ============================================================
   10. FILTER TABS — Pill style
   ============================================================ */
/* Filter container */
div.flex.gap-1.bg-\[var\(--bg2\)\].p-1 {
  background: rgba(245,166,35,0.03) !important;
  border-radius: 999px !important;
  padding: 3px !important;
  border: 1px solid rgba(245,166,35,0.06);
}
div.flex.gap-1.bg-\[var\(--bg2\)\].p-1 button {
  border-radius: 999px !important;
  font-size: 12px !important;
  padding: 5px 14px !important;
}

/* Sort dropdown */
select[class*="glass-bg"] {
  border-radius: 999px !important;
  font-size: 12px !important;
  height: 34px;
}

/* Search input in content area */
input.max-w-\[240px\] {
  border-radius: 999px !important;
  font-size: 12px !important;
  height: 34px;
}

/* Launch token button */
button[class*="btn-green"][class*="tracking-wide"] {
  border-radius: 999px !important;
  padding: 8px 20px !important;
}

/* ============================================================
   11. TOAST NOTIFICATIONS — Cleaner
   ============================================================ */
div.pointer-events-auto.glass-card {
  border-radius: 10px !important;
  background: var(--bg1) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

/* ============================================================
   12. MODAL OVERLAYS — Better backdrop
   ============================================================ */
.modal-overlay {
  background: rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Modal cards */
.modal-overlay > div.glass-card,
.modal-overlay > div > div.glass-card {
  border-radius: 16px !important;
  border: 1px solid rgba(245,166,35,0.08) !important;
  background: var(--bg1) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6) !important;
}

/* ============================================================
   13. SWAP CARD — Refined
   ============================================================ */
.swap-card {
  border-radius: 16px !important;
  border: 1px solid rgba(245,166,35,0.06) !important;
  background: var(--card-bg) !important;
}
.swap-card:hover {
  box-shadow: 0 8px 32px rgba(245,166,35,0.04) !important;
}

/* ============================================================
   14. FOOTER — Minimalist
   ============================================================ */
footer {
  background: var(--bg1) !important;
  border-top: 1px solid rgba(245,166,35,0.06) !important;
  padding: 32px 24px !important;
}
footer a svg {
  transition: color 0.2s ease, transform 0.2s ease;
}
footer a:hover svg {
  color: var(--green) !important;
  transform: scale(1.1);
}

/* ============================================================
   15. WALLET CONNECT BUTTON
   ============================================================ */
/* Connected state */
header button[class*="font-mono"][class*="text-xs"] {
  border-radius: 999px !important;
  height: 36px;
  background: rgba(245,166,35,0.04) !important;
  border: 1px solid rgba(245,166,35,0.12) !important;
}
header button[class*="font-mono"][class*="text-xs"]:hover {
  border-color: var(--green) !important;
}

/* Green dot indicator */
header button .w-2.h-2.rounded-full {
  animation: pulse-green 2s ease-in-out infinite;
}
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 6px var(--green); }
  50% { box-shadow: 0 0 12px var(--green), 0 0 4px var(--green); }
}

/* ============================================================
   16. TABLES (Ranking page)
   ============================================================ */
table.w-full th {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--t3) !important;
  font-weight: 600;
}
table.w-full td {
  font-size: 13px !important;
}
table.w-full tbody tr {
  transition: background 0.15s ease;
}
table.w-full tbody tr:hover {
  background: rgba(245,166,35,0.02);
}

/* ============================================================
   17. TOKEN DETAIL PAGE
   ============================================================ */
/* Chart container */
div.h-\[440px\] {
  border-radius: 12px !important;
  overflow: hidden;
  border: 1px solid rgba(245,166,35,0.06);
}

/* Buy/Sell toggle */
button.btn-green[class*="flex-1"],
button.btn-red[class*="flex-1"] {
  border-radius: 8px !important;
}

/* Input fields in trade panel */
div[class*="focus-within:border"] {
  border-radius: 10px !important;
  transition: all 0.2s ease;
}

/* ============================================================
   18. RESPONSIVE — MOBILE ENHANCEMENTS
   ============================================================ */
@media (max-width: 768px) {
  /* Header compact */
  header.sticky {
    padding: 0 12px !important;
  }
  header.sticky > div {
    height: 52px !important;
    gap: 8px !important;
  }

  /* Logo smaller */
  header.sticky img[alt="WoofFun"] {
    width: 32px !important;
    height: 32px !important;
  }
  header.sticky span.font-extrabold {
    font-size: 17px !important;
  }

  /* Main content padding */
  main.flex-1 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Single column cards */
  div[class*="grid-cols-"][class*="auto-fill"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Card — horizontal compact layout on mobile */
  .token-card-enter.glass-card {
    padding: 12px !important;
  }

  /* Token image slightly smaller */
  .token-card-enter .w-12.h-12 {
    width: 48px !important;
    height: 48px !important;
  }

  /* Filter area */
  div.flex.items-center.gap-3\.5.py-7 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    gap: 8px !important;
  }

  /* Launch token button compact */
  button[class*="btn-green"][class*="tracking-wide"] {
    padding: 7px 14px !important;
    font-size: 12px !important;
  }

  /* Token detail */
  div[class*="grid-cols-\\[1fr_380px\\]"] {
    grid-template-columns: 1fr !important;
  }

  /* Chart smaller */
  div.h-\[440px\] {
    height: 280px !important;
  }

  /* Content blocks */
  div.p-7, div.p-6 {
    padding: 14px !important;
  }
  div[class*="px-7"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  div[class*="p-\\[22px\\]"]:not(.token-card-enter) {
    padding: 14px !important;
  }

  /* Modals */
  div[class*="max-w-\\[460px\\]"],
  div[class*="max-w-\\[400px\\]"],
  div[class*="max-w-\\[480px\\]"] {
    max-width: calc(100vw - 24px) !important;
  }
  .modal-overlay {
    padding: 12px !important;
  }

  /* Text scaling */
  *[class*="text-\\[32px\\]"] { font-size: 22px !important; }
  *[class*="text-\\[28px\\]"] { font-size: 20px !important; }

  /* Ranking table reflow */
  main table.w-full:not(.wf-keep-table) {
    display: block !important;
  }
  main table.w-full:not(.wf-keep-table) thead {
    display: none !important;
  }
  main table.w-full:not(.wf-keep-table) tbody {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
  }
  main table.w-full:not(.wf-keep-table) tbody tr {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 12px;
    background: var(--bg2);
    border-radius: 10px;
    border: 1px solid var(--card-border) !important;
    align-items: center;
  }
  main table.w-full:not(.wf-keep-table) tbody tr td {
    border: none !important;
    padding: 2px 0 !important;
    font-size: 13px;
  }
  main table.w-full:not(.wf-keep-table) tbody tr td:first-child {
    font-weight: 700;
    color: var(--green);
    min-width: 24px;
  }
  main table.w-full:not(.wf-keep-table) tbody tr td:nth-child(2) {
    flex: 1;
    min-width: 120px;
  }

  /* Transaction tables stay as tables */
  .overflow-x-auto table.w-full { display: table !important; }
  .overflow-x-auto table.w-full thead { display: table-header-group !important; }
  .overflow-x-auto table.w-full tbody { display: table-row-group !important; padding: 0; gap: 0; }
  .overflow-x-auto table.w-full tbody tr {
    display: table-row !important;
    flex-wrap: initial;
    padding: 0;
    background: none;
    border-radius: 0;
    border: none !important;
  }
  .overflow-x-auto table.w-full tbody tr td {
    display: table-cell !important;
    padding: 8px 6px !important;
    border-bottom: 1px solid var(--border) !important;
    white-space: nowrap;
    font-size: 11px !important;
  }

  /* Progress bar */
  div[class*="w-\\[120px\\]"] { width: 80px !important; }

  /* Footer */
  footer { padding: 16px 12px !important; }

  /* Swap card full width */
  div[class*="max-w-\\[480px\\]"] {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .swap-card {
    padding: 14px !important;
  }
}

/* ============================================================
   19. EXTRA SMALL SCREENS (< 400px)
   ============================================================ */
@media (max-width: 400px) {
  .token-card-enter .w-12.h-12 {
    width: 42px !important;
    height: 42px !important;
  }
  .token-card-enter .font-bold.text-\[15px\] {
    font-size: 13px !important;
  }
  div.flex.gap-1.bg-\[var\(--bg2\)\].p-1 button {
    padding: 4px 10px !important;
    font-size: 11px !important;
  }
}

/* ============================================================
   20. SMOOTH TRANSITIONS EVERYWHERE
   ============================================================ */
a, button, select, input, .glass-card, .btn-green, .btn-red, header button, header select, header input, footer a svg {
  transition-property: background-color, border-color, color, box-shadow, opacity;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

/* ---- Launch Token Full Page ---- */
/* Position the launch form in the content area below header+ticker.
   BT renders as a child of body (React portal-like behavior),
   so we use fixed positioning to place it correctly. */
/* Launch form — renders inline inside .wf-launch-mode */
.wf-launch-page {
  position: relative;
  z-index: 1;
  background: transparent;
  overflow-y: visible;
  padding: 40px 0 80px;
  animation: fadeIn 0.3s ease;
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 768px) {
  .wf-launch-page {
    padding: 20px 0 60px;
  }
  .wf-launch-page > div {
    padding: 20px !important;
    border-radius: 16px !important;
    max-width: 100% !important;
  }
  .wf-launch-page .grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Mobile: show nav inline, no hamburger ---- */
@media (max-width: 768px) {
  /* Hide hamburger button added by mobile-menu.js */
  .wf-mobile-btn { display: none !important; }
  .wf-mobile-drawer { display: none !important; }
  .wf-mobile-overlay { display: none !important; }

  /* Make header wrap and show all items */
  header.sticky {
    flex-wrap: wrap;
    height: auto !important;
    min-height: 56px;
    padding: 8px 12px !important;
    gap: 6px;
  }
  header.sticky > div:first-child {
    order: 1;
    flex-shrink: 0;
  }
  /* Nav tabs - show them */
  header.sticky nav,
  header.sticky > div:nth-child(2) {
    order: 3;
    width: 100%;
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
    padding: 4px 0;
  }
  header.sticky nav::-webkit-scrollbar,
  header.sticky > div:nth-child(2)::-webkit-scrollbar {
    display: none;
  }
  header.sticky nav button,
  header.sticky nav a,
  header.sticky > div:nth-child(2) button,
  header.sticky > div:nth-child(2) a {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
  /* Right section (chain, lang, theme, connect) */
  header.sticky > div:last-child {
    order: 2;
    margin-left: auto;
  }
  header.sticky > div:last-child > div,
  header.sticky > div:last-child > button {
    flex-shrink: 0;
  }
  /* Smaller chain select */
  .wf-chain-select {
    min-width: auto !important;
    padding: 0 24px 0 8px !important;
    height: 32px !important;
    font-size: 12px !important;
  }
  .wf-chain-select img {
    width: 18px !important;
    height: 18px !important;
  }
  /* Smaller buttons */
  header.sticky button {
    font-size: 12px !important;
  }
  header.sticky .btn-green {
    padding: 6px 14px !important;
    font-size: 12px !important;
  }
  /* Show theme and lang toggle on mobile — compact */
  header.sticky > div:last-child > button:not(.btn-green):not([class*="flex items-center gap-2"]) {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* RainbowKit wallet button — compact on mobile */
  #wallet-root {
    display: inline-flex !important;
    flex-shrink: 0 !important;
  }
  #wallet-root button {
    font-size: 11px !important;
    height: 30px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
  }
}

/* ---- Launch mode: hide token list, show only launch form ---- */
.wf-launch-mode > *:not(.wf-launch-page) {
  display: none !important;
}
.wf-launch-mode > .wf-launch-page {
  display: block !important;
}




/* ============================================================
   21. TOKEN PICKER MODAL — Fix oversized logos & z-index
   ============================================================ */

/* Ensure the token picker overlay is above everything */
.fixed.inset-0.z-\[9999\] {
  z-index: 9999 !important;
  background: rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Token picker modal card — constrain size
   Target: direct child of the z-[9999] overlay that is a flex-col */
.fixed.inset-0.z-\[9999\] > .flex-col {
  width: 380px !important;
  max-width: 90vw !important;
  max-height: 70vh !important;
  overflow: hidden !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6) !important;
}

/* Scrollable token list inside the modal */
.fixed.inset-0.z-\[9999\] .overflow-y-auto {
  max-height: calc(70vh - 110px) !important;
  overflow-y: auto !important;
}

/* Constrain ALL images inside the token picker to 28px */
.fixed.inset-0.z-\[9999\] .overflow-y-auto img {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  border-radius: 9999px !important;
}

/* Constrain SVG arrows in the picker */
.fixed.inset-0.z-\[9999\] .overflow-y-auto svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex-shrink: 0 !important;
}

/* Make sure header stays below modal */
header.sticky {
  z-index: 100 !important;
}

/* Ticker bar below modal too */
header.sticky + div,
header.sticky ~ div.h-9 {
  z-index: 99 !important;
}



/* ============================================================
   22. FIX: Modal overlay must be above header/nav on all devices
   Hide header & ticker when token picker modal is open.
   ============================================================ */

body:has(.fixed.inset-0.z-\[9999\]) header.sticky,
html:has(.fixed.inset-0.z-\[9999\]) header.sticky,
body:has(.fixed.inset-0.z-\[9999\]) header.sticky + div,
html:has(.fixed.inset-0.z-\[9999\]) header.sticky + div {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Elevate the page-enter container so the overlay is on top */
body:has(.fixed.inset-0.z-\[9999\]) .page-enter,
html:has(.fixed.inset-0.z-\[9999\]) .page-enter {
  position: relative !important;
  z-index: 99999 !important;
}


/* woof1.png size constraint — desktop & mobile */
img[src*="woof1"] {
  max-width: 42px;
  max-height: 42px;
  width: 42px;
  height: 42px;
  object-fit: contain;
}

@media (max-width: 768px) {
  img[src*="woof1"] {
    max-width: 32px;
    max-height: 32px;
    width: 32px;
    height: 32px;
  }
}


/* ============================================================
   23. SORT BUTTONS — Pill style group
   ============================================================ */
.wf-sort-group {
  display: flex;
  gap: 2px;
  background: rgba(245,166,35,0.03);
  border-radius: 999px;
  padding: 3px;
  border: 1px solid rgba(245,166,35,0.06);
}
.wf-sort-group button {
  border-radius: 999px !important;
  font-size: 12px !important;
  padding: 5px 14px !important;
  transition: all 0.2s ease !important;
}

/* ============================================================
   24. TOKEN CARD — Market cap & price row
   ============================================================ */
.token-card-enter .wf-card-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(245,166,35,0.04);
}

/* ============================================================
   25. DOCS PAGE
   ============================================================ */
.wf-docs {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 0 80px;
}
.wf-docs h1 {
  font-size: 28px;
  font-weight: 800;
  color: var(--t1);
  margin-bottom: 8px;
}
.wf-docs .wf-docs-sub {
  color: var(--t2);
  font-size: 14px;
  margin-bottom: 32px;
}
.wf-docs-section {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
  transition: border-color 0.3s ease;
}
.wf-docs-section:hover {
  border-color: rgba(245,166,35,0.15);
}
.wf-docs-section h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wf-docs-section p,
.wf-docs-section li {
  color: var(--t2);
  font-size: 14px;
  line-height: 1.7;
}
.wf-docs-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wf-docs-section ul li {
  padding: 4px 0 4px 20px;
  position: relative;
}
.wf-docs-section ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--green);
  font-size: 12px;
}
.wf-docs-section .wf-highlight {
  color: var(--green);
  font-weight: 600;
}

@media (max-width: 768px) {
  .wf-docs {
    padding: 20px 0 60px;
  }
  .wf-docs h1 {
    font-size: 22px;
  }
  .wf-docs-section {
    padding: 16px;
  }
  .wf-docs-section h2 {
    font-size: 16px;
  }
}


/* ============================================================
   26. FIX: Sort buttons (Newest / Market Cap / 24H Volume) — Pill shape
   ============================================================ */
/* Container of the three sort buttons */
div.flex.gap-1.border.p-0\.5,
div.flex.gap-1.p-0\.5 {
  border-radius: 999px !important;
  padding: 3px !important;
}

/* Each sort button inside */
div.flex.gap-1.border.p-0\.5 button,
div.flex.gap-1.p-0\.5 button {
  border-radius: 999px !important;
  padding: 5px 16px !important;
  font-size: 12px !important;
}

/* ============================================================
   27. SWITCH NETWORK MODAL — Hide for BSC-only
   ============================================================ */
/* Hide any "Switch Network" / chain-switch modals via CSS */
div[class*="w3m-"],
w3m-modal {
  /* If a switch-network modal appears, keep it but don't forcibly hide all web3modal */
}

/* ============================================================
   28. PROFESSIONAL POLISH — Typography & Spacing
   ============================================================ */

/* Better heading hierarchy */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
}

/* Card shadows — subtle warm tones */
.glass-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 0 0 1px rgba(245,166,35,0.02) !important;
}
.glass-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 1px rgba(245,166,35,0.06) !important;
}

/* Ranking table first-child color — amber instead of green */
main table.w-full:not(.wf-keep-table) tbody tr td:first-child {
  color: var(--green) !important;
}

/* ============================================================
   29. WOOF314/WOOFTAX MODE TOGGLE — Premium styling
   ============================================================ */
.wooftax-mode-tabs {
  background: rgba(245,166,35,0.04) !important;
  border: 1px solid rgba(245,166,35,0.08) !important;
  border-radius: 999px !important;
  padding: 4px !important;
}
.wooftax-mode-btn {
  border-radius: 999px !important;
  padding: 10px 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  transition: all 0.25s ease !important;
}
.wooftax-mode-btn.active {
  background: linear-gradient(135deg, #FF8C00, #F5A623) !important;
  color: #000 !important;
  box-shadow: 0 2px 12px rgba(245,166,35,0.3) !important;
}
.wooftax-mode-btn:hover:not(.active) {
  background: rgba(245,166,35,0.06) !important;
  color: var(--t1) !important;
}

/* Launch mode selector — same premium toggle style */
.wooftax-launch-mode-selector {
  background: rgba(245,166,35,0.04) !important;
  border: 1px solid rgba(245,166,35,0.08) !important;
  border-radius: 999px !important;
  padding: 4px !important;
}
.wooftax-launch-mode-btn {
  border-radius: 999px !important;
  transition: all 0.25s ease !important;
}
.wooftax-launch-mode-btn.active {
  background: linear-gradient(135deg, #FF8C00, #F5A623) !important;
  color: #000 !important;
  box-shadow: 0 2px 12px rgba(245,166,35,0.3) !important;
}