/* Final icon styling (Lucide SVGs).
 *
 * Layer 10 of the stylesheet. ORDER IS SIGNIFICANT: this file's rules
 * are overridden by every later layer and override every earlier one, exactly as
 * when they were one file. See docs/frontend-architecture.md. */

/* ===== FINAL ICON STYLE ===== */

.nav-item {
  gap: 12px;
}

.nav-item svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

.nav-item.active svg {
  color: #00ff99;
  filter: drop-shadow(0 0 6px rgba(0,255,153,.45));
}/* ===== MARKET OVERVIEW ===== */

.market-stats {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 14px;

  margin-top: 22px;
}

.market-stat {
  background:
    linear-gradient(
      180deg,
      rgba(12,18,24,.92),
      rgba(7,11,15,.96)
    );

  border: 1px solid rgba(255,255,255,.06);

  border-radius: 14px;

  padding: 16px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 10px 24px rgba(0,0,0,.25);
}

.market-stat span {
  display: block;

  color: #8e9aa5;

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: .05em;

  margin-bottom: 10px;
}

.market-stat strong {
  font-size: 24px;

  letter-spacing: -.03em;
}

.tooltip-wrap {
  display: inline-block;
  position: relative;
  margin-left: 6px;
  cursor: help;
}

.tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #8e9aa5;
  font-size: 10px;
  font-weight: 700;
  font-family: Arial, sans-serif;
  line-height: 16px;
  text-align: center;
  transition: all .15s ease;
  vertical-align: middle;
  padding: 0;
  box-sizing: border-box;
}

.tooltip-wrap:hover .tooltip-icon {
  background: rgba(0,255,153,.18);
  color: #00ff99;
}

.tooltip-text {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #0c151d;
  border: 1px solid rgba(0,255,153,.25);
  color: #d7e2e9;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  width: 200px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 9999;
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
}

.tooltip-wrap:hover .tooltip-text,
.tooltip-wrap:focus-within .tooltip-text {
  opacity: 1;
}