body{font-family:Inter,sans-serif;overflow-x:hidden}.custom-scrollbar::-webkit-scrollbar{height:4px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background:rgba(37,120,244,.2);border-radius:10px}@keyframes modal-in{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.animate-modal-in{animation:modal-in .25s ease-out}@keyframes modal-out{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(10px)}}.animate-modal-out{animation:modal-out .2s ease-in forwards}@keyframes fade-in{0%{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.animate-fade-in{animation:fade-in .3s ease-out}@keyframes slide-in-right{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}.animate-slide-in-right{animation:slide-in-right .3s ease-out}@keyframes toast-in{0%{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-16px) scale(.95)}}.toast-enter{animation:toast-in .3s ease-out}.toast-exit{animation:toast-out .25s ease-in forwards}input[type=range].trade-slider{-webkit-appearance:none;appearance:none;background:#1e293b;border-radius:3px;height:6px;outline:none;width:100%}input[type=range].trade-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#2578f4;border:3px solid #0f172a;border-radius:50%;box-shadow:0 0 0 2px rgba(37,120,244,.3);cursor:pointer;height:20px;width:20px}input[type=range].trade-slider::-moz-range-thumb{background:#2578f4;border:3px solid #0f172a;border-radius:50%;cursor:pointer;height:20px;width:20px}input[type=number].no-arrows::-webkit-inner-spin-button,input[type=number].no-arrows::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].no-arrows{-moz-appearance:textfield}.settings-tab-btn{color:#64748b}.settings-tab-btn:hover{background:rgba(37,120,244,.05);color:#2578f4}.settings-tab-btn.active{background:rgba(37,120,244,.1);color:#2578f4;font-weight:600}.dark .settings-tab-btn{color:#94a3b8}.dark .settings-tab-btn:hover{background:rgba(37,120,244,.1);color:#2578f4}.dark .settings-tab-btn.active{background:rgba(37,120,244,.15);color:#2578f4}.slippage-btn.active{background:rgba(37,120,244,.1);border-color:#2578f4;color:#2578f4}.binary-card-glow{box-shadow:0 0 0 1px rgba(37,120,244,.15),0 4px 24px rgba(37,120,244,.08)}@keyframes skeleton-pulse{0%,to{opacity:.4}50%{opacity:.8}}.skeleton{animation:skeleton-pulse 1.5s ease-in-out infinite;background:linear-gradient(90deg,#1e293b 25%,#334155 50%,#1e293b 75%);background-size:200% 100%}@keyframes progress-fill{0%{width:0}}.animate-progress{animation:progress-fill .6s ease-out}.tab-active{border-bottom:2px solid #2578f4;color:#2578f4;font-weight:600}#search-results{background:#0f172a;border-color:#334155}#search-results a:hover{background:#1e293b}.of-modal-overlay{backdrop-filter:blur(4px)}footer a{color:#94a3b8}footer a:hover{color:#2578f4}input,select,textarea{color-scheme:dark}

/* ═══ Mobile Bottom Nav (Polymarket-style) ═══ */
.mob-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:100;background:#0f172a;border-top:1px solid rgba(51,65,85,.5);padding:6px 0 max(env(safe-area-inset-bottom),6px);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.mob-bottom-nav a,.mob-bottom-nav button{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;padding:4px 0;font-size:10px;color:#64748b;background:none;border:none;cursor:pointer;text-decoration:none;transition:color .2s}
.mob-bottom-nav a.active,.mob-bottom-nav button.active{color:#2578f4}
.mob-bottom-nav .material-icons,.mob-bottom-nav .material-symbols-outlined{font-size:22px}

/* ═══ Mobile Overrides ═══ */
@media (max-width:768px){
  .mob-bottom-nav{display:flex}
  body{padding-bottom:70px}
  #footer{display:none!important}
  /* Tighter main content on mobile */
  main.max-w-\\[1440px\\]{padding-left:12px;padding-right:12px;padding-top:4px}
  /* Hide hero/featured on mobile — category tabs are more useful */
  #featured-market{display:none!important}
  /* Compact category tabs - Polymarket style underlined on mobile */
  #category-tabs{margin-bottom:8px;gap:0;padding-bottom:0;border-bottom:1px solid rgba(51,65,85,.3);-ms-overflow-style:none;scrollbar-width:none}
  #category-tabs::-webkit-scrollbar{display:none}
  #category-tabs button{padding:8px 14px;font-size:13px;font-weight:500;border-radius:0!important;background:transparent!important;color:#64748b;border-bottom:2px solid transparent;transition:all .2s}
  #category-tabs button[style*="background: rgb(37, 120, 244)"],#category-tabs button[style*="background:#2578f4"],#category-tabs button.cat-active{background:transparent!important;color:#fff!important;border-bottom-color:#2578f4!important;font-weight:600}
  /* Single-column compact cards */
  #market-cards{grid-template-columns:1fr!important;gap:10px!important}
  #market-cards>div{padding:12px!important}
  /* Hide sidebar on mobile */
  .lg\\:col-span-3{grid-column:span 1}
  aside.space-y-8{display:none!important}
  .grid.grid-cols-1.lg\\:grid-cols-4{display:block}
  /* Compact navbar for mobile */
  nav .h-16{height:52px}
  nav .h-12{height:48px}
  /* Hide mobile search button - we have it in bottom nav */
  #mobile-search-btn{display:none!important}
  /* Hide deposit button on mobile - moved to hamburger menu */
  #nav-deposit-btn{display:none!important}
  /* Hamburger menu position on compact mobile nav */
  #hamburger-menu{top:3.5rem!important}
}

@media (max-width:640px){
  canvas{height:auto!important;max-width:100%!important}
  .max-w-7xl{padding-left:1rem;padding-right:1rem}
  .sticky.top-20{position:static}
  table{font-size:.75rem}
  /* Binary event & Market detail: move trade panel below chart on mobile */
  .lg\\:col-span-8{order:1}
  .lg\\:col-span-4{order:2}
  /* Compact section tabs on mobile */
  .section-tab{font-size:12px;padding:6px 0}
  /* Tighter bottom tabs gap */
  .border-b.border-slate-800 .section-tab+.section-tab{margin-left:0}
}