/* assets/infobar.css — v1.2.1 (unchanged layout, only version bump) */
*,
*::before,
*::after { box-sizing: border-box; }

:root{ --fng-bar-w: 160px; }

.grypto-info-wrap{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999;
  background: #303030;
  color: #fff;
  font: 500 16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.grypto-info-inner{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  min-height: 44px;
  overflow: hidden;
}

.grypto-side{ display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.grypto-side.left{ justify-self: start; text-align: left; }
.grypto-side.right{ justify-self: end; text-align: right; }
.sep{ opacity: .5; margin: 0 8px; }
.dot{ width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.open{ background: #16a34a; }  /* green */
.dot.closed{ background: #dc2626; } /* red */

.mid{ display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; }
.val-strong{ font-weight: 700; }
.up{ color: #22c55e; }
.down{ color: #ef4444; }

/* Fear & Greed mini-bar */
.fng-wrap{ display: inline-flex; align-items: center; gap: 8px; }
.fng-bar{
  position: relative; width: var(--fng-bar-w); height: 8px; border-radius: 999px;
  background: linear-gradient(90deg,#dc2626 0%,#f59e0b 30%,#facc15 50%,#22c55e 75%,#16a34a 100%);
  overflow: hidden;
}
.fng-ind{ position: absolute; top: -4px; width: 2px; height: 16px; background: #fff; left: 50%; transform: translateX(-50%); }

/* Reserve space for the bar dynamically */
body.grypto-infobar-active { padding-top: var(--grypto-infobar-h, 48px); }

/* --- Responsive --- */
@media (max-width: 1024px){
  :root{ --fng-bar-w: 130px; }
}
@media (max-width: 768px){
  :root{ --fng-bar-w: 110px; }
  .grypto-info-inner{ grid-template-columns: 1fr; gap: 6px; }
  .mid{ flex-wrap: wrap; row-gap: 6px; }
  .sep{ display: none; }
  .grypto-side.left, .grypto-side.right { justify-self: stretch; text-align: left; }
}
@media (max-width: 420px){
  :root{ --fng-bar-w: 90px; }
  .mid{ gap: 10px; }
}