.vdataSpinner{
  width:30px;
  height:30px;
  border:3px solid #2c2922;
  border-top-color:#d9b65d;
  border-radius:50%;
  animation:vspin .8s linear infinite;
  margin:18px 0
}
@keyframes vspin{
  to{
    transform:rotate(360deg)
  }
}
.vdataBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap
}
.vdataSource{
  font-size:11px;
  color:#897c62
}
.vdataSource b{
  color:#baa77f
}
.vgdStatGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
  gap:8px;
  margin-top:10px
}
.vgdStat{
  background:#0e0e0e;
  border:1px solid #2b2924;
  border-radius:8px;
  padding:9px
}
.vgdStat span{
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:#8e8168;
  margin-bottom:3px
}
.vgdStat b{
  color:#e4cf9e;
  font-size:13px
}
.vgdDesc{
  line-height:1.55;
  color:#c9b996;
  white-space:pre-line
}
.vgdMissionBody{
  padding:0 12px 12px
}
.vgdObj{
  display:grid;
  grid-template-columns:22px 1fr;
  gap:7px;
  align-items:start;
  padding:8px 0;
  border-bottom:1px solid #24221e
}
.vgdObj small{
  display:block;
  color:#7f755f;
  margin-top:2px
}
.vgdRecipeList{
  max-height:62vh;
  overflow:auto;
  padding-right:4px
}
.vgdRecipeCount{
  font-size:11px;
  color:#8c816c;
  margin:6px 0
}
.vgdIngredient{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:7px 0;
  border-bottom:1px solid #25231f
}
.vgdQty{
  font-variant-numeric:tabular-nums;
  color:#ffd166;
  font-weight:700
}
.vgdCreatureGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:9px;
  max-height:65vh;
  overflow:auto;
  padding-right:4px
}
.vgdCreature{
  background:#101010;
  border:1px solid #292822;
  border-radius:10px;
  padding:10px;
  cursor:pointer;
  min-height:166px;
  text-align:center
}
.vgdCreature:hover,.vgdCreature.active{
  border-color:#806629;
  background:#1c1810
}
.vgdCreatureThumb{
  width:88px;
  height:88px;
  margin:0 auto 8px;
  display:grid;
  place-items:center;
  border:1px solid #302b22;
  border-radius:14px;
  background:radial-gradient(circle at 50% 35%,rgba(47,38,24,.95),rgba(14,14,14,.96));
  box-shadow:inset 0 0 0 1px rgba(255,209,102,.04)
}
.vgdCreature img{
  width:82px;
  height:82px;
  object-fit:contain;
  display:block
}
.vgdCreaturePlaceholder{
  width:82px;
  height:82px;
  border-radius:50%;
  margin:0 auto;
  display:grid;
  place-items:center;
  border:1px solid #3c3629;
  background:radial-gradient(circle at 50% 35%,#282219,#111);
  color:#d9c7a3;
  font-size:23px;
  font-weight:800
}
.vdetailHero .vgdCreatureThumb{
  margin:0;
  width:92px;
  height:92px;
  border-radius:16px
}
.vgdLore{
  border-left:2px solid #5d4a24;
  padding-left:10px;
  margin:9px 0;
  line-height:1.5;
  color:#bfae8b
}
.vgdTrait{
  display:inline-flex;
  padding:4px 7px;
  border-radius:999px;
  border:1px solid #3b362c;
  background:#12110f;
  color:#d1be94;
  font-size:11px;
  margin:3px
}
.vgdMapTabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:8px 0 12px
}
.vgdMapTab{
  background:#111;
  border:1px solid #34312a;
  color:#bba982;
  padding:7px 10px;
  border-radius:8px;
  cursor:pointer
}
.vgdMapTab.active,.vgdMapTab:hover{
  background:#282216;
  border-color:#7e642b;
  color:#ffe09e
}
.vgdGuideGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:10px;
  align-items:start
}
.vgdGuide{
  align-self:start
}
.vgdGuide{
  border:1px solid #2a2f34;
  border-radius:10px;
  background:#111;
  overflow:hidden
}
.vgdGuide>button{
  width:100%;
  border:0;
  background:none;
  color:#f0d49c;
  padding:11px 12px;
  text-align:left;
  font-weight:700;
  cursor:pointer;
  display:flex;
  justify-content:space-between
}
.vgdGuide>div{
  display:none;
  padding:0 12px 12px;
  color:#d4c7ae;
  line-height:1.5
}
.vgdGuide.open>div{
  display:block
}
.vgdGuide ul{
  margin:7px 0 0 18px;
  padding:0
}
.vgdGuide li{
  margin:5px 0
}
.vgdGuideTag{
  font-size:10px;
  color:#8f8063;
  text-transform:uppercase;
  letter-spacing:.07em;
  margin-bottom:7px
}
.vgdSearchRow{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(150px,220px) minmax(185px,245px);
  gap:8px
}
@media(max-width:800px){
  .vgdSearchRow{
    grid-template-columns:1fr
  }
  .vgdCreatureGrid{
    max-height:42vh
  }
}

.vresourceHeader,.vresourceInventory{
  display:grid!important;
  grid-template-columns:minmax(130px,1fr) 70px 90px 75px;
  gap:8px;
  align-items:center;
}
.vresourceHeader{
  color:#8f846f;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:0 7px 4px;
}
.vresourceInventory .vinput{min-width:0;width:100%;padding:5px 7px}
.vresourceMissing{color:#ffd166}
.vresourceReady{color:#83d18b}
.vresourceStations{margin-top:10px}
.vresourceStation{display:grid;gap:2px;padding:7px 0;border-top:1px solid #292924}
.vresourceStation b{color:#d9c7a3}
.vresourceStation span{color:#918773;font-size:11px;line-height:1.4}
@media(max-width:560px){
  .vresourceHeader,.vresourceInventory{grid-template-columns:minmax(105px,1fr) 52px 72px 62px;gap:5px}
  .vresourceInventory{font-size:11px}
}

.mission-view-switch,
.mission-tool-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mission-tool-actions {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mission-view-switch .active {
    border-color: var(--gold, #d7b15f);
    color: #fff0bd;
}

.mission-campaign-path {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.mission-campaign-path > i {
    color: #8e7b55;
    font-style: normal;
}

.mission-campaign-node {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid #3c382f;
    border-radius: 10px;
    background: #12110f;
    color: #e9e1d2;
    cursor: pointer;
}

.mission-campaign-node span {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: #272219;
    color: #e7c675;
}

.mission-campaign-node.done {
    border-color: #496e50;
}

@media (max-width: 720px) {
    .mission-campaign-path {
        align-items: stretch;
        flex-direction: column;
    }

    .mission-campaign-path > i {
        transform: rotate(90deg);
        align-self: flex-start;
        margin-left: 20px;
    }
}

.mission-view-switch,
.mission-tool-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mission-tool-actions {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mission-view-switch .active {
    border-color: var(--gold, #d7b15f);
    color: #fff0bd;
}

.mission-campaign-path {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.mission-campaign-path > i {
    color: #8e7b55;
    font-style: normal;
}

.mission-campaign-node {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid #3c382f;
    border-radius: 10px;
    background: #12110f;
    color: #e9e1d2;
    cursor: pointer;
}

.mission-campaign-node span {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: #272219;
    color: #e7c675;
}

.mission-campaign-node.done {
    border-color: #496e50;
}

@media (max-width: 720px) {
    .mission-campaign-path {
        align-items: stretch;
        flex-direction: column;
    }

    .mission-campaign-path > i {
        transform: rotate(90deg);
        align-self: flex-start;
        margin-left: 20px;
    }
}

.vfieldProgress {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0 10px;
}

.vfieldProgress label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.025);
}