:root {
  --vault-bg: rgba(10, 10, 10, 0.86);
  --vault-fg: #e6fffb;
  --vault-border: rgba(255, 255, 255, 0.12);
  --vault-accent: #00ffc8;
}

.vault-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}
.vault-overlay.active { display: flex; }

.vault-panel {
  width: min(1000px, 96vw);
  height: min(640px, 86vh);
  background: var(--vault-bg);
  color: var(--vault-fg);
  border: 1px solid var(--vault-border);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 24px rgba(0,255,200,.2);
  backdrop-filter: blur(10px) saturate(1.2);
  transform: scale(.96);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
  display: grid;
  grid-template-rows: auto 1fr;
}
.vault-overlay.active .vault-panel { transform: scale(1); opacity: 1; }

.vault-header {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--vault-border);
}
.vault-title { font: 600 14px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: #bffcf3; }
.vault-spacer { flex: 1; }
.vault-close { background: transparent; color: var(--vault-fg); border: 1px solid var(--vault-border); border-radius: 10px; padding: 6px 10px; cursor: pointer; }
.vault-close:hover { border-color: rgba(0,255,200,.5); color: white; }

.vault-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 0;
}
.vault-nav { border-right: 1px solid var(--vault-border); padding: 10px; overflow: auto; }
.vault-content { padding: 12px; overflow: auto; }

.vault-tab { width: 100%; text-align: left; padding: 8px 10px; border: 1px solid transparent; background: transparent; color: var(--vault-fg); border-radius: 10px; cursor: pointer; margin-bottom: 6px; }
.vault-tab:hover { border-color: rgba(0,255,200,.35); }
.vault-tab.active { border-color: rgba(0,255,200,.6); box-shadow: 0 0 16px rgba(0,255,200,.2) inset; }

.ascii-block { white-space: pre; font: 12px/1.1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: #bffcf3; text-shadow: 0 0 8px rgba(0,255,200,.25); }
.grid { display: grid; gap: 10px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.muted { color: #aee7df; font-size: 12px; }
.row { display: flex; align-items: center; gap: 8px; }
.btn { padding: 6px 10px; border-radius: 10px; border: 1px solid var(--vault-border); background: rgba(255,255,255,.04); color: var(--vault-fg); cursor: pointer; }
.btn:hover { border-color: rgba(0,255,200,.5); color: white; }
.select { padding: 6px 10px; border-radius: 10px; border: 1px solid var(--vault-border); background: rgba(255,255,255,.04); color: var(--vault-fg); }

canvas.vgame { background: rgba(255,255,255,.03); border: 1px solid var(--vault-border); border-radius: 8px; width: 100%; height: 260px; display: block; }