.nv-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.nv-chip {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  min-height: 30px;
  padding: .35rem .62rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--text-2);
  background: rgba(255,255,255,.028);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  font-size: .75rem;
  font-weight: 720;
  white-space: nowrap;
}
.nv-chip .nv-icon { width: 14px; height: 14px; }
.nv-chip.good { color: var(--green); border-color: rgba(77,224,170,.25); background: var(--green-soft); }
.nv-chip.warning { color: var(--amber); border-color: rgba(244,189,88,.25); background: var(--amber-soft); }
.nv-chip.danger { color: var(--red); border-color: rgba(255,108,121,.28); background: var(--red-soft); }
.nv-chip.violet { color: var(--violet); border-color: rgba(151,134,255,.27); background: var(--violet-soft); }
.nv-meter {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.025);
}
.nv-meter > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #44bde9, var(--cyan)); box-shadow: 0 0 14px rgba(94,203,255,.4); }
.nv-meter.green > i { background: linear-gradient(90deg, #28b982, var(--green)); box-shadow: 0 0 14px rgba(77,224,170,.35); }
.nv-meter.amber > i { background: linear-gradient(90deg, #d28e31, var(--amber)); box-shadow: 0 0 14px rgba(244,189,88,.35); }
.nv-meter.violet > i { background: linear-gradient(90deg, #715fe0, var(--violet)); box-shadow: 0 0 14px rgba(151,134,255,.35); }
.nv-empty-state {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 16px;
  min-height: 118px;
  padding: 18px;
  border: 1px dashed rgba(119,194,242,.22);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(18,37,56,.38), rgba(8,18,31,.42));
}
.nv-empty-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--green);
  background: var(--green-soft);
  border: 1px solid rgba(77,224,170,.22);
}
.nv-empty-icon .nv-icon { width: 24px; height: 24px; }
.nv-empty-copy > span, .nv-locked-copy > span { color: var(--cyan); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.nv-empty-copy h3, .nv-locked-copy h2 { margin: .28rem 0 .35rem; }
.nv-empty-copy p, .nv-locked-copy p { margin: 0 0 .85rem; color: var(--text-2); line-height: 1.55; }
.nv-locked-state {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  isolation: isolate;
  box-shadow: var(--shadow-lg), var(--inner-glow);
}
.nv-locked-art { position: absolute; inset: 0; z-index: -3; }
.nv-locked-art picture, .nv-locked-art img { width: 100%; height: 100%; object-fit: cover; }
.nv-locked-art img { filter: saturate(.72) brightness(.58); transform: scale(1.02); }
.nv-locked-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(3,8,16,.97), rgba(3,8,16,.76) 55%, rgba(3,8,16,.25)), linear-gradient(0deg, rgba(3,8,16,.9), transparent 66%); }
.nv-locked-copy { width: min(720px, 100%); padding: clamp(26px, 4vw, 50px); }
.nv-requirement { display: inline-flex; align-items: center; gap: 14px; margin: .2rem 0 1rem; padding: .72rem .9rem; border: 1px solid rgba(244,189,88,.22); border-radius: 12px; background: rgba(244,189,88,.08); }
.nv-requirement span { color: var(--text-3); font-size: .73rem; text-transform: uppercase; letter-spacing: .08em; }
.nv-requirement strong { color: var(--amber); }
.nv-unlock-chain { display: grid; grid-template-columns: repeat(5, auto); align-items: center; gap: 8px; margin: 18px 0 22px; }
.nv-unlock-chain > div { display: grid; grid-template-columns: 34px auto; align-items: center; gap: 8px; min-width: 140px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(8,19,32,.72); }
.nv-unlock-chain > div > i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.04); color: var(--text-3); }
.nv-unlock-chain > div > i .nv-icon { width: 18px; height: 18px; }
.nv-unlock-chain > div strong, .nv-unlock-chain > div small { display: block; }
.nv-unlock-chain > div strong { font-size: .78rem; }
.nv-unlock-chain > div small { margin-top: 2px; color: var(--text-3); font-size: .66rem; }
.nv-unlock-chain > div.done { border-color: rgba(77,224,170,.26); }
.nv-unlock-chain > div.done > i { color: var(--green); background: var(--green-soft); }
.nv-unlock-chain > div.current { border-color: rgba(94,203,255,.36); box-shadow: 0 0 24px rgba(94,203,255,.06); }
.nv-unlock-chain > div.current > i { color: var(--cyan); background: var(--cyan-soft); }
.nv-unlock-chain > b { width: 22px; height: 1px; background: linear-gradient(90deg, var(--line-mid), transparent); }
@media (max-width: 900px) {
  .nv-unlock-chain { grid-template-columns: 1fr; }
  .nv-unlock-chain > b { width: 1px; height: 12px; margin-left: 26px; }
}