.ref-inspector { min-width: 0; min-height: 100%; position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid rgba(105, 184, 239, .22); border-radius: 14px; background: linear-gradient(180deg, rgba(9, 20, 35, .98), rgba(5, 13, 24, .98)); box-shadow: var(--inner-glow), -14px 0 45px rgba(0,0,0,.14); }
.ref-inspector-head { padding: 4px 2px 9px; border-bottom: 1px solid rgba(110, 183, 236, .12); }
.ref-inspector-head h2 { margin: 4px 0 0; font-size: clamp(24px, 2.2vw, 34px); line-height: 1; letter-spacing: -.025em; }
.ref-inspector-head p { margin: 10px 0 0; color: #aab9c7; font-size: 12px; line-height: 1.48; }
.ref-inspector-block { padding: 10px; border: 1px solid rgba(110, 183, 236, .15); border-radius: 10px; background: rgba(14, 28, 46, .72); }
.ref-inspector-block > span { display: block; margin-bottom: 5px; color: #75a9d4; font-size: 8px; font-weight: 760; letter-spacing: .14em; }
.ref-inspector-block > strong { display: block; font-size: 13px; }
.ref-inspector-block > small { display: block; margin-top: 4px; color: #8295a7; font-size: 9px; line-height: 1.35; }
.ref-inspector-block ul { margin: 4px 0 0; padding-left: 17px; color: #c4d2df; font-size: 10px; line-height: 1.7; }
.ref-cost-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 8px; border: 1px solid rgba(112, 184, 238, .12); border-radius: 8px; background: rgba(18, 36, 57, .7); font-size: 10px; }
.ref-cost-row + .ref-cost-row { margin-top: 6px; }
.ref-cost-row span { color: #9eafbf; }
.ref-cost-row strong { color: #e9f5ff; }
.ref-inspector-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.ref-inspector-stat-grid > div { padding: 8px; border-radius: 8px; background: rgba(8, 19, 32, .78); }
.ref-inspector-stat-grid small, .ref-inspector-stat-grid strong { display: block; }
.ref-inspector-stat-grid small { color: #7890a5; font-size: 8px; text-transform: uppercase; }
.ref-inspector-stat-grid strong { margin-top: 3px; font-size: 14px; }
.ref-inspector-action { margin-top: auto; padding-top: 5px; }
.ref-inspector-action > small { display: block; margin-top: 6px; color: #73869a; font-size: 8px; text-align: center; }

.ref-unlock-chain { display: grid; gap: 7px; }
.ref-unlock-chain > div { display: flex; align-items: center; gap: 9px; padding: 7px; border: 1px solid rgba(112, 184, 238, .12); border-radius: 8px; }
.ref-unlock-chain > div i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(94, 203, 255, .1); color: var(--cyan); }
.ref-unlock-chain > div .nv-icon { width: 13px; height: 13px; stroke: currentColor; }
.ref-unlock-chain > div span, .ref-unlock-chain > div strong, .ref-unlock-chain > div small { display: block; }
.ref-unlock-chain > div strong { font-size: 10px; }
.ref-unlock-chain > div small { margin-top: 2px; color: #7d91a4; font-size: 8px; }
.ref-unlock-chain > div.done { border-color: rgba(77,224,170,.22); }
.ref-unlock-chain > div.done i { color: var(--green); background: rgba(77,224,170,.1); }
.ref-unlock-chain > div.current { border-color: rgba(244,189,88,.3); }
.ref-unlock-chain > div.current i { color: var(--amber); background: rgba(244,189,88,.1); }
.ref-unlock-chain > div.locked { opacity: .55; }
.ref-unlock-chain > b { width: 1px; height: 7px; margin: -7px 0 -7px 19px; background: rgba(112, 184, 238, .2); }