.vtabs{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:0 0 12px
}
.vtab{
  background:#141414;
  border:1px solid #34302a;
  color:#d9c7a3;
  border-radius:8px;
  padding:8px 10px;
  cursor:pointer
}
.vtab.active{
  background:#27241f;
  color:#f0d49c;
  border-color:#6a531f
}
.vtabExternal{
  text-decoration:none;
  display:inline-flex;
  align-items:center
}
.vpanel{
  display:none
}
.vpanel.active{
  display:block
}
.vcard{
  background:#111;
  border:1px solid #2a2f34;
  border-radius:10px;
  padding:12px;
  margin:10px 0
}
.vgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:8px
}
.vrow{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap
}
.vinput,.vselect,.vtextarea{
  background:#121212;
  color:#e9e4d6;
  border:1px solid #343434;
  border-radius:7px;
  padding:7px 9px;
  box-sizing:border-box
}
.vinput:focus,.vselect:focus,.vtextarea:focus{
  outline:1px solid #7f652b;
  border-color:#8b6c27
}
.vtextarea{
  width:100%;
  min-height:70px;
  resize:vertical
}
.vselect{
  appearance:none;
  -webkit-appearance:none;
  padding-right:30px;
  background-color:#121212;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d9c7a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
  color-scheme:dark
}
.vselect option,.vselect optgroup{
  background:#121212;
  color:#e9e4d6
}
.vselect::-ms-expand{
  display:none
}
.vinput[type=number]::-webkit-inner-spin-button,.vinput[type=number]::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0
}
.vinput[type=number]{
  -moz-appearance:textfield
}
.vbtn{
  background:#171208;
  color:#ffd166;
  border:1px solid #6a531f;
  border-radius:7px;
  padding:7px 10px;
  cursor:pointer
}
.vbtn:hover{
  background:#211a0b
}
.vbtn.secondary{
  background:#141414;
  color:#d9c7a3;
  border-color:#3b3b3b
}
.vbtn.danger{
  color:#ff8b8b;
  border-color:#6a3030
}
.vtable{
  width:100%;
  border-collapse:collapse
}
.vtable th,.vtable td{
  padding:7px 8px;
  border-bottom:1px solid #262626;
  text-align:left;
  vertical-align:middle
}
.vmuted{
  opacity:.72;
  font-size:12px
}
.vbadge{
  display:inline-block;
  padding:2px 6px;
  border:1px solid #444;
  border-radius:999px;
  font-size:11px;
  margin:2px
}
.vprogress{
  height:8px;
  background:#222;
  border-radius:999px;
  overflow:hidden
}
.vprogress>i{
  display:block;
  height:100%;
  background:#d9c7a3
}
.faunacard{
  display:flex;
  gap:10px;
  align-items:center
}
.faunacard img{
  width:48px;
  height:48px;
  object-fit:contain
}
.vtitle{
  color:#f0d49c;
  font-weight:700;
  margin-bottom:8px
}
.vsplit{
  display:grid;
  grid-template-columns:minmax(260px,34%) 1fr;
  gap:12px
}
.vscroll{
  max-height:58vh;
  overflow:auto
}
.vlistbtn{
  display:block;
  width:100%;
  text-align:left;
  background:#121212;
  border:1px solid #292929;
  color:#d9c7a3;
  border-radius:8px;
  padding:9px;
  margin:5px 0;
  cursor:pointer
}
.vlistbtn:hover,.vlistbtn.active{
  background:#25221d;
  border-color:#695522;
  color:#f0d49c
}
.vdetailHero{
  display:flex;
  align-items:center;
  gap:16px
}
.vdetailHero img{
  width:88px;
  height:88px;
  object-fit:contain
}
.vsectionHead{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#9e8a66;
  margin:14px 0 6px
}
.vcheckrow{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:7px 0;
  border-bottom:1px solid #202020
}
.vcheckrow:last-child{
  border-bottom:0
}
.vchips{
  display:flex;
  gap:6px;
  flex-wrap:wrap
}
.vchip{
  border:1px solid #454037;
  background:#151515;
  border-radius:999px;
  padding:4px 8px;
  font-size:12px;
  color:#cdbb96;
  cursor:pointer
}
.vchip:hover{
  border-color:#7c642d;
  color:#ffe09e
}
.vhelp{
  padding:10px 12px;
  border-left:3px solid #7c642d;
  background:#15130e;
  border-radius:6px;
  color:#cfbf9f;
  font-size:13px
}
.vmission{
  border:1px solid #292929;
  border-radius:8px;
  margin:7px 0;
  background:#121212
}
.vmissionHead{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px;
  cursor:pointer
}
.vmissionBody{
  display:none;
  padding:0 10px 10px
}
.vmission.open .vmissionBody{
  display:block
}
.vmissionName{
  flex:1;
  font-weight:600
}
.vstat{
  font-size:12px;
  color:#a99775
}
.vrecipeLayout{
  display:grid;
  grid-template-columns:minmax(280px,38%) 1fr;
  gap:12px
}
.vrecipeItem{
  padding:9px;
  border:1px solid #2d2d2d;
  border-radius:8px;
  background:#121212;
  margin:5px 0;
  cursor:pointer
}
.vrecipeItem.active,.vrecipeItem:hover{
  border-color:#725b28;
  background:#211d15
}
.vresource{
  display:flex;
  justify-content:space-between;
  padding:5px 0;
  border-bottom:1px solid #252525
}
.vexpCard{
  border:1px solid #2c2c2c;
  border-radius:10px;
  padding:10px;
  background:#101010;
  margin:8px 0
}
.vexpMeta{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:7px
}
.viconbtn{
  background:none;
  border:0;
  color:#d9c7a3;
  cursor:pointer;
  font-size:16px
}
.vplan-remove-btn{
  border:1px solid #593b35;
  background:#17100f;
  color:#e8a49b;
  border-radius:7px;
  padding:4px 8px;
  cursor:pointer;
  font-size:16px;
  line-height:1.1
}
.vplan-remove-btn:hover{
  background:#241513;
  border-color:#7a4a42;
  color:#ffc0b7
}
.vcount{
  font-size:11px;
  opacity:.7
}
.vempty{
  padding:20px;
  text-align:center;
  color:#8f846e;
  border:1px dashed #333;
  border-radius:8px
}
.vhereExamples{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px
}
.vbestiaryTabs{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:0 0 12px
}
.vbestiaryTab{
  background:#121212;
  border:1px solid #34302a;
  color:#cdbb96;
  border-radius:8px;
  padding:8px 11px;
  cursor:pointer
}
.vbestiaryTab.active,.vbestiaryTab:hover{
  background:#282318;
  border-color:#806629;
  color:#ffe09e
}
.vcreatureGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(145px,1fr));
  gap:10px;
  max-height:62vh;
  overflow:auto;
  padding-right:4px
}
.vcreatureCard{
  background:#111;
  border:1px solid #2a2f34;
  border-radius:10px;
  padding:10px;
  cursor:pointer;
  text-align:center;
  min-height:150px;
  transition:transform .12s ease,border-color .12s ease,background .12s ease
}
.vcreatureCard:hover,.vcreatureCard.active{
  border-color:#806629;
  background:#1b1812;
  transform:translateY(-1px)
}
.vcreatureCard img{
  width:88px;
  height:88px;
  object-fit:contain;
  display:block;
  margin:0 auto 7px
}
.vcreatureName{
  font-weight:700;
  color:#f0d49c
}
.vcreatureSub{
  font-size:11px;
  color:#8f846e;
  margin-top:3px
}
.vbestiaryDetail{
  position:sticky;
  top:0
}
.vnoteSave{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:7px
}
.vminiStat{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px
}
.vminiStat>div{
  border:1px solid #292929;
  background:#101010;
  border-radius:8px;
  padding:9px
}
.vminiLabel{
  font-size:11px;
  color:#9e8a66;
  text-transform:uppercase;
  letter-spacing:.06em
}
.vtoolCallout{
  border:1px solid #2c2a24;
  background:#15130e;
  border-radius:9px;
  padding:10px 12px;
  color:#cdbb96
}
.vstableCard{
  position:relative;
  overflow:hidden
}
.vstableCard:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:#6a531f
}
.vstableTop{
  display:flex;
  align-items:center;
  gap:10px
}
.vstableAvatar{
  width:42px;
  height:42px;
  border:1px solid #3b3426;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#17130d;
  font-size:20px
}
.vnoteCounter{
  font-size:11px;
  color:#8f846e
}
.vfieldRow{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:8px;
  align-items:center;
  margin:7px 0
}
.vbaseShell{
  display:grid;
  grid-template-columns:minmax(290px,360px) 1fr;
  gap:12px;
  align-items:start
}
.vbaseFields{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
  min-width:0
}
.vbaseField{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0
}
.vbaseField>.vinput,.vbaseField>.vselect{
  width:100%;
  max-width:100%;
  min-width:0
}
.vbaseField label,.vbaseField>span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#9e8a66
}
.vbaseField.wide{
  grid-column:1/-1
}
.vbaseResultGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(150px,1fr));
  gap:9px
}
.vbaseStat{
  border:1px solid #302d26;
  background:#12110e;
  border-radius:10px;
  padding:12px
}
.vbaseStat strong{
  display:block;
  color:#ffd166;
  font-size:24px;
  line-height:1;
  margin-bottom:5px
}
.vbaseStat span{
  font-size:12px;
  color:#b6a784
}
.vbaseFoot{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #262626;
  color:#8f846e;
  font-size:12px
}
@media(max-width:900px){
  .vfieldRow{
    grid-template-columns:1fr
  }
  .vbestiaryDetail{
    position:static
  }
}
.vgsStats{
  display:grid;
  grid-template-columns:repeat(3,minmax(150px,1fr));
  gap:8px;
  margin-top:12px
}
.vgsStats>div{
  border:1px solid #2b2b2b;
  background:#101010;
  border-radius:8px;
  padding:9px 10px
}
.vgsStats span{
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:#8f8063;
  margin-bottom:4px
}
.vgsStats b{
  display:block;
  color:#d9c7a3;
  font-size:12px
}
.vgsStatus{
  margin-top:10px;
  padding:9px 10px;
  border:1px solid #303030;
  border-radius:8px;
  background:#121212;
  font-size:12px;
  line-height:1.45
}
.vgsStatus.good{
  border-color:#385637;
  background:#101710;
  color:#bdd8b5
}
.vgsStatus.warn{
  border-color:#6a531f;
  background:#17140e;
  color:#e3c98d
}
.vgsStatus.bad{
  border-color:#653636;
  background:#1a1111;
  color:#e5b0b0
}
.vgsChoice{
  margin-top:10px;
  padding:11px;
  border:1px solid #6a531f;
  border-radius:9px;
  background:#17140e
}
@media(max-width:900px){
  .vsplit,.vrecipeLayout{
    grid-template-columns:1fr
  }
  .vscroll{
    max-height:36vh
  }
  .vcreatureGrid{
    max-height:42vh
  }
  .vgsStats{
    grid-template-columns:1fr
  }
}
.vstableActions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:10px
}
.vstableEditForm{
  border-color:#5d4c28;
  background:#15130e
}
.vstableEditHint{
  font-size:11px;
  color:#c9b17c;
  margin:0 0 9px
}
.vstableUtilityGrid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,1fr);
  gap:12px;
  align-items:start;
  margin:10px 0
}
.vstableUtilityGrid>.vcard{
  margin:0
}
.vstableImportMain{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start
}
.vstableImportActions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:9px
}
.vstableImportStepsTitle{
  margin-bottom:5px;
  color:#f0c85a;
  font-weight:800
}
.vstableImportPath{
  margin-top:6px;
  color:#8f846e;
  font-size:10.5px;
  overflow-wrap:anywhere
}
.vstableStorageStandalone{
  min-width:0
}
.vstableStorageStandalone .gallery-storage-panel{
  margin-top:0;
  box-sizing:border-box
}
@media(max-width:1050px){
  .vstableUtilityGrid{
    grid-template-columns:1fr
  }
}

.vbaseModeTabs{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:0 0 10px
}
.vbaseMode{
  background:#121212;
  border:1px solid #35312a;
  color:#cdbb96;
  border-radius:8px;
  padding:8px 11px;
  cursor:pointer
}
.vbaseMode.active,.vbaseMode:hover{
  background:#282318;
  border-color:#806629;
  color:#ffe09e
}
.vbasePlannerLayout{
  display:grid;
  grid-template-columns:minmax(280px,340px) minmax(0,1fr);
  gap:12px;
  align-items:start
}
.vbasePlannerSide{
  position:sticky;
  top:0
}
.vbasePlanMeta{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
  min-width:0
}
.vbasePlanMeta>*,
.vbasePlanMeta>.vinput,
.vbasePlanMeta>.vselect,
.vbasePlanMeta .variant-mobile-select-trigger,
.vbasePlanMeta .variant-mobile-select-source{
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box
}
.vbasePlanMeta .wide{
  grid-column:auto
}
.vbaseSavedList{
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap
}
.vbaseSavedList .vselect{
  flex:1;
  min-width:180px
}
.vbaseToolbar{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:9px 0
}
.vbaseTool{
  background:#141414;
  border:1px solid #3b3831;
  color:#cdbb96;
  border-radius:8px;
  padding:9px 10px;
  cursor:pointer;
  font-size:12.5px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:42px
}
.vbaseTool.active{
  background:#332a17;
  border-color:#9b7b31;
  color:#ffe09e
}
.vbaseTool small{
  opacity:.7
}
.vbaseToolIcon{
  width:26px;
  height:26px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 1px 1px #000)
}
.vbaseLevelTabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:8px 0
}
.vbaseLevel{
  background:#121212;
  border:1px solid #34302a;
  color:#cdbb96;
  border-radius:7px;
  padding:6px 9px;
  cursor:pointer
}
.vbaseLevel.active{
  background:#282318;
  border-color:#806629;
  color:#ffe09e
}
.vbaseBoardWrap{
  position:relative;
  overflow:auto;
  max-width:100%;
  max-height:68vh;
  border:1px solid #2f2b24;
  border-radius:10px;
  background:#0c0c0b;
  padding:50px 16px 16px;
  overscroll-behavior:contain;
  scrollbar-gutter:stable
}
.vbaseGridCommentTool{
  position:absolute;
  top:9px;
  left:16px;
  z-index:90;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  padding:5px 10px;
  border:1px solid #4a402c;
  border-radius:7px;
  background:#12110e;
  color:#d8c9a8;
  font:inherit;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.45)
}
.vbaseGridCommentTool:hover{
  border-color:#9c7835;
  color:#ffe09e
}
.vbaseGridCommentTool.active{
  border-color:#c99b3f;
  background:#211a0d;
  color:#ffd166;
  box-shadow:0 0 0 1px rgba(201,155,63,.16),0 2px 8px rgba(0,0,0,.55)
}
.vbaseGridCommentTool .vbaseGridCommentIcon{
  font-size:16px;
  line-height:1
}
.vbaseBoard{
  --bp-cell:46px;
  display:grid;
  gap:2px;
  width:max-content;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-x pan-y
}
.vbaseCell{
  width:var(--bp-cell);
  height:var(--bp-cell);
  padding:0;
  border:1px solid #2a2a28;
  border-radius:4px;
  background:#10100f;
  color:#d8c9a8;
  position:relative;
  display:grid;
  place-items:center;
  cursor:crosshair;
  font-size:11px;
  line-height:1;
  overflow:visible
}
.vbaseCell.floor{
  background:#29251b;
  border-color:#5f5133
}
.vbaseCell:hover{
  border-color:#a7833b;
  z-index:2
}
.vbaseCell .vbaseMark{
  position:absolute;
  inset:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1px;
  flex-wrap:wrap;
  pointer-events:none
}
.vbaseCell .vbaseMark i{
  font-style:normal;
  font-size:9px;
  background:#12110e;
  border:1px solid #5c5139;
  border-radius:3px;
  padding:1px 2px
}
.vbaseCell.edge:after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid #8a7037;
  border-radius:3px;
  pointer-events:none
}
.vbaseNode{
  position:absolute;
  width:12px;
  height:12px;
  border:1px solid #c99b3f;
  border-radius:50%;
  background:#171208;
  color:#ffd166;
  font-size:7px;
  font-weight:700;
  line-height:10px;
  text-align:center;
  z-index:6;
  pointer-events:none;
  box-shadow:0 0 0 1px #090909
}
.vbaseNode.tl{
  left:-7px;
  top:-7px
}
.vbaseNode.tr{
  right:-7px;
  top:-7px
}
.vbaseNode.bl{
  left:-7px;
  bottom:-7px
}
.vbaseNode.br{
  right:-7px;
  bottom:-7px
}
.vbaseSaveActions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:9px
}
.vbaseSaveActions .vbtn{
  flex:0 0 auto
}
.vbaseGalleryActions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px
}
.vbaseGalleryActions .vbtn,.vbaseGalleryActions .vbaseFileBtn{
  font-size:11px;
  padding:6px 8px
}
.vbaseFileBtn{
  position:relative;
  overflow:hidden
}
.vbaseFileBtn input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer
}
.vbaseRevisionRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px;
  align-items:center;
  margin-top:8px
}
.vbaseRevisionRow .vselect{
  min-width:0;
  width:100%
}
.vbaseLegend{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
  font-size:11px;
  color:#9e8a66
}
.vbaseLegend span{
  display:inline-flex;
  align-items:center;
  gap:4px
}
.vbaseLegend b{
  font-weight:600;
  color:#d9c7a3
}
.vbaseSummary{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:7px
}
.vbaseMini{
  border:1px solid #302d26;
  background:#12110e;
  border-radius:8px;
  padding:9px
}
.vbaseMini strong{
  display:block;
  color:#ffd166;
  font-size:18px
}
.vbaseMini span{
  font-size:11px;
  color:#a99775
}
.vbasePlanStatus{
  font-size:11px;
  color:#9e8a66;
  margin-left:auto
}
.vbasePlanStatus.saved{
  color:#b9d7ad
}
.vbaseWarn{
  font-size:11px;
  color:#d7b26f;
  margin-top:7px
}
.vbaseEmptyPlanner{
  padding:28px 18px;
  text-align:center;
  border:1px dashed #39342b;
  border-radius:10px;
  color:#9e8a66
}
.vbaseQuickActions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:10px
}
@media(max-width:1000px){
  .vbasePlannerLayout{
    grid-template-columns:1fr
  }
  .vbasePlannerSide{
    position:static
  }
  .vbaseBoardWrap{
    max-height:58vh
  }
  .vbaseShell{
    grid-template-columns:1fr
  }
}
@media(max-width:600px){
  .vbaseBoard{
    --bp-cell:48px
  }
  .vbaseGridControls{
    grid-template-columns:1fr 1fr
  }
  .vbaseCell{
    width:var(--bp-cell);
    height:var(--bp-cell)
  }
  .vbaseBoardWrap{
    padding:12px
  }
  .vbaseGridCommentTool{
    top:8px;
    left:12px;
    min-height:34px
  }
  .vbasePlanMeta{
    grid-template-columns:1fr
  }
  .vbasePlanMeta .wide{
    grid-column:auto
  }
  .vbaseResultGrid{
    grid-template-columns:1fr 1fr
  }
  .vstableActions .vbtn{
    flex:1
  }
  .vbaseToolbar .vbaseTool{
    min-height:40px
  }
  .vbaseSavedList .vselect{
    min-width:0;
    width:100%;
    flex-basis:100%
  }
}
/* Base planner styles */
.vbaseViewTabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:7px 0 8px
}
.vbaseView{
  background:#121212;
  border:1px solid #34302a;
  color:#cdbb96;
  border-radius:7px;
  padding:7px 10px;
  cursor:pointer
}
.vbaseView.active,.vbaseView:hover{
  background:#282318;
  border-color:#806629;
  color:#ffe09e
}
.vbaseCheck{
  display:flex;
  align-items:center;
  gap:7px;
  color:#b9aa8b;
  font-size:12px;
  margin:4px 0 8px
}
.vbaseCheck input{
  accent-color:#9b7b31
}
.vbaseInspector{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid #28251f
}
.vbaseInspectorTitle{
  color:#f0d49c;
  font-weight:700;
  margin-bottom:3px
}
.vbaseInspector .vselect{
  min-width:145px
}
.vbaseBoard{
  --bp-cell:46px
}
.vbaseCell{
  width:var(--bp-cell);
  height:var(--bp-cell);
  background:#0f0f0e;
  overflow:visible
}
.vbaseCell.ghost{
  background:rgba(211,194,155,.055);
  border-style:dashed;
  border-color:#4a4335
}
.vbaseCell.ghost:before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px dashed rgba(211,194,155,.22);
  pointer-events:none
}
.vfloorIcon{
  position:absolute;
  inset:2px;
  border-radius:3px;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden
}
.vbaseGamePiece{
  position:absolute;
  inset:2px;
  width:calc(100% - 4px);
  height:calc(100% - 4px);
  object-fit:contain;
  pointer-events:none;
  z-index:2;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.8))
}
.vfloorIcon .vbaseGamePiece{
  inset:1px;
  width:calc(100% - 2px);
  height:calc(100% - 2px);
  opacity:.92
}
.vbaseGameFallback{
  position:absolute;
  inset:4px;
  border:1px dashed rgba(255,221,154,.3);
  border-radius:2px;
  z-index:2
}
.vmat-dirt{
  background-color:#554332!important;
  background-image:radial-gradient(circle at 25% 30%,rgba(210,170,112,.12) 0 2px,transparent 3px),radial-gradient(circle at 72% 65%,rgba(24,16,10,.24) 0 2px,transparent 3px)!important
}
.vmat-beeswax-wood{
  background-color:#5f4026!important;
  background-image:repeating-linear-gradient(0deg,rgba(255,211,132,.10) 0 1px,transparent 1px 7px),repeating-linear-gradient(90deg,transparent 0 14px,rgba(28,18,9,.28) 14px 15px)!important
}
.vmat-sandworm{
  background-color:#6f5a43!important;
  background-image:radial-gradient(ellipse at 24% 32%,rgba(232,203,158,.14) 0 3px,transparent 4px),repeating-linear-gradient(18deg,transparent 0 15px,rgba(45,31,20,.20) 15px 17px)!important
}
.vmat-interior-wood{
  background-color:#7a5739!important;
  background-image:repeating-linear-gradient(90deg,rgba(255,228,186,.12) 0 1px,transparent 1px 12px),repeating-linear-gradient(0deg,rgba(46,27,15,.18) 0 1px,transparent 1px 10px)!important
}
.vmat-reinforced-glass{
  background-color:rgba(55,83,92,.72)!important;
  background-image:linear-gradient(135deg,rgba(213,239,246,.2),transparent 42%,rgba(255,255,255,.1) 43% 46%,transparent 47%)!important
}
.vmat-wood{
  background-color:#4a3822!important;
  background-image:repeating-linear-gradient(0deg,rgba(255,218,158,.13) 0 1px,transparent 1px 7px),repeating-linear-gradient(90deg,transparent 0 14px,rgba(28,18,9,.34) 14px 15px)!important
}
.vmat-thatch{
  background-color:#544823!important;
  background-image:repeating-linear-gradient(65deg,rgba(238,210,125,.23) 0 1px,transparent 1px 5px),repeating-linear-gradient(-65deg,rgba(42,31,12,.22) 0 1px,transparent 1px 6px)!important
}
.vmat-stone{
  background-color:#454744!important;
  background-image:linear-gradient(25deg,transparent 45%,rgba(255,255,255,.07) 46% 50%,transparent 51%),linear-gradient(-25deg,transparent 45%,rgba(0,0,0,.22) 46% 50%,transparent 51%)!important
}
.vmat-concrete{
  background-color:#555653!important;
  background-image:radial-gradient(circle at 25% 30%,rgba(255,255,255,.08) 0 1px,transparent 2px),radial-gradient(circle at 72% 68%,rgba(0,0,0,.18) 0 1px,transparent 2px)!important
}
.vmat-glass{
  background-color:rgba(63,93,103,.62)!important;
  background-image:linear-gradient(135deg,rgba(213,239,246,.2),transparent 42%,rgba(255,255,255,.08) 43% 46%,transparent 47%)!important
}
.vmat-aluminium{
  background-color:#5b6162!important;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.11) 0 1px,transparent 1px 6px)!important
}
.vmat-stone-brick{
  background-color:#48463f!important;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.28) 1px,transparent 1px)!important;
  background-size:100% 9px,14px 18px!important
}
.vmat-clay-brick{
  background-color:#654437!important;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.24) 1px,transparent 1px)!important;
  background-size:100% 9px,14px 18px!important
}
.vmat-scoria{
  background-color:#3c3430!important;
  background-image:radial-gradient(circle at 28% 32%,rgba(195,108,69,.15) 0 2px,transparent 3px)!important
}
.vmat-scoria-brick{
  background-color:#4a332e!important;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.3) 1px,transparent 1px)!important;
  background-size:100% 9px,14px 18px!important
}
.vmat-ice{
  background-color:#627a82!important;
  background-image:linear-gradient(135deg,rgba(220,250,255,.18),transparent 45%)!important
}
.vmat-tempered-glass{
  background-color:rgba(55,83,92,.72)!important;
  background-image:linear-gradient(135deg,rgba(213,239,246,.2),transparent 42%,rgba(255,255,255,.1) 43% 46%,transparent 47%)!important
}
.vmat-limestone{
  background-color:#625d4c!important;
  background-image:radial-gradient(ellipse at 30% 30%,rgba(255,244,205,.12),transparent 44%),repeating-linear-gradient(15deg,transparent 0 9px,rgba(0,0,0,.12) 9px 10px)!important
}
.vmat-generic{
  background-color:#3b3528!important;
  background-image:linear-gradient(45deg,rgba(255,255,255,.05) 25%,transparent 25% 75%,rgba(255,255,255,.05) 75%)!important;
  background-size:8px 8px!important
}
.vbaseFloorVariant{
  position:absolute;
  right:4px;
  bottom:3px;
  z-index:8;
  font-size:11px;
  font-weight:800;
  color:#ffe09a;
  text-shadow:0 1px 2px #000
}
.vbaseAutoWall,.vbaseEdge{
  position:absolute;
  z-index:7;
  pointer-events:none
}
.vbaseAutoWall{
  background:#9a7b3c;
  opacity:.78
}
.vbaseEdge{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#18130c!important;
  background-image:none!important;
  border:1px solid #9a7b3c;
  color:#ffe7aa;
  font-weight:800;
  letter-spacing:.02em;
  box-sizing:border-box
}
.vbaseEdge em{
  font-style:normal;
  font-size:7px;
  line-height:1;
  white-space:nowrap;
  text-shadow:0 1px #000
}
.vedge-n{
  left:0;
  right:0;
  top:-5px;
  height:10px
}
.vedge-s{
  left:0;
  right:0;
  bottom:-5px;
  height:10px
}
.vedge-w{
  left:-5px;
  top:0;
  bottom:0;
  width:10px
}
.vedge-e{
  right:-5px;
  top:0;
  bottom:0;
  width:10px
}
.vbaseAutoWall.vedge-n,.vbaseAutoWall.vedge-s{
  height:2px
}
.vbaseAutoWall.vedge-w,.vbaseAutoWall.vedge-e{
  width:2px
}
.vedge-w em,.vedge-e em{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:6.5px
}
.vedge-w em{
  transform:rotate(180deg)
}
.vbaseEdge.vtype-door,.vbaseEdge.vtype-doubleDoorL,.vbaseEdge.vtype-doubleDoorR{
  border-color:#d69a54;
  color:#ffd19b
}
.vbaseEdge.vtype-window,.vbaseEdge.vtype-doubleWindowL,.vbaseEdge.vtype-doubleWindowR{
  border-color:#6d9dad;
  color:#bfe8f4
}
.vbaseEdge.vtype-wall{
  border-color:#b28d45;
  color:#ffe7aa
}
.vbaseEdge.vtype-doubleWindowL{
  background:linear-gradient(90deg,#18130c 0 50%,#15303a 50% 100%)!important
}
.vbaseEdge.vtype-doubleWindowR{
  background:linear-gradient(90deg,#15303a 0 50%,#18130c 50% 100%)!important
}
.vbaseEdge.vtype-doubleWindowL.vflipped{
  background:linear-gradient(90deg,#15303a 0 50%,#18130c 50% 100%)!important
}
.vbaseEdge.vtype-doubleWindowR.vflipped{
  background:linear-gradient(90deg,#18130c 0 50%,#15303a 50% 100%)!important
}
.vbaseEdge.vtype-doubleDoorL{
  background:linear-gradient(90deg,#18130c 0 50%,#3b2716 50% 100%)!important
}
.vbaseEdge.vtype-doubleDoorR{
  background:linear-gradient(90deg,#3b2716 0 50%,#18130c 50% 100%)!important
}
.vbaseEdge.vtype-doubleDoorL.vflipped{
  background:linear-gradient(90deg,#3b2716 0 50%,#18130c 50% 100%)!important
}
.vbaseEdge.vtype-doubleDoorR.vflipped{
  background:linear-gradient(90deg,#18130c 0 50%,#3b2716 50% 100%)!important
}
.vbaseRamp{
  position:absolute;
  inset:3px;
  border:1px solid rgba(255,225,164,.55);
  border-radius:3px;
  display:grid;
  place-items:center;
  z-index:5;
  pointer-events:none;
  transform-origin:center;
  overflow:hidden
}
.vbaseRamp:before{
  content:"";
  position:absolute;
  inset:1px;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 1px,transparent 1px 6px)
}
.vbaseRamp .vbaseGamePiece{
  inset:1px;
  width:calc(100% - 2px);
  height:calc(100% - 2px);
  opacity:.92
}
.vbaseRamp i{
  position:relative;
  font-style:normal;
  font-size:22px;
  font-weight:900;
  color:#fff0bd;
  text-shadow:0 1px 3px #000,0 0 3px #000;
  z-index:3
}
.vramp-e{
  transform:rotate(90deg)
}
.vramp-s{
  transform:rotate(180deg)
}
.vramp-w{
  transform:rotate(270deg)
}
.vbasePillar{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:8;
  width:15px;
  height:15px;
  border:1px solid #d5a44b;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#ffe6a2;
  font-size:8px;
  font-weight:800;
  background-image:none!important
}
.vbaseNode{
  background-image:none!important
}
.vbaseSpecialStack{
  position:absolute;
  inset:0;
  z-index:16;
  pointer-events:none
}
.vbaseSpecialGlyph{
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:22px;
  margin-left:-11px;
  margin-top:-11px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,209,102,.85);
  border-radius:6px;
  background:rgba(10,14,15,.86);
  color:#ffe09a;
  font-size:15px;
  font-weight:900;
  transform:translate(calc((var(--special-index,0) - 1)*9px),calc((var(--special-index,0) - 1)*7px)) rotate(var(--special-rot,0deg));
  text-shadow:0 1px 2px #000;
  box-shadow:0 1px 4px #000
}
.vbaseSpecialGlyph.vselectedPiece{
  outline:2px solid #ffd166
}
.vbaseSpecialStack>b{
  position:absolute;
  right:2px;
  bottom:2px;
  color:#ffe09a;
  font-size:8px;
  background:#111;
  border-radius:4px;
  padding:1px 3px
}
.vbaseRoofPiece.vroof-peak:before{
  content:"";
  position:absolute;
  left:9%;
  right:9%;
  top:50%;
  height:2px;
  background:#ffe2a4;
  box-shadow:0 -8px 0 rgba(255,226,164,.22),0 8px 0 rgba(0,0,0,.25);
  transform:skewY(-18deg)
}
.vbaseRoofStack{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  overflow:visible
}
.vbaseRoofPiece{
  position:absolute;
  inset:2px;
  border:1px solid rgba(255,226,164,.72);
  border-radius:3px;
  overflow:hidden;
  pointer-events:none;
  transform-origin:center;
  box-sizing:border-box
}
.vbaseRoofPiece i{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:8;
  font-style:normal;
  color:#fff4c9;
  font-size:21px;
  font-weight:900;
  text-shadow:0 1px 3px #000,0 0 4px #000;
  line-height:1
}
.vbaseRoofFull{
  display:grid;
  place-items:center;
  transform:rotate(var(--roof-rot,0deg))
}
.vbaseRoofFull:not(.vroof-flat):before{
  content:"";
  position:absolute;
  inset:4px;
  z-index:5;
  border-top:3px solid rgba(255,235,188,.9);
  border-bottom:1px solid rgba(12,9,5,.82);
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 1px,transparent 1px 7px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.24)
}
.vbaseRoofFull:not(.vroof-flat):after{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  top:50%;
  height:1px;
  background:rgba(255,235,188,.38);
  z-index:5
}
.vbaseRoofFull.vroof-flat:before{
  content:"";
  position:absolute;
  inset:4px;
  z-index:5;
  border:2px solid rgba(255,235,188,.5);
  background:linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:10px 10px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)
}
.vbaseRoofHalfPiece{
  z-index:5;
  transform:rotate(var(--half-rot,0deg));
  border-radius:2px
}
.vbaseRoofHalfPiece.vhalf-left{
  clip-path:polygon(0 0,100% 0,0 100%)
}
.vbaseRoofHalfPiece.vhalf-right{
  clip-path:polygon(100% 0,100% 100%,0 100%)
}
.vbaseRoofHalfPiece:before{
  content:"";
  position:absolute;
  inset:3px;
  z-index:6;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 1px,transparent 1px 7px);
  border-top:3px solid rgba(255,235,188,.92);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)
}
.vbaseRoofHalfPiece:after{
  content:"";
  position:absolute;
  left:-8%;
  top:49%;
  width:116%;
  height:2px;
  z-index:7;
  background:rgba(255,229,168,.88);
  transform:rotate(-45deg);
  transform-origin:center;
  box-shadow:0 1px 2px rgba(0,0,0,.65)
}
.vbaseRoofHalfPiece.vinner:after{
  height:3px;
  background:repeating-linear-gradient(90deg,rgba(167,219,237,.98) 0 6px,rgba(64,113,132,.98) 6px 10px)
}
.vbaseRoofHalfPiece i{
  font-size:16px
}
.vbaseRoofHalfPiece.vhalf-left i{
  left:34%;
  top:33%
}
.vbaseRoofHalfPiece.vhalf-right i{
  left:66%;
  top:67%
}
.vbaseRoofPiece.vselectedPiece{
  outline:2px solid #ffd166;
  outline-offset:-2px;
  filter:brightness(1.18)
}
.vbaseBoard.roofView .vbaseCell{
  background:#0c0c0b
}
.vbaseBoard.roofView .vbaseCell.ghost{
  background:rgba(211,194,155,.04)
}
.vbaseRoofPiece.vceiling-floor{
  outline:1px dashed rgba(255,214,125,.65);
  outline-offset:-4px
}
.vbaseCeilingStack{
  opacity:.92
}
.vbaseMaterialPreview{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  margin-top:7px
}
.vbaseMaterialPreview>div{
  min-width:0;
  border:1px solid #302d26;
  border-radius:7px;
  background:#10100f;
  padding:5px;
  text-align:center;
  color:#a99775;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.04em
}
.vbaseMaterialPreview img{
  width:38px;
  height:38px;
  display:block;
  margin:0 auto 3px;
  object-fit:contain
}
.vbaseInspectorHead{
  display:flex;
  align-items:center;
  gap:10px
}
.vbaseInspectorIcon{
  width:44px;
  height:44px;
  object-fit:contain;
  flex:0 0 auto
}
.vbaseRoofBreakdown{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid #29261f;
  font-size:11px;
  color:#a99775
}
.vbaseRoofBreakdown b{
  color:#d9c7a3
}
.vbaseGridControls{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px
}
.vbaseGridControls .vbaseField{
  min-width:0
}
.vbaseGridControls .vinput,.vbaseGridControls .vselect{
  width:100%;
  min-width:0
}
.vbaseGridActions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:8px
}
.vbaseCoord{
  position:absolute;
  left:3px;
  top:3px;
  z-index:14;
  font-size:7px;
  line-height:1;
  color:rgba(255,239,201,.58);
  text-shadow:0 1px 2px #000;
  pointer-events:none;
  font-weight:700;
  letter-spacing:-.02em
}
.vbaseCell:hover .vbaseCoord{
  color:#ffe6a2;
  opacity:1
}
.vbaseGridHint{
  margin-top:6px;
  font-size:11px;
  color:#8f846e
}
@media(max-width:600px){
  .vbaseBoard{
    --bp-cell:48px
  }
  .vbaseCell{
    width:var(--bp-cell);
    height:var(--bp-cell)
  }
  .vbaseEdge em{
    font-size:7px
  }
  .vedge-w em,.vedge-e em{
    font-size:6.5px
  }
  .vbaseInspector .vselect{
    min-width:0;
    flex:1
  }
  .vbaseMaterialPreview img{
    width:42px;
    height:42px
  }
}
/* Gallery/photo controls and mobile interactions */
.vstableFormGrid{
  align-items:start
}
.vstablePhotoField{
  grid-column:1/-1;
  min-width:0
}
.vstablePhotoPicker{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:9px;
  border:1px solid #2d2b26;
  border-radius:9px;
  background:#0f100e
}
.vstablePhotoPreview{
  width:88px;
  height:88px;
  border:1px dashed #51472f;
  border-radius:10px;
  background:#15130e;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#96866a;
  font-size:10px;
  text-align:center;
  line-height:1.25
}
.vstablePhotoPreview.hasPhoto{
  border-style:solid;
  border-color:#6c5830
}
.vstablePhotoPreview img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover
}
.vstablePhotoControls{
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
  min-width:0
}
.vstableFileBtn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center
}
.vstableFileBtn input{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none
}
.vstablePhotoStatus{
  width:100%;
  font-size:11px;
  color:#94866e;
  line-height:1.4
}
.vstableAvatar{
  width:58px;
  height:58px;
  min-width:58px;
  overflow:hidden
}
.vstableAvatar.hasPhoto{
  border-radius:10px;
  padding:0;
  background:#080908
}
.vstableAvatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover
}
.vstablePhotoButton{
  padding:0;
  cursor:zoom-in
}
.vstableLightbox{
  position:fixed;
  z-index:10020;
  inset:0;
  background:rgba(0,0,0,.86);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px
}
.vstableLightbox.open{
  display:flex
}
.vstableLightboxInner{
  position:relative;
  width:min(92vw,900px);
  height:min(84dvh,720px);
  display:flex;
  align-items:center;
  justify-content:center
}
.vstableLightbox img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:10px;
  border:1px solid #413a2b;
  background:#080808
}
.vstableLightboxClose{
  position:absolute;
  right:0;
  top:0;
  transform:translate(35%,-35%);
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid #68532b;
  background:#171208;
  color:#ffe2a1;
  font-size:21px;
  cursor:pointer
}
.vstableCardBody{
  min-width:0
}
.vstableCardBody .vtitle,.vstableCardBody .vmuted{
  overflow-wrap:anywhere
}
.vstableNotes{
  overflow-wrap:anywhere;
  white-space:pre-wrap
}
.vstableGalleryEdit,.vstableGalleryStrip{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:7px
}
.vstableGalleryThumb{
  position:relative;
  width:74px;
  height:58px;
  border:1px solid #3a342a;
  border-radius:7px;
  overflow:hidden;
  background:#0b0b0b;
  padding:0;
  cursor:zoom-in
}
.vstableGalleryThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.vstableGalleryRemove{
  position:absolute;
  right:2px;
  top:2px;
  width:21px;
  height:21px;
  border-radius:50%;
  border:1px solid #713b3b;
  background:rgba(30,10,10,.9);
  color:#ff9a9a;
  padding:0;
  cursor:pointer;
  z-index:2
}
.vstablePhotoPreview.multi{
  display:flex;
  gap:4px;
  align-items:center;
  justify-content:center;
  padding:4px;
  box-sizing:border-box
}
.vstablePhotoPreview.multi img{
  width:34px;
  height:34px;
  border-radius:5px;
  object-fit:cover
}
.vstableGalleryStrip{
  margin:10px 0 2px
}
.vstableGalleryStrip .vstableGalleryThumb{
  width:62px;
  height:48px
}
.vmat-stone{
  background-color:#5f625d!important
}
.vmat-stone-brick{
  background-color:#96938b!important;
  background-image:repeating-linear-gradient(0deg,rgba(35,35,34,.6) 0 2px,transparent 2px 19px),repeating-linear-gradient(90deg,rgba(35,35,34,.55) 0 2px,transparent 2px 38px)!important
}
.vmat-glass{
  background-color:rgba(168,216,232,.34)!important
}
.vmat-tempered-glass{
  background-color:rgba(63,135,152,.70)!important;
  background-image:repeating-linear-gradient(45deg,rgba(220,245,250,.15) 0 1px,transparent 1px 12px)!important
}
.vscroll,.vcreatureGrid,.vbaseBoardWrap{
  scrollbar-width:thin;
  scrollbar-color:#665630 #151515
}
.vscroll::-webkit-scrollbar,.vcreatureGrid::-webkit-scrollbar,.vbaseBoardWrap::-webkit-scrollbar{
  width:8px;
  height:8px
}
.vscroll::-webkit-scrollbar-thumb,.vcreatureGrid::-webkit-scrollbar-thumb,.vbaseBoardWrap::-webkit-scrollbar-thumb{
  background:#665630;
  border-radius:999px
}
.vscroll::-webkit-scrollbar-track,.vcreatureGrid::-webkit-scrollbar-track,.vbaseBoardWrap::-webkit-scrollbar-track{
  background:#151515
}
.vbasePanHint{
  display:none;
  margin:7px 0 0;
  color:#98896c;
  font-size:11px
}
.vbaseBoardWrap{
  box-sizing:border-box;
  min-width:0
}
.vbasePlannerLayout>*,.vbasePlannerSide,.vbasePlannerLayout .vcard{
  min-width:0
}
.vbaseBoard{
  max-width:none
}
.vbaseTool span{
  min-width:0;
  overflow-wrap:anywhere
}
@media(max-width:820px){
  .vcard{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
    overflow-wrap:anywhere
  }
  .vgrid{
    grid-template-columns:1fr
  }
  .vinput,.vselect,.vtextarea{
    width:100%;
    min-width:0;
    max-width:100%
  }
  .vrow{
    min-width:0
  }
  .vsplit,.vrecipeLayout,.vbaseShell,.vbasePlannerLayout{
    grid-template-columns:minmax(0,1fr)!important;
    width:100%;
    max-width:100%
  }
  .vbasePlannerSide{
    position:static;
    width:100%;
    max-width:100%
  }
  .vbaseBoardWrap{
    width:100%;
    max-width:100%;
    height:min(52dvh,500px);
    min-height:300px;
    max-height:52dvh;
    overflow:scroll;
    padding:46px 8px 8px;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:auto;
    touch-action:pan-x pan-y;
    scrollbar-gutter:auto
  }
  .vbaseBoard{
    touch-action:pan-x pan-y
  }
  .vbasePanHint{
    display:block
  }
  .vbaseToolbar{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px
  }
  .vbaseToolbar .vbaseTool{
    width:100%;
    justify-content:flex-start;
    padding:9px 8px
  }
  .vbaseMaterialPreview{
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .vbaseGridControls{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .vbaseGridActions,.vbaseSaveActions{
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .vbaseGridActions .vbtn,.vbaseSaveActions .vbtn{
    width:100%
  }
  .vbaseLevelTabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:5px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin
  }
  .vbaseLevel{
    white-space:nowrap;
    flex:0 0 auto
  }
  .vbaseLegend{
    line-height:1.4
  }
  .vbaseSummary{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .vbaseQuickActions{
    display:grid;
    grid-template-columns:1fr
  }
  .vbaseQuickActions .vbtn{
    width:100%
  }
  .vbaseModeTabs{
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .vbaseMode{
    width:100%
  }
  .vstableFormGrid{
    grid-template-columns:1fr
  }
  .vstablePhotoPicker{
    grid-template-columns:74px minmax(0,1fr)
  }
  .vstablePhotoPreview{
    width:74px;
    height:74px
  }
  .vstableTop{
    align-items:flex-start
  }
  .vstableAvatar{
    width:64px;
    height:64px;
    min-width:64px
  }
  .vstableActions{
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .vstableActions .vbtn{
    width:100%
  }
  .vtable{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin
  }
  .vresource{
    gap:12px;
    min-width:0
  }
  .vresource>span:first-child{
    min-width:0;
    overflow-wrap:anywhere
  }
  .vresource>b,.vresource>span:last-child{
    flex:0 0 auto
  }
  .vdetailHero{
    min-width:0
  }
  .vdetailHero>div{
    min-width:0
  }
  .vexpMeta{
    grid-template-columns:1fr
  }
  .vnoteSave{
    align-items:stretch;
    flex-wrap:wrap
  }
  .vnoteSave .vbtn{
    width:100%
  }
}
@media(max-width:480px){
  .vbaseGridControls{
    grid-template-columns:1fr
  }
  .vbaseGridActions,.vbaseSaveActions{
    grid-template-columns:1fr
  }
  .vbaseToolbar{
    grid-template-columns:1fr 1fr
  }
  .vbaseMaterialPreview{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .vbaseSummary{
    grid-template-columns:1fr 1fr
  }
  .vstablePhotoPicker{
    grid-template-columns:1fr
  }
  .vstablePhotoPreview{
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    max-height:190px
  }
  .vstablePhotoControls .vbtn{
    flex:1 1 130px
  }
  .vstableTop{
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    align-items:start
  }
  .vstableBadges{
    grid-column:auto
  }
  .vstableActions{
    grid-template-columns:1fr 1fr
  }
}
/* Planner toolbar and floating piece inspector */
.vbaseBoardHead{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  min-width:0
}
.vbaseBoardIdentity{
  flex:0 1 auto;
  min-width:170px
}
.vbaseBoardIdentity .vtitle,.vbaseBoardIdentity .vmuted{
  overflow-wrap:anywhere
}
.vbaseHeaderToolbarWrap{
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 1px 4px;
  scrollbar-width:thin;
  scrollbar-color:#665630 #151515;
  -webkit-overflow-scrolling:touch
}
.vbaseHeaderToolbarWrap::-webkit-scrollbar{
  height:7px
}
.vbaseHeaderToolbarWrap::-webkit-scrollbar-thumb{
  background:#665630;
  border-radius:999px
}
.vbaseToolbar.vbaseHeaderToolbar{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  width:max-content;
  min-width:0;
  gap:6px;
  margin:0
}
.vbaseHeaderToolbar .vbaseTool,.vbaseHeaderToolbar .vbtn{
  flex:0 0 auto;
  min-height:38px;
  padding:6px 8px;
  font-size:11.5px;
  white-space:nowrap
}
.vbaseHeaderToolbar .vbaseToolIcon{
  width:23px;
  height:23px
}
.vbaseToolEmoji{
  font-size:18px;
  line-height:1
}
.vbaseToolbarDivider{
  width:1px;
  height:30px;
  background:#3c3425;
  margin:0 3px;
  flex:0 0 auto
}
.vbaseToolHelp{
  margin:0 0 8px;
  padding:7px 9px;
  border:1px solid #29261f;
  border-radius:7px;
  background:#0e0f0d;
  line-height:1.45
}
.vbaseSaveCard{
  position:relative
}
.vbaseSaveCard .vbaseSaveActions{
  display:grid;
  grid-template-columns:1fr 1fr
}
.vbaseSaveCard .vbtn{
  width:100%
}
.vbaseComment{
  position:absolute;
  right:2px;
  bottom:2px;
  z-index:18;
  width:20px;
  height:20px;
  border:1px solid #8e7135;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#171208;
  color:#ffe09e;
  font-size:11px;
  line-height:1;
  box-shadow:0 1px 3px #000;
  pointer-events:auto;
  cursor:pointer
}
.vbaseCell.hasComment{
  overflow:visible
}
.vbaseCommentInspectorIcon{
  width:42px;
  height:42px;
  border:1px solid #6f5727;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#171208;
  font-size:20px;
  flex:0 0 auto
}
.vbaseCommentText{
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.vbaseRamp.vbaseStairs:before{
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.24) 0 2px,transparent 2px 5px)
}
.vbaseRamp.vbaseStairs{
  border-style:double
}
.vbaseBoardCard{
  min-width:0
}
.vbaseSaveActions .vbtn:disabled,.vbaseHeaderToolbar .vbtn:disabled{
  opacity:.45;
  cursor:not-allowed
}
.vbaseBoard{
  position:relative
}
.vbaseFloatingInspector{
  position:absolute;
  z-index:70;
  width:min(420px,calc(100vw - 48px));
  max-width:420px;
  background:#111;
  border:1px solid #6a531f;
  border-radius:10px;
  padding:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.72);
  transform:translateY(-100%);
  margin-top:-8px;
  text-align:left;
  cursor:default
}
.vbaseFloatingInspector.below{
  transform:none;
  margin-top:8px
}
.vbaseFloatingInspector .vsectionHead{
  margin-top:0
}
.vbaseInspectorActions{
  align-items:center
}
.vbaseInspectorActions .vbtn:disabled{
  visibility:hidden;
  pointer-events:none
}
.vbaseInspectorDone{
  margin-left:auto
}
.vbasePieceListCard{
  margin-bottom:0
}
.vbasePlacementCard{
  margin-bottom:10px
}
@media(max-width:1000px){
  .vbaseBoardHead{
    align-items:flex-start;
    flex-direction:column
  }
  .vbaseHeaderToolbarWrap{
    width:100%;
    max-width:100%
  }
}
@media(max-width:820px){
  .vbaseBoardHead{
    gap:7px
  }
  .vbaseBoardIdentity{
    min-width:0;
    width:100%
  }
  .vbaseHeaderToolbarWrap{
    width:100%;
    max-width:100%
  }
  .vbaseHeaderToolbar .vbaseTool,.vbaseHeaderToolbar .vbtn{
    min-height:44px;
    padding:7px 9px
  }
  .vbaseHeaderToolbar .vbaseToolIcon{
    width:26px;
    height:26px
  }
  .vbaseToolbar.vbaseHeaderToolbar{
    display:flex!important;
    grid-template-columns:none!important
  }
  .vbaseToolHelp{
    font-size:11px
  }
  .vbaseSaveCard .vbaseSaveActions{
    grid-template-columns:1fr 1fr
  }
  .vbaseComment{
    width:22px;
    height:22px;
    font-size:12px
  }
  .vbaseBoardWrap{
    height:min(56dvh,540px);
    max-height:56dvh
  }
  .vbaseFloatingInspector{
    width:min(360px,calc(100vw - 44px));
    padding:9px
  }
  .vbaseFloatingInspector .vrow{
    gap:6px
  }
  .vbaseFloatingInspector .vbtn,.vbaseFloatingInspector .vselect{
    min-height:40px
  }
}
@media(max-width:520px){
  .vbaseSaveCard .vbaseSaveActions{
    grid-template-columns:1fr
  }
  .vbaseHeaderToolbar .vbaseTool span:last-child{
    max-width:105px;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .vbaseBoardWrap{
    min-height:300px;
    height:54dvh;
    max-height:54dvh
  }
  .vbaseToolHelp{
    display:none
  }
  .vbaseFloatingInspector{
    width:min(310px,calc(100vw - 36px))
  }
  .vbaseFloatingInspector .vrow{
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .vbaseFloatingInspector .vselect{
    grid-column:1/-1;
    width:100%
  }
  .vbaseFloatingInspector .vbaseInspectorDone{
    margin-left:0
  }
  .vbaseFloatingInspector .vbtn{
    width:100%
  }
}
/* Notebook-sized galleries and resizable planner comments */
.vstablePhotoField{
  grid-column:1/-1;
  min-width:0
}
.vstableGalleryHeader{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-top:3px
}
.vstableGalleryHeader .vsectionHead{
  margin:0
}
.vstableGalleryHeaderActions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap
}
.vstableFileBtn{
  position:relative;
  overflow:hidden
}
.vstableFileBtn input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer
}
.vstablePhotoPreview{
  width:100%;
  height:auto;
  min-height:130px;
  border:1px solid #302b23;
  border-radius:9px;
  background:#0b0b0b;
  padding:8px;
  box-sizing:border-box;
  margin-top:8px
}
.vstableCarousel{
  max-width:430px;
  margin:0
}
.vstableGalleryStage{
  aspect-ratio:16/9
}
.vstableGalleryStage img{
  object-fit:contain
}
.vstableGalleryEmpty{
  min-height:110px;
  display:grid;
  place-items:center;
  color:#786f5e;
  font-size:12px
}
.vstablePhotoStatus{
  margin-top:6px;
  color:#8f846e;
  font-size:11px
}
.vstableCard .gallery-carousel{
  max-width:430px;
  margin:7px 0 3px
}
.vstableCard .gallery-image-stage{
  aspect-ratio:16/9
}
.vstableCard .gallery-image-stage img{
  object-fit:contain
}
.vstableAvatar.hasPhoto{
  overflow:hidden
}
.vstableAvatar.hasPhoto img{
  width:100%;
  height:100%;
  object-fit:cover
}
.vstableActions{
  display:flex;
  gap:7px;
  justify-content:flex-end;
  margin-top:10px
}

/* Stable cards and import controls use their own layout instead of the generic tool grid. */
.vstableCards{
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  gap:10px
}
.vstableCards .vstableCard{
  min-width:0
}
.vstableTop{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:10px;
  align-items:start
}
.vstableAvatar{
  width:58px;
  height:58px;
  min-width:0
}
.vstableCardBody{
  min-width:0
}
.vstableCardBody .vtitle,.vstableCardBody .vmuted{
  overflow-wrap:break-word;
  word-break:normal
}
.vstableCardBody .vtitle{
  margin-bottom:2px
}
.vstableBadges{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
  margin-top:6px
}
.vstableBadges .vbadge{
  margin:0;
  flex:0 0 auto
}
.vstableImportInfo{
  margin-top:8px;
  border:1px solid #403723;
  border-radius:7px;
  background:#15130e;
  overflow:hidden
}
.vstableImportInfo summary{
  position:relative;
  display:flex;
  align-items:center;
  min-height:34px;
  padding:8px 34px 8px 11px;
  box-sizing:border-box;
  color:#f0c85a;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  list-style:none;
  user-select:none
}
.vstableImportInfo summary::-webkit-details-marker{
  display:none
}
.vstableImportInfo summary::after{
  content:'▾';
  position:absolute;
  right:11px;
  top:50%;
  transform:translateY(-50%);
  color:#d6ad4d;
  font-size:13px;
  transition:transform .16s ease
}
.vstableImportInfo[open] summary::after{
  transform:translateY(-50%) rotate(180deg)
}
.vstableImportInfo summary:hover{
  background:#1b1811;
  color:#ffe09a
}
.vstableImportInfo summary:focus-visible{
  outline:2px solid #d6ad4d;
  outline-offset:-2px
}
.vstableImportInfoBody{
  padding:9px 12px 11px;
  border-top:1px solid #332d20;
  color:#d3bf94;
  font-size:11px;
  line-height:1.5
}
.vstableImportInfoBody ol{
  margin:0;
  padding-left:20px
}
.vstableImportInfoBody li+li{
  margin-top:4px
}
.vstableImportInfoBody .vstableImportPath{
  margin-top:9px
}
.vstableImportActions{
  align-items:center;
  margin-top:auto;
  padding-top:10px
}
.vstableImportActions .vbtn{
  min-width:150px;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap
}
.vstableStorageStandalone .gallery-storage-actions{
  align-items:center
}
.vstableStorageStandalone .gallery-storage-actions .vbtn{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center
}
@media(max-width:900px){
  .vstableCards{
    grid-template-columns:1fr
  }
}
@media(max-width:700px){
  .vstableImportActions{
    display:grid;
    grid-template-columns:1fr
  }
  .vstableImportActions .vbtn{
    width:100%;
    min-width:0;
    white-space:normal
  }
  .vstableStorageStandalone .gallery-storage-actions{
    display:grid;
    grid-template-columns:1fr;
    width:100%
  }
  .vstableStorageStandalone .gallery-storage-actions .vbtn{
    width:100%
  }
}
@media(max-width:480px){
  .vstableTop{
    grid-template-columns:64px minmax(0,1fr)
  }
  .vstableAvatar{
    width:64px;
    height:64px
  }
}
.vbaseCell.hasComment{
  overflow:visible
}
.vbaseCommentBox{
  position:absolute;
  z-index:28;
  border:1px solid rgba(205,205,205,.34);
  background:rgba(100,100,100,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
  border-radius:5px;
  box-sizing:border-box;
  overflow:hidden;
  pointer-events:none
}
.vbaseCommentBox.selected{
  border-color:rgba(255,209,102,.78);
  box-shadow:inset 0 0 0 1px rgba(255,209,102,.18)
}
.vbaseCommentDraft{
  position:absolute;
  z-index:66;
  border:1px dashed rgba(255,209,102,.9);
  background:rgba(255,209,102,.08);
  border-radius:5px;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)
}
.vbaseCommentResize,.vbaseCommentMove{
  position:absolute;
  width:18px;
  height:18px;
  border:1px solid rgba(255,209,102,.72);
  background:rgba(22,18,10,.94);
  pointer-events:auto;
  touch-action:none;
  padding:0;
  color:#e1c783;
  display:grid;
  place-items:center;
  font-size:11px;
  line-height:1
}
.vbaseCommentResize{
  right:1px;
  bottom:1px;
  z-index:4;
  border-radius:4px 0 3px 0;
  cursor:nwse-resize
}
.vbaseCommentResize:before{
  content:"↘"
}
.vbaseCommentMove{
  width:auto;
  min-width:54px;
  height:24px;
  padding:0 7px;
  border-radius:5px;
  cursor:grab;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  color:#ffe09e;
  background:rgba(42,31,10,.98);
  box-shadow:0 2px 8px rgba(0,0,0,.82),0 0 0 1px rgba(255,209,102,.12);
  z-index:96
}
.vbaseCommentMove:active{
  cursor:grabbing
}
.vbaseCommentMoveFloating{
  transform:translate(4px,-6px)
}
.vbaseCommentBox.moving{
  border-style:dashed;
  border-color:rgba(255,209,102,.95);
  opacity:.9
}
.vbaseCommentBoxText{
  display:inline-block;
  max-width:100%;
  height:auto;
  max-height:100%;
  box-sizing:border-box;
  padding:7px 8px;
  color:rgba(220,220,220,.72);
  font-weight:700;
  line-height:1.2;
  letter-spacing:.015em;
  white-space:pre-wrap;
  overflow:hidden;
  overflow-wrap:anywhere;
  text-shadow:0 1px 2px rgba(0,0,0,.9);
  pointer-events:auto;
  cursor:pointer;
  user-select:none
}
.vbaseCommentBox.selected .vbaseCommentBoxText{
  padding-left:8px
}
.vbaseCommentControls{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-top:8px
}
.vbaseCommentControls label{
  display:flex;
  flex-direction:column;
  gap:4px;
  color:#9e8a66;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.05em
}
.vbaseCommentControls .vinput{
  width:100%;
  min-width:0
}
.vbaseCommentEditor{
  width:100%;
  min-height:74px;
  resize:vertical;
  margin-top:7px
}
.vbaseMoveHint{
  margin-top:7px;
  padding:6px 8px;
  border:1px solid #514329;
  border-radius:6px;
  background:#17140e;
  color:#d6bd7e;
  font-size:11px
}
.vbaseCommentInspectorIcon{
  display:none
}
.vbaseCommentText{
  max-height:78px;
  overflow:auto
}
@media(max-width:820px){
  .vstableGalleryHeader{
    align-items:flex-start
  }
  .vstableGalleryHeaderActions{
    width:100%
  }
  .vstableGalleryHeaderActions .vbtn{
    flex:1 1 145px
  }
  .vstablePhotoPreview{
    padding:5px
  }
  .vbaseCommentControls{
    grid-template-columns:1fr 1fr 1fr
  }
  .vbaseCommentBoxText{
    padding:5px 6px
  }
}
@media(max-width:480px){
  .vbaseCommentControls{
    grid-template-columns:1fr
  }
  .vstableCarousel{
    max-width:100%
  }
}

.backup-preview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:7px;
  margin-top:10px;
}
.backup-preview-grid>div{
  border:1px solid #2e2e2a;
  border-radius:8px;
  background:#0e0f0d;
  padding:9px 10px;
}
.backup-preview-grid span{display:block;color:#8f846f;font-size:11px;margin-bottom:3px}
.backup-preview-grid b{color:#eadcbf;font-size:17px}

.vstableHusbandry{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:6px;
  margin-top:6px;
}
.vstableHusbandry span{
  padding:7px 8px;
  border:1px solid #2e2e2a;
  border-radius:7px;
  background:#0d0e0c;
  color:#d8ccb3;
  overflow-wrap:anywhere;
}
.vstableHusbandry b{display:block;color:#8f846f;font-size:10px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.vstableBreedingNotice{margin:10px 0}
.vstableImportedData{
  margin-top:10px;
  border:1px solid #302d27;
  border-radius:8px;
  background:#0c0d0b;
  overflow:hidden;
}
.vstableImportedData summary{
  cursor:pointer;
  padding:8px 10px;
  color:#d9c9a8;
  font-size:12px;
  font-weight:700;
  user-select:none;
}
.vstableImportedData[open] summary{
  border-bottom:1px solid #292721;
}
.vstableImportedDataBody{
  padding:9px 10px 10px;
}
.vstableBinaryGrid,
.vstableGeneGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:6px;
}
.vstableBinaryGrid span,
.vstableGeneGrid span{
  min-width:0;
  padding:6px 7px;
  border:1px solid #292923;
  border-radius:6px;
  background:#10110f;
  color:#d8ccb3;
  overflow-wrap:anywhere;
}
.vstableBinaryGrid b,
.vstableGeneGrid b,
.vstableBinaryPath b,
.vstableBinaryLabel{
  display:block;
  margin-bottom:2px;
  color:#8f846f;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.vstableBinaryLabel{
  margin-top:10px;
}
.vstableGenotypeLabel{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.vstableGenotypeLabel span{
  color:inherit;
}
.vstableGenotypeLabel strong{
  color:#e7d19a;
  font-size:12px;
  letter-spacing:.02em;
}
.vstableBreedingTraitGrid{
  margin-top:0;
}
.vstableMutationNote{
  display:grid;
  gap:3px;
  margin-top:10px;
  padding:8px 9px;
  border-left:2px solid rgba(215,177,95,.45);
  border-radius:4px;
  background:rgba(215,177,95,.055);
  color:#c9bda4;
  font-size:11px;
  line-height:1.45;
}
.vstableMutationNote b{
  color:#e2c987;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.vstableBinaryPath{
  margin-top:9px;
  padding:7px 8px;
  border:1px solid #292923;
  border-radius:6px;
  background:#10110f;
  color:#b9ab90;
  font-size:11px;
  overflow-wrap:anywhere;
}
.vstableBinaryNote{
  margin-top:8px;
  line-height:1.45;
}

.vbaseRevisionDiff {
    margin-top: 7px;
    padding: 8px 10px;
    border-left: 2px solid rgba(215, 177, 95, 0.35);
    background: rgba(255, 255, 255, 0.02);
}

.vbasePlanHealth {
    margin-bottom: 12px;
    padding: 10px 11px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.vbasePlanHealth > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.vbasePlanHealth small {
    display: block;
    margin-top: 5px;
    color: var(--muted, #9d9588);
    line-height: 1.35;
}

.vbasePlanHealth.good {
    border-color: rgba(79, 132, 86, 0.45);
}

.vbasePlanHealth.warn {
    border-color: rgba(195, 145, 58, 0.5);
}

/* Planner controls stay compact so the grid remains the main workspace. */
.vbasePlannerControls{
  padding:8px 10px
}
.vbasePanelFold{
  border-top:1px solid rgba(132,108,58,.22)
}
.vbasePanelFold:first-child{
  border-top:0
}
.vbasePanelFold>summary{
  position:relative;
  list-style:none;
  padding:10px 26px 10px 2px;
  color:#d9c7a3;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  user-select:none
}
.vbasePanelFold>summary::-webkit-details-marker{
  display:none
}
.vbasePanelFold>summary:after{
  content:'›';
  position:absolute;
  right:5px;
  top:7px;
  font-size:19px;
  color:#a98c50;
  transform:rotate(90deg);
  transition:transform .15s ease
}
.vbasePanelFold:not([open])>summary:after{
  transform:rotate(0deg)
}
.vbasePanelFold[open]{
  padding-bottom:9px
}
.vbaseToolbar.vbaseHeaderToolbar{
  align-items:stretch
}
.vbaseToolbarGroup{
  display:flex;
  align-items:center;
  gap:5px;
  padding:17px 6px 2px;
  position:relative;
  border-right:1px solid rgba(120,99,54,.24)
}
.vbaseToolbarGroupTitle{
  position:absolute;
  top:1px;
  left:7px;
  color:#8e8068;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  pointer-events:none
}
.vbaseToolbarGroup:last-of-type{
  border-right:0
}
.vbaseRectDraft{
  position:absolute;
  z-index:25;
  border:2px solid rgba(247,204,103,.9);
  background:rgba(247,204,103,.13);
  box-shadow:inset 0 0 0 1px rgba(255,244,188,.22),0 0 18px rgba(212,173,89,.16);
  pointer-events:none
}

/* Game-inspired material shorthand. These patterns are original CSS/procedural approximations, not extracted game textures. */
.vmat-wood{
  background-color:#82532f!important;
  background-image:repeating-linear-gradient(90deg,rgba(37,20,9,.42) 0 2px,transparent 2px 17px),repeating-linear-gradient(2deg,rgba(255,225,177,.09) 0 1px,transparent 1px 6px)!important
}
.vmat-thatch{
  background-color:#8b7138!important;
  background-image:repeating-linear-gradient(67deg,rgba(244,217,132,.22) 0 1px,transparent 1px 5px),repeating-linear-gradient(63deg,rgba(44,31,11,.20) 0 1px,transparent 1px 9px)!important
}
.vmat-stone{
  background-color:#62645f!important;
  background-image:radial-gradient(ellipse at 22% 28%,rgba(255,255,255,.08) 0 8%,transparent 9%),radial-gradient(ellipse at 75% 68%,rgba(0,0,0,.20) 0 9%,transparent 10%),repeating-linear-gradient(12deg,transparent 0 18px,rgba(28,29,27,.22) 18px 20px)!important
}
.vmat-stone-brick{
  background-color:#929089!important;
  background-image:linear-gradient(rgba(42,42,39,.62) 2px,transparent 2px),linear-gradient(90deg,rgba(44,43,40,.56) 2px,transparent 2px)!important;
  background-size:100% 18px,38px 36px!important
}
.vmat-concrete{
  background-color:#888985!important;
  background-image:radial-gradient(circle at 18% 30%,rgba(255,255,255,.12) 0 1px,transparent 1.5px),radial-gradient(circle at 67% 72%,rgba(0,0,0,.18) 0 1px,transparent 1.6px),linear-gradient(90deg,transparent 49%,rgba(50,50,48,.11) 50%,transparent 51%)!important
}
.vmat-aluminium{
  background-color:#a8adb0!important;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.17) 0 1px,rgba(40,45,47,.09) 1px 5px),linear-gradient(rgba(48,52,54,.30) 1px,transparent 1px)!important;
  background-size:auto,100% 28px!important
}
.vmat-limestone{
  background-color:#b7aa83!important;
  background-image:repeating-linear-gradient(9deg,transparent 0 18px,rgba(91,80,55,.18) 18px 20px),radial-gradient(ellipse at 30% 38%,rgba(255,248,218,.18),transparent 42%)!important
}
.vmat-clay-brick{
  background-color:#985f43!important;
  background-image:linear-gradient(rgba(51,30,22,.45) 2px,transparent 2px),linear-gradient(90deg,rgba(55,31,22,.42) 2px,transparent 2px)!important;
  background-size:100% 16px,32px 32px!important
}
.vmat-scoria{
  background-color:#594741!important;
  background-image:radial-gradient(circle,rgba(22,17,15,.48) 0 2px,transparent 2.5px),radial-gradient(circle,rgba(197,104,69,.11) 0 1px,transparent 2px)!important;
  background-size:17px 19px,23px 21px!important
}
.vmat-scoria-brick{
  background-color:#67473e!important;
  background-image:linear-gradient(rgba(34,23,20,.52) 2px,transparent 2px),linear-gradient(90deg,rgba(35,23,20,.48) 2px,transparent 2px),radial-gradient(circle,rgba(20,14,13,.28) 0 1px,transparent 2px)!important;
  background-size:100% 18px,36px 36px,14px 14px!important
}
.vmat-glass{
  background-color:rgba(155,207,223,.30)!important;
  background-image:linear-gradient(128deg,rgba(255,255,255,.28),transparent 35%,rgba(255,255,255,.08) 36% 40%,transparent 41%)!important
}
.vmat-tempered-glass{
  background-color:rgba(67,138,154,.62)!important;
  background-image:linear-gradient(rgba(20,68,78,.5) 2px,transparent 2px),linear-gradient(90deg,rgba(20,68,78,.48) 2px,transparent 2px),repeating-linear-gradient(45deg,rgba(233,252,255,.10) 0 1px,transparent 1px 11px)!important;
  background-size:32px 32px,32px 32px,auto!important
}
.vmat-ice{
  background-color:rgba(143,197,220,.68)!important;
  background-image:linear-gradient(135deg,rgba(242,255,255,.24),transparent 43%),repeating-linear-gradient(28deg,transparent 0 22px,rgba(49,101,122,.13) 22px 23px)!important
}
.vmat-dirt{
  background-color:#67533c!important;
  background-image:radial-gradient(circle at 23% 34%,rgba(224,190,133,.11) 0 2px,transparent 2.8px),radial-gradient(circle at 71% 66%,rgba(35,24,14,.28) 0 2px,transparent 3px),repeating-linear-gradient(8deg,transparent 0 17px,rgba(48,33,20,.12) 17px 18px)!important
}
.vmat-beeswax-wood{
  background-color:#6f4a2b!important;
  background-image:repeating-linear-gradient(90deg,rgba(35,20,9,.36) 0 2px,transparent 2px 17px),repeating-linear-gradient(2deg,rgba(255,220,150,.10) 0 1px,transparent 1px 6px)!important
}
.vmat-sandworm{
  background-color:#8a6f52!important;
  background-image:radial-gradient(ellipse at 22% 28%,rgba(247,220,176,.16) 0 7%,transparent 8%),repeating-linear-gradient(18deg,transparent 0 18px,rgba(55,37,24,.22) 18px 20px)!important
}
.vmat-interior-wood{
  background-color:#a7754c!important;
  background-image:repeating-linear-gradient(90deg,rgba(72,42,22,.22) 0 1px,transparent 1px 14px),repeating-linear-gradient(0deg,rgba(255,235,202,.12) 0 1px,transparent 1px 8px)!important
}
.vmat-reinforced-glass{
  background-color:rgba(67,138,154,.62)!important;
  background-image:linear-gradient(rgba(20,68,78,.5) 2px,transparent 2px),linear-gradient(90deg,rgba(20,68,78,.48) 2px,transparent 2px),repeating-linear-gradient(45deg,rgba(233,252,255,.10) 0 1px,transparent 1px 11px)!important;
  background-size:32px 32px,32px 32px,auto!important
}
@media (max-width:820px){
  .vbaseToolbarGroup{
    padding-top:15px
  }
  .vbaseToolbarGroupTitle{
    font-size:8px
  }
}
.vbaseMaterialNote{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:7px;
  padding-top:7px;
  border-top:1px solid rgba(128,108,65,.18);
  font-size:10px
}
.vbaseMaterialNote b{color:#e5c985}
.vbaseMaterialNote span{color:#8f846f;text-align:right}
.vbaseCell.vbaseFocusPulse{
  position:relative;
  z-index:18;
  outline:3px solid #f2c765;
  outline-offset:-3px;
  box-shadow:0 0 0 2px rgba(242,199,101,.22),0 0 24px rgba(242,199,101,.46)!important;
  animation:vbaseFocusPulse 1.8s ease-out
}
@keyframes vbaseFocusPulse{
  0%,25%{filter:brightness(1.45)}
  100%{filter:brightness(1)}
}
@media (prefers-reduced-motion:reduce){.vbaseCell.vbaseFocusPulse{animation:none}}
/* Wall Line previews the exact edge that will receive the straight wall run. */
.vbaseCell.vbaseWallLineDraft{z-index:14}
.vbaseCell.vbaseWallLineDraft.draft-n{box-shadow:inset 0 4px 0 #f2c765!important}
.vbaseCell.vbaseWallLineDraft.draft-s{box-shadow:inset 0 -4px 0 #f2c765!important}
.vbaseCell.vbaseWallLineDraft.draft-e{box-shadow:inset -4px 0 0 #f2c765!important}
.vbaseCell.vbaseWallLineDraft.draft-w{box-shadow:inset 4px 0 0 #f2c765!important}

/* Shared Maps */
.vsharedGrid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:12px;
  align-items:start;
}
.vsharedCreate,.vsharedJoin{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  margin-top:9px;
}
.vsharedMapRow{
  border:1px solid #2e302d;
  border-radius:10px;
  padding:10px;
  margin-top:8px;
  background:#111310;
}
.vsharedMapRow.active{
  border-color:#6a531f;
  box-shadow:inset 0 0 0 1px rgba(255,209,102,.08);
}
.vsharedMapMain,.vsharedMember,.vsharedActive,.vsharedInviteBox{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.vsharedMapMain small,.vsharedMember small,.vsharedActive span,.vsharedInviteBox small{
  display:block;
  margin-top:2px;
  color:#9d998d;
  font-size:11px;
}
.vsharedMember{
  padding:8px 0;
  border-bottom:1px solid #272824;
}
.vsharedMember:last-child{border-bottom:0}
.vsharedMembersFor{margin:0 0 5px}
.vsharedActive{
  padding:9px 10px;
  border:1px solid #3f4139;
  border-radius:9px;
  background:#151712;
  margin-bottom:8px;
}
.vsharedInviteBox{
  margin-top:9px;
  padding:9px 10px;
  border:1px solid #3c403e;
  border-radius:9px;
  background:#0d1112;
}
.vsharedInviteBox code{
  color:#91d7ea;
  font-weight:700;
  letter-spacing:.04em;
  font-size:14px;
  overflow-wrap:anywhere;
}
.vsharedInviteCard{overflow:hidden}
.vsharedInviteCode{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.vsharedInviteCode span{
  color:#777d78;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.vsharedInviteActions{flex-wrap:wrap}
.vsharedInviteDetected{
  margin-top:10px;
  padding:9px 10px;
  border:1px solid #465d63;
  border-radius:8px;
  color:#b9dce5;
  background:#101719;
}
.vsharedError{
  margin-top:10px;
  color:#ffb3aa;
}
.codex-pin-shared{
  box-shadow:0 0 0 1px rgba(88,183,211,.22),0 1px 4px rgba(0,0,0,.7)!important;
}
@media (max-width:900px){
  .vsharedGrid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .vsharedCreate,.vsharedJoin{grid-template-columns:1fr}
  .vsharedMapRow .vrow{align-items:stretch}
  .vsharedMapRow .vrow .vbtn{flex:1 1 45%}
  .vsharedInviteBox{align-items:flex-start;flex-direction:column}
  .vsharedInviteActions .vbtn{flex:1 1 100%}
}

/* Phone layout keeps build pieces and planner tools in two simple dropdowns. */
.vbaseMobileToolbar {
  display: none;
}

@media (max-width: 820px) {
  .vbaseBoardHead {
    gap: 9px;
    margin-bottom: 10px;
  }

  .vbaseHeaderToolbarWrap {
    display: none;
  }

  .vbaseMobileToolbar {
    display: grid;
    width: 100%;
    gap: 8px;
  }

  .vbaseMobileToolField {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    width: 100%;
    color: #b9a77f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
  }

  .vbaseMobileToolField .vselect {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    font-size: 14px;
    font-weight: 650;
    text-transform: none;
    letter-spacing: 0;
    border-color: #5a4a28;
    background-color: #141410;
  }

  .vbaseGridCommentTool {
    display: none;
  }

  .vbaseBoardWrap {
    padding-top: 12px;
  }

  .vbaseBoardIdentity .vtitle {
    font-size: 17px;
    line-height: 1.2;
  }

  .vbaseBoardIdentity .vmuted {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.3;
  }
}

@media (max-width: 420px) {
  .vbaseMobileToolField {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}