/* SMC Engine — Swiggy-inspired mobile-first styles */
* { -webkit-tap-highlight-color: transparent; }
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #0a0a0f;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
}
body { overscroll-behavior-y: none; }

/* Scrollbar – minimal */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #26262f; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a48; }

/* Hide scrollbars on horizontal swipe rows (Swiggy style) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Snap scroll for swipeable carousels */
.snap-x-start { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.snap-x-start > * { scroll-snap-align: start; }

/* Glow accents */
.glow-bull { box-shadow: 0 0 24px rgba(22,199,132,0.18); }
.glow-bear { box-shadow: 0 0 24px rgba(234,57,67,0.18); }
.glow-accent { box-shadow: 0 0 24px rgba(252,128,25,0.20); }

/* Gradient text */
.grad-accent {
  background: linear-gradient(135deg,#fc8019,#ff6b35);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-bull {
  background: linear-gradient(135deg,#16c784,#19d49a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-bear {
  background: linear-gradient(135deg,#ea3943,#ff5d6c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Trade card animated border */
.trade-card-glow {
  position: relative;
  background: linear-gradient(180deg, rgba(252,128,25,0.06), rgba(255,107,53,0.02));
  border: 1px solid #2a2a35;
}
.trade-card-glow.long  { border-color: rgba(22,199,132,0.5); }
.trade-card-glow.short { border-color: rgba(234,57,67,0.5); }

/* Tap pulse */
.tap-pulse:active { transform: scale(0.97); transition: transform 0.08s ease-out; }

/* Skeleton shimmer */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.shimmer {
  background: linear-gradient(90deg, #15151c 0%, #1f1f29 50%, #15151c 100%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite;
}

/* Bottom-nav safe area for iPhone */
.bottom-safe { padding-bottom: env(safe-area-inset-bottom); }
.top-safe    { padding-top: env(safe-area-inset-top); }

/* Sticky header glass */
.glass {
  background: rgba(10,10,15,0.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

/* Input styles */
.input-dark {
  background: #15151c;
  border: 1px solid #26262f;
  color: #fff;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-dark:focus {
  border-color: #fc8019;
  box-shadow: 0 0 0 3px rgba(252,128,25,0.18);
}

/* Pill */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: #1a1a24; border: 1px solid #26262f;
  font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.pill.bull { color: #16c784; border-color: rgba(22,199,132,0.4); background: rgba(22,199,132,0.08); }
.pill.bear { color: #ea3943; border-color: rgba(234,57,67,0.4); background: rgba(234,57,67,0.08); }
.pill.accent { color: #fc8019; border-color: rgba(252,128,25,0.4); background: rgba(252,128,25,0.08); }

/* Coordinate row in trade card */
.coord-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: #15151c;
  border: 1px solid #232330;
  border-radius: 10px;
}
.coord-row .label { font-size: 11px; color: #8b8b9a; font-weight: 600; letter-spacing: 0.4px; }
.coord-row .value { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; }

/* Trade direction badge */
.dir-long  { background: linear-gradient(135deg,#16c784,#0fa869); color: #fff; }
.dir-short { background: linear-gradient(135deg,#ea3943,#c92935); color: #fff; }

/* Animated dots loader */
@keyframes pulse-dot { 0%,100%{opacity:0.3} 50%{opacity:1} }
.dot { animation: pulse-dot 1.2s ease-in-out infinite; }
.dot:nth-child(2){ animation-delay: 0.2s }
.dot:nth-child(3){ animation-delay: 0.4s }

/* Lock screen blur overlay */
.lock-blur {
  position: fixed; inset: 0;
  z-index: 100;
  background: rgba(10,10,15,0.92);
  backdrop-filter: blur(28px) saturate(120%);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
}

/* Confidence bar */
.conf-bar {
  height: 6px; border-radius: 999px; background: #232330; overflow: hidden;
}
.conf-bar > div {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg,#fc8019,#16c784);
  transition: width 0.6s cubic-bezier(0.2,0.8,0.2,1);
}

/* Polymarket sentiment bar */
.prob-bar {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, #16c784 var(--p,50%), #ea3943 var(--p,50%));
}

/* Bottom nav active dot */
.nav-active::after {
  content: '';
  position: absolute; bottom: -2px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #fc8019;
}

/* Carousel card */
.carousel-card {
  flex: 0 0 auto;
  width: 78%;
  max-width: 320px;
}
@media (min-width: 640px) { .carousel-card { width: 45%; } }
@media (min-width: 1024px){ .carousel-card { width: 30%; } }

/* Subtle grid bg */
.grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
}